基于Echarts 3.19 制作常用的图形(非静态)

前端之家收集整理的这篇文章主要介绍了基于Echarts 3.19 制作常用的图形(非静态)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

饼图:

环境:Echarts 3.19 vs2013

实现方式:ajax+ashx+json

注意事项: 官网所需格式为 [{value:23,name:'xxxx' }] 请将key 的名字不要写错

具体代码,各位看官 请下移目光。

页面部分就设置一个div 就好了

 接下来就是js部分了 其实Echarts 跟HTML5中的 Canvans 还是有联系的 想知道的可以查资料哟

查询的时候咯 var dom = document.getElementById('contanis'); var mycharts = echarts.init(dom); option = { title: { text: '部门人口比例',subtext: '测试数据',x: 'center' },tooltip: { trigger: 'item',formatter: "{a}
{b} : {c} ({d}%)" },legend: { orient: 'vertical',left: 'left',data: [] },series: [ { name: '2012年度',type: 'pie',radius: '55%',center: ['50%','60%'],data: [],itemStyle: { emphasis: { shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0,0.5)' //这怎么会有个.5呢? 看来还是要看看H5哟 } } } ] }; mycharts.setOption(option);

 接下来就是 ajax部分了 动态加载数据才是根本的 数据固定多没意思,来干了这碗孟婆汤 来世就做UI设计尸

用户其他操作必须等待请求完成才可以执行) url: "../Handler/DepartmentHandler.ashx",data: {},//demo 没加条件 dataType: "json",//返回数据形式为json success: function (result) { for (var i = 0; i < result.length; i++) { name.push(result[i].name); } mycharts.setOption({ //加载数据图表 legend:{data:name },series: [{ data:result }] }); },error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } });

 ashx部分就简单多了 单纯的序列化数据

list = new List(); foreach (DataRow dr in result.Rows) { // 附上Echarts 所需的格式:[{value:335,name:'直接访问'}] Deart d = new Deart(); d.value = Convert.ToInt32(dr["number"]); //自己粗心 用values Echarts 不认 一直就是undefined d.name = dr["D_Name"].ToString(); list.Add(d); } JavaScriptSerializer jss = new JavaScriptSerializer(); string json = jss.Serialize(list); public class Deart //其实可以不用这么定义 自己保险让它出来的 value 值为int { public int value { get; set; } public string name { get; set; } }

附上效果图吧:

柱状图:

环境:Echarts 3.19 vs2013

实现方式:ajax+ashx+json

注意事项: 官网所需格式为:[5,6,7,9,34] 数组类型

具体代码,各位看官 请下移目光。

<%--按钮触发--%>
<%--声明一个DIV 用来装Canvas绘制的图片--%>

猜你在找的JavaScript相关文章