Echarts基础之绘制饼图
最近阿里内部使用的 图表也向外开放了 而百度就好像更有良心一点，Echarts 早就开放了 。自己学习Echarts 的时候走了很多的弯路，毕竟谁让自己菜呢，多撞几次南墙才晓得疼 才知道学习方法，新手上路，请多担待。下面就讲一下 饼图 的绘制方法。
环境：Echarts 3.19 vs2013
实现方式：ajax+ashx+json
注意事项： 官网所需格式为 [{value:23,name:’xxxx’ }] 请将key 的名字不要写错
具体代码，各位看官 请下移目光。
<!--请先引用文件-->
<script src="../Scripts/jquery-1.8.2.min.js"></script>
<script src="../Scripts/echarts/echarts.min.js"></script>
页面部分就设置一个div 就好了
| 1 2 |
<div><input type="button" id="btngo" value="Pie" /> </div> <div id="contanis" style="width:800px;height:800px"></div> |
接下来就是js部分了 其实Echarts 跟HTML5中的 Canvans 还是有联系的 想知道的可以查资料哟
| $("#btngo").click(function () { //这里用的是点击事件下面 当然这也是模仿你有条件查询的时候咯 var dom = document.getElementById(’contanis’); var mycharts = echarts.init(dom); option = { title: { text: ’部门人口比例’, subtext: ’测试数据’, x: ’center’ }, tooltip: { trigger: ’item’, formatter: "{a} <br/>{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, 0, 0.5)’ //这怎么会有个.5呢？ 看来还是要看看H5哟 } } } ] }; mycharts.setOption(option); |
接下来就是 ajax部分了 动态加载数据才是根本的 数据固定多没意思，来干了这碗孟婆汤 来世就做UI设计尸
| $.ajax({ type: "get", async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行） 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部分就简单多了 单纯的序列化数据
DataTable result = BLL.Department.GetDeptNumber();
List<object> list = new List<object>();
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; }
}
附上效果图吧：
文章来自：博客园/严芷云