ECharts案例教程1

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

简介

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

案例欣赏

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

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

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

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

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

具体实现

简单条形图

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

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

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

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

1. <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. require(
9. [
10. 'echarts',
11. 'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
12. ],
13. function (ec) {
14. // 基于准备好的dom，初始化echarts图表
15. var myChart = ec.init(document.getElementById('main'));
16. //设置数据
17. var option = {
18. };
19. // 为echarts对象加载数据
20. myChart.setOption(option);
21. }
22. );

重点是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. 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里填写折线图的数据就可以了。代码如下，因为注释已经写得很清楚了，就不在啰嗦了，大家直接研究代码。

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