饼图：
环境：Echarts 3.19 vs2013
实现方式：ajax+ashx+json
注意事项： 官网所需格式为 [{value:23,name:'xxxx' }] 请将key 的名字不要写错
具体代码，各位看官 请下移目光。
rush:js;">
rush:js;">
接下来就是js部分了 其实Echarts 跟HTML5中的 Canvans 还是有联系的 想知道的可以查资料哟
rush:js;">
$("#btngo").click(function () { //这里用的是点击事件下面 当然这也是模仿你有条件查询的时候咯
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);
{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设计尸
rush:js;">
$.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部分就简单多了 单纯的序列化数据
rush:js;">
DataTable result = BLL.Department.GetDeptNumber();
List
附上效果图吧：
柱状图：
环境：Echarts 3.19 vs2013
实现方式：ajax+ashx+json
注意事项： 官网所需格式为：[5,6,7,9,34] 数组类型
具体代码，各位看官 请下移目光。
rush:js;">
<%--按钮触发--%>
<%--声明一个DIV 用来装Canvas绘制的图片--%>