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

<!--请先引用文件--> <script src="../Scripts/jquery-1.8.2.min.js"></script><script src="../Scripts/echarts/echarts.min.js"></script>

<div><input type="button" id="btngo" value="Pie" /> </div><div id="contanis" style="width:px;height:px"></div>

$("#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({type: "get",async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url: "../Handler/DepartmentHandler.ashx", data: {},//demo 没加条件dataType: "json", //返回数据形式为jsonsuccess: 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("图表请求数据失败!");}});

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; } }

<!--js代码 --> <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 () {//获取到绘制domvar 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给他赋值}]});

myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画var names = []; //类别数组（实际用来盛放X轴坐标值）var nums = []; //销量数组（实际用来盛放Y坐标值）$.ajax({type: "post",async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url: "../Handler/DepartmentHandler.ashx", //请求发送到../Handler/DepartmentHandler处data: {},dataType: "json", //返回数据形式为jsonsuccess: 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();}})});

$.ajax({type: "get",async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url: "../Handler/DepartmentHandler.ashx", data: {},//demo 没加条件dataType: "json", //返回数据形式为jsonsuccess: function (result) { for (var i = 0; i < result.length; i++){name.push(result[i].name); } option = {title: {text: '部门人口比例',subtext: '测试数据',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data:name},series: [{name: '2012年度',type: 'pie',radius: '55%',center: ['50%', '60%'],data: result,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}; }, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } });