1、源码来自 "E:\ZC_IDE\JavaScript_3rd\echarts-2.2.7\doc\example\www\..."
1.1、将里面的 地图显示部分去掉了...
1.2、这里面的源码是静态的,只显示了一次 柱状图。我在里面添加了一个 按钮,来动态的改变柱状图的信息
2、代码:
2.1、代码中使用的插件 echarts-2.2.7,来自 "E:\ZC_IDE\JavaScript_3rd\echarts-2.2.7 (1).zip"
2.2、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!--点击下面的按钮,动态的改变柱状图的信息--> <input type="button" value="testBtn" onclick="TestBtnClick()"/> <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--> <!--Step:1 为ECharts准备一个具备大小(宽高)的Dom--> <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <!--Step:2 Import echarts.js--> <!--Step:2 引入echarts.js--> <script src="js/echarts.js"></script> <script type="text/javascript"> // Step:3 conifg ECharts's path, link to echarts.js from current page. // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径 require.config({ paths: { echarts: './js' } }); // Step:4 require echarts and use it in the callback. // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径 require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/map' ], EChartCallback ); var g_ecDom = document.getElementById('main'); var g_ecChart = null; var g_ec = null; var g_ecOption = null; function EChartCallback(_ec) { g_ec = _ec; //--- 折柱 --- g_ecChart = _ec.init(g_ecDom); console.log("_ec : "+_ec+" , g_ecChart : "+g_ecChart); g_ecOption = { tooltip : { trigger: 'axis' }, legend: { data:['蒸发量','降水量'] }, calculable : true, xAxis : [ { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis : [ { type : 'value', splitArea : {show : true} } ]/*, series : [ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name:'降水量', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] } ] //*/ };// g_ecOption //* var series = []; var series01 = { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }; var series02 = { name:'降水量', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] }; series.push(series01); series.push(series02); g_ecChart.setOption(g_ecOption); g_ecChart.setSeries(series); /**/ console.log("g_ecOption.series(01) : "+g_ecOption.series); } //* function TestBtnClick() { console.log("g_ecOption.series(02) : "+g_ecOption.series); var series = []; var series01 = { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }; var series02 = { name:'降水量', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 1182.2, 48.7, 18.8, 6.0, 2.3] }; series[0] = series01; series[1] = series02; if (! g_ec) return; //var chart = g_ec.init(g_dom);// 方式一 (见官方文档[doc]的"初始化"那一节) //var chart = require('echarts').init(g_dom);// 方式二 (见官方文档[doc]的"初始化"那一节) //chart.setOption(g_ecOption); //chart.setSeries(series); g_ecChart.setOption(g_ecOption);// 方式三 (官方文档是保存的是回调函数里面的_ec[如上面的 方式二],我这里保存的是 g_ecChart) g_ecChart.setSeries(series); console.log("g_ecOption.series(03) : "+g_ecOption.series); // 通过下面的此时应该可以看出 echarts接口调用方法init后 生成的应该是一个新的图标对象 /* var chart1 = g_ec.init(g_ecDom);// 方式一 if (g_ecChart == chart1) console.log("g_ecChart == chart1"); else console.log("g_ecChart != chart1"); // 没有下面这两句,图标内容就是空的 chart1.setOption(g_ecOption); chart1.setSeries(series); var chart2 = require('echarts').init(g_ecDom);// 方式二 if (g_ecChart == chart2) console.log("g_ecChart == chart2"); else console.log("g_ecChart != chart2"); chart2.setOption(g_ecOption); chart2.setSeries(series); //*/ } </script> </body> </html>
3、
4、
5、