zoukankan      html  css  js  c++  java

  • echarts使用

    本来想把echarts和chart.js放一起的，不过用了echarts后发现功能比chart.js强大的多，问题也多。
    我这里下的是2.2.0版本解压后将echarts目录放到工程里就行了，如图


    其实还可以精简文件，我这里是按官方推荐的模块化单文件引入方式，所以只需要echarts目录下的echarts.js（注意是echarts目录下的echarts.js，不是echarts/dist下的echarts.js，官方文档里说的是echarts/dist下的echarts.js，不过我这里用起来报错，应该是少了模块化的依赖了。echarts/dist下echars-all.js是可以单独用script标签引入使用的）和echarts/dist/chart下的单文件图表js文件，如图


    然后开始单文件引入js文件（模块化引入方式还是有些麻烦的 ^_^ ，我看官方文档说ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入）
    首先加载requireJS和echarts主文件
    <script src="require.js"></script>
    <script src="echarts.js"></script>
    然后配置echarts的require路径，这个可以加在requireJS的config配置文件里
    require.config({
    paths:{
    　　echarts:'./' //我这里html和echart.js在相同目录
    }
    });
    然后就可以写图表相关的js了
    先模拟一个数据，这个数据可以用异步请求也可以直接用后台代码生成到页面变量
    var jsonLine = {};
    图表代码，首先需要引入echarts模块然后按需加载线图，饼图，柱形图，这里把图表生成的js也用amd规范封装了，这样看起来更简洁，draw函数传入的参数是dom，title，jsonData。同时还对x轴数值、y轴刻度做了格式化，使数据显示看起来更清晰，echarts的配置项很多很多，可以根据实际需要写不同的配置，详情见官方文档http://echarts.baidu.com/echarts2/doc/doc.html这个是echarts2的
    require(['echarts','echarts/charts','echarts/chart/line','echarts/chart/pie','echarts/chart/bar'],function (ec,ch) {
    　　ch.drawLine("lineChart","降雨量",jsonLine);
    })
    代码结构如下（只是测试用，实际需要放到对应项目js目录下，并且html和js是分开的）

    grid是图表位置属性，formatter是数据格式化属性，都比较重要，具体看官方文档

     

    代码如下

    html

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>ECharts</title>
 6     <script src="require.js"></script>
 7     <script src="echarts.js"></script>
 8 </head>
 9 <body>
