ECharts 教程

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

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

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

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

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

 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里的设置，设置坐标轴、设置数据。

 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     };

带有折线图的柱状图

 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 );