标签:
1.echarts地址
http://echarts.baidu.com/build/dist/echarts-all.js
2.echarts使用
有两种方法,
1.使用ajax来设置图表数据。
2.从后台获取图表数据。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <div id="main" style="height:400px"></div> <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> <script type="text/javascript"> myChart(); function myChart() { // 基于准备好的dom,初始化echarts图表 var myChart = echarts.init(document.getElementById(‘main‘)); var categories = new Array(); var data = new Array(); //此处值可以从后台取,如 categories = ${category}; categories = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]; data = [5, 20, 40, 10, 10, 20]; var option = { tooltip: { show: true }, toolbox: { show : true, feature : { mark : {show: true}, // dataView : {show: true, readOnly: false}, magicType : {show: true, type: [‘line‘, ‘bar‘]}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, legend: { data:[‘销量‘] }, xAxis : [ { type : ‘category‘, data : categories } ], yAxis : [ { type : ‘value‘ } ], series : [ { "name":"销量", "type":"bar", "data": data } ] }; // 为echarts对象加载数据 myChart.setOption(option); } //ajax设置图表 function changeChart(){ $.ajax({ url:url, dataType:"json", success:function(data){ var newOption = myChart.getOption(); // 深拷贝 newOption.xAxis[0].data = []; newOption.series[0].data = []; myChart.setOption(newOption,true); // 第二个参数表示不和原先的option合并 ); }); } </script> </body>
当数据为空时,旧版本的echarts会报错,新版本不会。
标签:
原文地址:http://www.cnblogs.com/zhuyuehua/p/4685129.html