10     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
11     <div id="pieChart" style=" 700px;height: 500px;"></div>
12     <div id="barChart" style=" 1000px;height: 500px;"></div>
13     <div id="lineChart" style=" 1000px;height: 500px;"></div>
14 </body>
15 <script>
16     require.config({
17         paths:{
18             echarts:'./'
19         }
20     });
21     var jsonLine = { "legend":['蒸发量','降水量'],"xData":['2017-03-01','2017-03-02','2017-03-03','2017-03-04','2017-03-05','2017-03-06','2017-03-07','2017-03-08'],"seriesData":[{name:'蒸发量',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 13500.6, 16200.2]},{name:'降水量', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 17005.6, 18200.2]}]};
22 
23     var jsonBar = { "legend":['蒸发量','降水量'],"xData":['2017-03-01','2017-03-02','2017-03-03','2017-03-04','2017-03-05','2017-03-06','2017-03-07','2017-03-08'],"seriesData":[{name:'蒸发量',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 13500.6, 16200.2]},{name:'降水量', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 17500.6, 18200.2]}]};
24 
25     var jsonPie = { "legend":['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],"xData":['2017-03-01','2017-03-02','2017-03-03','2017-03-04','2017-03-05','2017-03-06','2017-03-07','2017-03-08'],"seriesData":[{value:30035, name:'直接访问'},{value:31000, name:'邮件营销'},{value:23004, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]};
26 
27     require(['echarts','echarts/charts','echarts/chart/line','echarts/chart/pie','echarts/chart/bar'],function (ec,ch) {
28         ch.drawPie("pieChart","营销数据",jsonPie);
29         ch.drawLine("lineChart","降雨量",jsonLine);
30         ch.drawBar("barChart","降雨量",jsonBar);
31     })
32 </script>
33 </html>

    图表生成相关的charts.js

      1 define(['echarts'],
  2     function (ec) {
  3         var draw = {};
  4         draw.drawLine = function (dom,title,data){
  5             //获取最大数值
  6             // var valueList = [];
  7             // data.seriesData.forEach(function (elem) {
  8             //     valueList.push.apply(valueList,elem.data);
  9             // })
 10             var max = Math.max.apply({},data.seriesData[0].data);
 11             //将数值信息压入series
 12             var series=[];
 13             var selectedList = {};
 14             data.seriesData.forEach(function (elem,i) {
 15                 series.push({
 16                     name: elem.name,
 17                     type: 'line',
 18                     itemStyle : {
 19                         normal: {
 20                             label : {
 21                                 show: true,
 22                                 formatter:function(a,b,c){
 23                                     if( c >= 10000 ){
 24                                         return (c/10000).toFixed(2) + "万"
 25                                     }
 26                                     return c;
 27                                 }
 28                             }
 29                         }
 30                     },
 31                     data: elem.data
 32                 });
 33                 // if( i > 0 ){
 34                 //     selectedList[elem.name] = false;
 35                 // }else {
 36                 //     selectedList[elem.name] = true;
 37                 // }
 38                 selectedList[elem.name] = true;
 39             })
 40             var myChart = ec.init(document.getElementById(dom));
 41             option = {
 42                 title:{
 43                     text:title,
 44                     x: 'center',
 45                 },
 46                 tooltip : {
 47                     trigger: 'items'
 48                 },
 49                 legend: {
 50                     data: data.legend,
 51                     padding:35,
 52                     selectedMode : 'single',
 53                     selected: selectedList
 54                 },
 55                 toolbox: {
 56                     show : true,
 57                     feature : {
 58                         saveAsImage : {show: true}
 59                     }
 60                 },
 61                 calculable : false,
 62                 xAxis : [
 63                     {
 64                         type : 'category',
 65                         data : data.xData
 66                     }
 67                 ],
 68                 yAxis : [
 69                     {
 70                         type : 'value',
 71                         splitArea : {show : true},
 72                         name : '成交量',
 73                         nameTextStyle : {
 74                             color : '#333'
 75                         },
 76                         max : max * 1.2,
 77                         minInterval : 1,
 78                         axisLabel : {
 79                             formatter: function(value) {
 80                                 if( value >= 10000 ){
 81                                     return (value/10000).toFixed(2) + "万"
 82                                 }
 83                                 return value;
 84                             }
 85                         }
 86                     }
 87                 ],
 88                 series : series
 89             };
 90             myChart.setOption(option);
 91         };
 92         draw.drawBar = function (dom,title,data){
 93             //获取最大数值
 94             // var valueList = [];
 95             // data.seriesData.forEach(function (elem) {
 96             //     valueList.push.apply(valueList,elem.data);
 97             // })
 98             var max = Math.max.apply({},data.seriesData[0].data);
 99             var zoomBarEnd = data.xData.length >= 10 ? 100/data.xData.length*10 : 100;
100             //将数值信息压入series
101             var series=[];
102             var selectedList = {};
103             data.seriesData.forEach(function (elem,i) {
104                 series.push({
105                     name: elem.name,
106                     type: 'bar',
107                     itemStyle : {
108                         normal: {
109                             label : {
110                                 show: true,
111                                 formatter:function(a,b,c){
112                                     if( c >= 10000 ){
113                                         return (c/10000).toFixed(2) + "万"
114                                     }
115                                     return c;
116                                 }
117                             }
118                         }
119                     },
120                     barGap:'5%',
121                     barCategoryGap:'40%',
122                     data: elem.data
123                 });
124                 if( i > 0 ){
125                     selectedList[elem.name] = false;
126                 }else {
127                     selectedList[elem.name] = true;
128                 }
129             })
130 
131             var myChart = ec.init(document.getElementById(dom));
132             option = {
133                 title:{
134                     text:title,
135                     x: 'center',
136                 },
137                 tooltip : {
138                     trigger: 'items',
139                     formatter: function(value) {
140                         if( value >= 10000 ){
141                             return (value/10000).toFixed(2) + "万"
142                         }
143                         return value;
144                     }
145                 },
146                 legend: {
147                     data: data.legend,
148                     padding:35,
149                     selectedMode : 'single',
150                     selected: selectedList
151                 },
152                 toolbox: {
153                     show : true,
154                     feature : {
155                         saveAsImage : {show: true}
156                     }
157                 },
158                 calculable : false,
159                 grid : {
160                     y : 100,
161                     y2 : 100
162                 },
163                 xAxis : [
164                     {
165                         type : 'category',
166                         data : data.xData,
167                         axisLabel: {
168                             interval: 0,
169                             // rotate : 50,//x轴文字旋转
170                             formatter:function(value,index)
171                             {
172                                 if (index % 2 != 0) {
173                                     return '

' + value;
174                                 }
175                                 else {
176                                     return value;
177                                 }
178                             }
179                         }
180                     }
181                 ],
182                 dataZoom : {
183                     show : true,
184                     realtime : true,
185                     start : 0,
186                     end : zoomBarEnd,//根据x轴粒度动态设置滚动条默认显示占比，默认显示10个左右，这样就不会出现x轴拥挤的情况
187                     showDetail : false,
188                     // backgroundColor : '#ccc',
189                     // dataBackgroundColor : 'red',
190                     // fillerColor : 'blue',
191                     // handleColor : 'green'
192                 },
193                 yAxis : [
194                     {
195                         type : 'value',
196                         // name : '成交量',
197                         // nameLocation : 'left',
198                         nameTextStyle : {
199                             color : '#333'
200                         },
201                         max : max * 1.2,
202                         splitArea : {show : true},
203                         minInterval : 1,
204                         axisLabel : {
205                             formatter: function(value) {
206                                 if( value >= 10000 ){
207                                     return (value/10000).toFixed(2) + "万"
208                                 }
209                                 return value;
210                             }
211                         }
212                     }
213                 ],
214                 series : series
215             };
216             myChart.setOption(option);
217             var ecConfig = require('echarts/config');
218             myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
219             function eConsole(param) {
220                 var valueList = [];
221                 data.seriesData.forEach(function (elem) {
222                     if( elem.name == param.target ){
223                         valueList = elem.data;
224                     }
225                 })
226                 var max = Math.max.apply({},valueList);
227                 option.yAxis[0].max = max * 1.2;
228                 myChart.setOption(option);
229             }
230         };
231         draw.drawPie = function (dom,title,data) {
232             var legendData = [];
233             data.legend.forEach(function (elem) {
234                 legendData.push(
235                     {
236                         name : elem,
237                         icon : 'stack'
238                     }
239                 )
240             })
241             var myChart = ec.init(document.getElementById(dom));
242             option = {
243                 title : {
244                     text: title,
245                     x:'center'
246                 },
247                 tooltip : {
248                     trigger: 'item',
249                     formatter: "{a} <br/>{b} : {c} ({d}%)"
250                 },
251                 legend: {
252                     orient : 'horizontal',
253                     x : 'center',
254                     data: legendData,
255                     padding : 15
256                 },
257                 toolbox: {
258                     show : true,
259                     feature : {
260                         saveAsImage : {show: true}
261                     }
262                 },
263                 calculable : false,
264                 series : [
265                     {
266                         type:'pie',
267                         radius : '55%',
268                         center: ['50%', '60%'],
269                         data: data.seriesData,
270                         itemStyle:{
271                             normal:{
272                                 label:{
273                                     show: true,
274 //                                  formatter: '{b} : {c} ({d}%)'
275                                     formatter:function(a,b,c,d){
276                                         if( c >= 10000 ){
277                                             return b + "：" +　(c/10000).toFixed(2) + "万" + " (" + d + "%)";
278                                         }
279                                         return b + "：" + c + " (" + d + "%)";
280                                     }
281                                 },
282                                 labelLine :{show:true}
283                             }
284                         }
285                     }
286                 ]
287             };
288             myChart.setOption(option);
289         };
290         return draw;
291     }
292 );
  • 相关阅读:
    asp的多国语言构思
    制作IE和ＦＦ都支持的无限级关联菜单
    破解网络尖兵（真正对付限制ADSL路由共享的方法）
    Asp透过系统DSN链接mysql数据库
    找到了一首曾经很喜欢的老歌
    生意人应具备的性格
    简单的操作让你的迅雷变的清爽
    线路分流自动跳转代码
    通过regsvr32注册DLL可以解决的一些疑难杂症
    页面无刷新超时自动退出
  • 原文地址：https://www.cnblogs.com/nightfallsad/p/6640072.html
Copyright © 2011-2022 走看看