1. 程式人生 > >Echarts入門教程、使用總結(一)

Echarts入門教程、使用總結(一)

最近公司在做一個mes專案需要用到圖表來做一個看板

在echarts和highcharts中我選擇了echarts   他們的關係就像是wps和office的區別吧  但是echarts在近年來做的越來與好了 

在其中遇到一些小問題 寫下來以便於以後使用

1.toolbox不顯示,  calculable : true功能沒用

在剛開始熟悉這個外掛時,打算從例項出發  發現做出來的效果總是與例項不同 缺少toolbox, calculable : true功能沒用

這都是因為下載的js檔案為echarts3.0的  而例項使用的是echarts2.0版本導致的,再改為echarts2.0.js後  實現了所有功能

2.div佈局問題

在看板中會有許多的表格這就要求div佈局使其位置自動並排  div預設屬性是自動換行的

div{
     float:left
}

這樣使得div自動靠左

需要換行時  可以加<br/>

3.echarts表格載入

在option中設定好echarts所需的屬性,下載要載入的主題js檔案複製到工程中     以下customed為主題名稱

var myChart2 = echarts.init(document.getElementById('right'),'customed');

4.echarts自定義主題

因為專案需要以黑底白字的形式展現表格  所以官方提供的主題不足以滿足以下條件

在echarts3.0中   提供了自定義主題的功能  點選開啟連結  在裡面可以修改各種樣式顏色以滿足各種需要 

5.專案結構優化

在載入一系列表格之後,整個html檔案佈局顯得十分混亂

可以將div佈局單獨放在html檔案中   options的設定封裝為函式在其他js檔案中  進行對應的呼叫