当你看到这篇文章的时候 说明 你已经又看过 Echarts官网 了 ,自己做这个的时候走了很多的弯路 说出来不怕你们笑话
1.想到是数组形式的 先在C#中做了行列转换 ,又用string做拼接。
2.看到别人的例子 差不多很多是前端做的 没有动态 静态页面 下载,一看是静态写死的 自己都想撞墙。
3.做转换的时候蒙住了,用某度查实例。。。。。。
话不多说
先前你要准备好文件 :Echarts文件下载页面
做的是demo 所以引入单个 文件咯
<script src="../Scripts/jquery-1.8.2.min.js"></script>
<script src="../Scripts/echarts/echarts.min.js"></script>
接下来就是书写图片部分
<div>
<%--按钮触发--%>
<input type="button" id="btncanv" value="去吧 皮卡丘" />
</div>
<%--声明一个DIV 用来装Canvas绘制的图片--%>
<div id="contanis" style="width:1000px;height:800px" >
<script type="text/javascript">
$("#btncanv").click(function () {
//获取到绘制dom
var dom = document.getElementById("contanis");
var myChart = echarts.init(dom);
myChart.setOption({
title: {
text: '异步数据加载示例' //图片标题
},
tooltip: {},
legend: {
data: ['部门人口']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '2015',
type: 'bar',//可以更改为 line(折线)
data: [] //此处给空 后面用ajax给他赋值
}]
});
ajax上菜来了
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组(实际用来盛放X轴坐标值)
var nums = []; //销量数组(实际用来盛放Y坐标值)
$.ajax({
type: "post",
async: true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url: "../Handler/DepartmentHandler.ashx", //请求发送到../Handler/DepartmentHandler处
data: {},
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].name); //挨个取出类别并填入类别数组
}
for (var i = 0; i < result.length; i++) {
nums.push(result[i].values); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis:{data: names},
series: [{ data: nums }]
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
});
在ashx 部分就是简单了
随你是用DataTable 转为json 还是用 实体 还是多个实体 那就看你自己的造化了
DataTable result= BLL.Department.GetDeptNumber();
List<object> list = new List<object>();
foreach (DataRow dr in result.Rows)
{
var obj = new { values = dr["number"], name = dr["D_Name"]};
list.Add(obj);
}
JavaScriptSerializer jss = new JavaScriptSerializer();
string json = jss.Serialize(list);
context.Response.Write(json);
附上运行结果吧:
做饼图时请注意 不要加上
myChart.showLoading();
这样会报组件加载异常的哟 还有解析values 时 官方给的是 数值类型的。