ECharts案例教程1

Posted 2020-06-16

  原文：http://blog.csdn.net/whqet/article/details/42703973

 

简介

ECharts，缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，业界给予了很多赞誉，这里不多说，需要了解详情的同学参见官网。我简略看了下，最贴切的地方在于本地化支持，比如对于中国地图的支持。

案例欣赏

-----------------------

--------------------------------------------------------------

        ===案例一简单条形图===案例二 条形、折线图混搭===

--------------------------------------------------------------

----------------------

具体实现

   简单条形图

先来一个最简单的案例，实现一个条形图，代码我放在codepen哟，大家可以移步预览效果先。

预先准备好具有宽和高的网页元素，我们将用它绘制数据表。

[html] view plain copy

 print?

1. <div id="main" style="width:600px;height:400px"></div>  

然后我们导入Echarts类库，做好准备。

[html] view plain copy

 print?

1. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>  

然后就是重头戏，我们来绘制数据表，首先配置路径，接着使用Echarts开始绘图。

[javascript] view plain copy

 print?

1. // 路径配置  
2. require.config({  
3.   paths: {  
4.     echarts: ‘http://echarts.baidu.com/build/dist‘  
5.   }  
6. });  
7.   
8. // 使用  
9. require(  
10.   [  
11.     ‘echarts‘,  
12.     ‘echarts/chart/bar‘, // 使用柱状图就加载bar模块，按需加载  
13.   ],  
14.   function (ec) {  
15.     // 基于准备好的dom，初始化echarts图表  
16.     var myChart = ec.init(document.getElementById(‘main‘));   
17.     //设置数据  
18.     var option = {  
19.         
20.     };  
21.   
22.     // 为echarts对象加载数据   
23.     myChart.setOption(option);   
24.   }  
25. );  

重点是option里的设置，设置坐标轴、设置数据。

[javascript] view plain copy

 print?

1. var option = {  
2.       //设置坐标轴  
3.       xAxis : [  
4.         {  
5.           type : ‘category‘,  
6.           data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]  
7.         }  
8.       ],  
9.       yAxis : [  
10.         {  
11.           type : ‘value‘  
12.         }  
13.       ],  
14.       //设置数据  
15.       series : [  
16.         {  
17.           "name":"销量",  
18.           "type":"bar",  
19.           "data":[5, 20, 40, 10, 24, 20,24,32],  
20.         }  
21.       ]  
22.     };  

我们可以设置图标标题、图例、提示等，代码如下，效果如下图所示。

[javascript] view plain copy

 print?

1. var option = {  
2.      //设置标题  
3.      title:{  
4.        text:‘销量图‘,  
5.        subtext:‘纯属捏造，如有雷同，人品爆发。‘  
6.      },  
7.      //设置提示  
8.      tooltip: {  
9.        show: true  
10.      },  
11.      //设置图例  
12.      legend: {  
13.        data:[‘销量‘]  
14.      },  
15.      //设置坐标轴  
16.      xAxis : [  
17.        {  
18.          type : ‘category‘,  
19.          data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]  
20.        }  
21.      ],  
22.      yAxis : [  
23.        {  
24.          type : ‘value‘  
25.        }  
26.      ],  
27.      //设置数据  
28.      series : [  
29.        {  
30.          "name":"销量",  
31.          "type":"bar",  
32.          "data":[5, 20, 40, 10, 24, 20,24,32],  
33.        }  
34.      ]  
35.    };  

======================ok，华丽的分割线，之后我来点复杂的==========================

    条形图折线图混搭

加点料，来电混搭，直线图加上条形图，同时画平均线、提示最大最小值，同样代码放在codepen，移步预览效果先。

当我们需要混搭的时候，首先需要在require里加载需要使用的图库，然后在series里填写折线图的数据就可以了。代码如下，因为注释已经写得很清楚了，就不在啰嗦了，大家直接研究代码。

[javascript] view plain copy

 print?

1. // 路径配置  
2. require.config({  
3.   paths: {  
4.     echarts: ‘http://echarts.baidu.com/build/dist‘  
5.   }  
6. });  
7.   
8. // 使用  
9. require(  
10.   [  
11.     ‘echarts‘,  
12.     ‘echarts/chart/bar‘, // 使用柱状图就加载bar模块，按需加载  
13.     ‘echarts/chart/line‘  
14.   ],  
15.   function (ec) {  
16.     // 基于准备好的dom，初始化echarts图表  
17.     var myChart = ec.init(document.getElementById(‘main‘));   
18. //设置数据  
19.     var option = {  
20.       //设置标题  
21.       title:{  
22.         text:‘销量图‘,  
23.         subtext:‘纯属捏造，如有雷同，人品爆发。‘  
24.       },  
25.       //设置提示  
26.       tooltip: {  
27.         show: true  
28.       },  
29.       //设置图例  
30.       legend: {  
31.         data:[‘销量‘]  
32.       },  
33.       //设置坐标轴  
34.       xAxis : [  
35.         {  
36.           type : ‘category‘,  
37.           data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]  
38.         }  
39.       ],  
40.       yAxis : [  
41.         {  
42.           type : ‘value‘  
43.         }  
44.       ],  
45.       //设置数据  
46.       series : [  
47.         //条形图  
48.         {  
49.           "name":"销量",  
50.           "type":"bar",  
51.           "data":[5, 20, 38, 10, 24, 20,24,32]  
52.         },  
53.         //折线图  
54.          {  
55.           "name":"销量",  
56.           "type":"line",  
57.           "data":[5, 20, 38, 10, 24, 20,24,32],  
58.            //绘制平均线  
59.            markLine : {  
60.              data : [  
61.                {type : ‘average‘, name: ‘平均值‘}  
62.              ]  
63.            },  
64.           //绘制最高最低点  
65.           markPoint : {  
66.             data : [  
67.               {type : ‘max‘, name: ‘最大值‘},  
68.               {type : ‘min‘, name: ‘最小值‘}  
69.             ]  
70.           }  
71.         }  
72.       ]  
73.     };  
74.   
75.     // 为echarts对象加载数据   
76.     myChart.setOption(option);   
77.   }  
78. );