Echarts入門教程、使用總結(一)
阿新 • • 發佈:2019-01-07
最近公司在做一個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檔案中 進行對應的呼叫