身为一个小前端，当得知需要在页面根据后台数据绘制统计数据的图表时，一筹莫展，幸好遇见了百度的ECharts插件，这款插件容易入手：
一下为初试：
prepare.js//稍微封装，易于复用
/* *function getJson() *为获取后台的数据json *json.data为报表数据对应横轴的值 *json.name为报表横坐标的名称 */ function getJson(){ var jsondata = {}; jsondata.legendName = []; //图表的表面 jsondata.type = 'line'; //设置其为折线图'line',还是条形图'bar' jsondata.data = []; //设置对应横轴的值 jsondata.name = []; //设置横轴的名称 jsondata.color = []; //设置柱形图颜色 jsondata.trigger = ''; //设置拥有对应横轴的辅助线 axis，一般折线图会用到 return jsondata; } /* *function setOptionData(json) *设置报表的option样式 *参数json为设置样式和数据 *json.data为报表数据对应横轴的值 *json.name为报表横坐标的名称 *返回值：option */ function setOptionData(json){ var option = { color : json.color, tooltip: { show: true, trigger: json.trigger }, legend: { data:json.legendName }, xAxis : [ { type : 'category', data : json.name } ], yAxis : [ { type : 'value' } ], series : [ { "name":json.legendName, "type":json.type, "data":json.data } ] }; return option; }
下面为两种不同的引入使用：
一种为模块化：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>使用prepare.js</title> <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script> <script src="prepare.js"></script> </head> <style> #draw{ width: 80%; height: 400px; margin:0 auto; } </style> <body> <p>已下为报表</p> <div id="draw"> </div> </body> <script> // 路径配置 require.config({ paths:{ // 'echarts' : 'http://echarts.baidu.com/build/echarts', // 'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts' 'echarts': 'echarts-2.0.3/build/echarts', 'echarts/chart/bar':'echarts-2.0.3/build/echarts.js' } }); require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载 ], function(ec){ var mydraw = {}; mydraw.obj = document.getElementById("draw"); mydraw.json = getJson(); ////因为没有从后台获取统计的数据，所以在此初始化 mydraw.json.legendName = ['浏览量']; mydraw.json.trigger = 'axis'; mydraw.json.type = 'line'; mydraw.json.color = ['#e2e2e2']; mydraw.json.data = [10,15,40,70,20,10,80,99,11,31,12,42]; mydraw.json.name = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']; //// mydraw.option = setOptionData(mydraw.json); // drawEchart(mydraw); var myChart = ec.init(mydraw.obj); myChart.setOption(mydraw.option); }); </script> </html>
另一种为非模块导入：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>使用prepare.js</title> <script src="echarts-2.0.3/build/echarts-plain.js"></script> <script src="prepare.js"></script> </head> <style> #draw{ width: 80%; height: 400px; margin:0 auto; } </style> <body> <p>已下为报表</p> <div id="draw"> </div> </body> <script> window.onload = function(){ var mydraw = {}; mydraw.obj = document.getElementById("draw"); mydraw.json = getJson(); mydraw.json.legendName = ['浏览量']; mydraw.json.trigger = 'axis'; mydraw.json.type = 'line'; mydraw.json.color = ['#e2e2e2']; mydraw.json.data = [10,15,40,70,20,10,80,99,11,31,12,42]; mydraw.json.name = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']; //// mydraw.option = setOptionData(mydraw.json); var myChart = echarts.init(mydraw.obj); myChart.setOption(mydraw.option); } </script> </html>
