echarts 數據統計報表

官網   http://echarts.baidu.com/index.html

 

 

1. 我們下載好開發包后就可以開始了，第一步引入開發包，和需要的主題文件（可定義自己的主體文件），並定義好頁面布局。2.0以后上的版本，需要把開發包放到body下，否則ie低版本會出現屬性未找到的錯誤，導致圖標初始化失敗。

   
2.  

   第二步，普通初始化圖表，通過調用開發包方法，有兩種初始化方式，

   1.var myChart = echarts.init(document.getElementById("echart"));

   2.var myChart=require('echarts').init(document.getElementById("echart"));

   一般建議使用第一種方法進行初始化操作。

   

   
3.  

   第三步，設置option屬性，來給圖表設置數據,option是數組元素，tooltip：提示框，legend圖例，calculable可設置是否拖拽，series設置數據（data類型也為數組類型），我們開始先隨機初始化幾條模擬數據，

   

   
4.  

   到這一步，就完成了，圖表初始化的步驟，效果如下圖所示。然后大家是不是想我們可以改變下圖標的樣式？答案是可以的，2.0版本為我們留了設置主題的方法，可設置setThem()對圖表樣式進行修改

   
5.  

   我們來看看，主題怎么配置吧，設置色版，設置主題顏色，不一一介紹了，請大家請看下面代碼：

   

   

   

   
6. 6

   通過上面主題的添加我們就完成了對樣式的修改，當然最后大家記嘚設置myChart.setTheme(theme);