ECharts 上手

一、获取 ECharts

你可以通过以下几种方式获取 ECharts。

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。
在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

二、获取 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta charset="utf-8">
5     <!-- 引入 ECharts 文件 -->
6     <script src="echarts.min.js"></script>
7 </head>
8 </html>

三、绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

1 <body>
2 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
3 <div id="main" style="width: 800px;height:400px;"></div>
4 </body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>ECharts</title>
 6     <!-- 引入 echarts.js -->
 7     <script src="echarts.min.js"></script>
 8 </head>
 9 <body>
10     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
11     <div id="main" style="width: 600px;height:400px;"></div>
12     <script type="text/javascript">
13         // 基于准备好的dom，初始化echarts实例
14         var myChart = echarts.init(document.getElementById('main'));
15 
16         // 指定图表的配置项和数据
17         var option = {
18             title: {
19                 text: 'ECharts 入门示例'
20             },
21             tooltip: {},
22             legend: {
23                 data:['销量']
24             },
25             xAxis: {
26                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
27             },
28             yAxis: {},
29             series: [{
30                 name: '销量',
31                 type: 'bar',
32                 data: [5, 20, 36, 10, 10, 20]
33             }]
34         };
35 
36         // 使用刚指定的配置项和数据显示图表。
37         myChart.setOption(option);
38     </script>
39 </body>
40 </html>

View Code

这样你的第一个图表就诞生了！

四、进阶

在一个canvas根据传入的配置参数不同，绘制不同的图表。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>echarts_ajax</title>
 6     <!-- 引入 ECharts 文件 -->
 7     <script src="http://www.daipianpian.com/common/js/echarts.min.js"></script>
 8     <link href="http://www.daipianpian.com/common/css/resetcsspc.css" rel="stylesheet">
 9     <style>
10         .demobox{width: 800px;height: auto;margin: 100px auto 0px;overflow: hidden;}
11         .tabnav{width: 100%;height: 40px;margin: 0 auto 50px;}
12         .tabnav ul{width: 49%;height: 100%;margin: 0 auto;overflow: hidden;zoom: 1;}
13         .tabnav li{float: left;width: 88px;height: 38px;line-height: 38px; margin-right: 8.6px;text-align: center;color: #333;font-size: 16px; background-color: #AADBCE;border: 1px solid #CEE8E0; border-radius: 4px;}
14         .tabnav li.active{color: #000; border: 1px solid #a4604d;background-color: #fff;}
15         .tabnav li:hover{cursor: pointer;}
16         .tabnav li:last-child{margin-right: 0px;}
17         .main{width: 800px;height:400px;}
18     </style>
19 </head>
20 <body>
21     <div class="demobox">
22         <div class="tabnav">
23             <ul id="tab">
24                 <li class="active">按天</li>
25                 <li>按月</li>
26                 <li>按年</li>
27                 <li>折线</li>
28             </ul>
29         </div>
30 
31         <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
32         <div id="main" class="main"></div>
33     </div>
34     <script type="text/javascript">
35         // 基于准备好的dom，初始化echarts实例
36         var myChart = echarts.init(document.getElementById('main'));
37 
38         var host = 'https://www.easy-mock.com/mock/5b06d6f072643c7a5c4edcb6/echarts';
39         //创建异步对象  
40         var xhr = new XMLHttpRequest();
41         function ajaxPost(url){
42             xhr.open('post',host+url,true);
43             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
44             xhr.send('');
45             xhr.onreadystatechange = function(){
46                 if( xhr.readyState==4 && xhr.status==200){
47                     
48                     var responseText = eval("("+xhr.responseText+")");
49                     //拿到数据后更新页面
50                     var option = responseText.data;
51                     console.log(option);
52                     myChart.clear(); // 清空画布
53                     myChart.setOption(option); // 使用指定的配置项和数据显示图表
54                 }
55             }            
56         }
57         ajaxPost('/day');
58 
59         // 为每个li标签循环绑定click事件
60         var oli=document.getElementById('tab').getElementsByTagName('li');//获取tab列表
61         for(var i=0 ; i<oli.length ; i++){
62             oli[i].index = i;//定义index变量，以便让tab按钮和tab内容相互对应
63             oli[i].onclick = function(){//移除全部tab样式和tab内容
64 
65                 var index = parseInt(this.index);
66 
67                 switch(index)
68                 {
69                     case 0:
70                         ajaxPost('/day');
71                     break;
72                     case 1:
73                         ajaxPost('/month');
74                     break;
75                     case 2:
76                         ajaxPost('/year');
77                     break;
78                     case 3:
79                         ajaxPost('/brokenLine');
80                     break;
81                 }
82 
83 
84 
85                 for(var i =0; i < oli.length; i++){
86                     oli[i].className = '';
87                 }
88                 this.className = 'active';//为当前tab添加样式
89 
90                 
91             }
92         }
93        
94     </script>
95 </body>
96 </html>

View Code

效果如下图：

猜你喜欢