使用echarts實現圖表項目的注意點

本篇文章給大家帶來的內容是關於使用echarts實現圖表項目的注意點，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

最近一段時間做了一個使用echarts的圖表項目。由於理解API能力有限，使用起來並非暢通無阻。
所謂好記性不如爛筆頭，現將一些比較關鍵的點記錄一下，供後續查看。

一 使用方法

項目：ionic+angular4+echarts

    1.由於打包原因，echarts不能直接引入進package.json的dependencies中，只能以原始的方式從index.html中引入    <script src="assets/js/echarts.min.js"></script>    2.在組件的.html檔案中    <div echarts [options]="pieOption" (chartClick)="jump2Detail($event)"></div>    3.在組件的.ts檔案中配置好options的值pieOption以及點擊drill down的邏輯

二 注意點

1.每一塊渲染地區都有一個position的設定，可以自訂離上、下、左、右的距離

    grid:{        top:...        left:...        bottom:...        right:...    }        legend:{        top:...        left:...        ...    }

2.每一個涉及值的顯示點基本都提供了formatter

tooltip:{        formatter: params => { //自訂hover狀態資料顯示的情況            let str = '';            str += `<h6 style="color:#fff;font-size:13px;margin:4px 0">${params[0].name}</h6>`;            params.forEach(item => {                str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}<br>`;                //item中提供了表徵圖、顏色等            });            return str;        }    }        legend:{        formatter: (name) => { //需要根據值去重算資料然後顯示的情況            let source = data.source[name.toUpperCase()];            var total = 0;            source.forEach(element => {                total += element;            });            return name + ': ' + Math.round(total).toLocaleString();        }    }

3.xAxis/yAxis 配置座標軸的一些屬性 刻度、座標軸名稱、如何顯示座標資訊

4.toolbox 工具列，內建有匯出圖片、資料檢視、動態類型切換、資料區域縮放、重設5個工具
其中匯出圖片可以自己通過canvas的相關API 將多個圖表一併導

5.dataZoom 資料區域縮放組件 -- 可以一個也可以多個

dataZoom:[    {        type:'inside', //內建在座標系中 通過滑鼠滾輪或者手指touch進行處罰        ...    },    {        type:'slider', //在外部 顯示為滑動條形的一個組件，可直接拖動使用        ...    }]

6.series 系列列表，每個系列通過type決定圖表類型 --根據不同的圖表注入不同格式的資料

series:{    type:'line'/'pie'/'bar'/'treemap',    ...}

其實細分到每一個圖表都有一些細微的設定，資料以及顏色、間距等，待續...