?renderItem函數

開發者使用自定義的圖形元素渲染，是通過 renderItem函數實現的。

series: [{type: 'custom',renderItem: function (params, api) {// ...},data: data}]

渲染data數組中的每一項數據時都會調用renderItem函數，而后函數就返回一個（或者一組）圖形元素定義，echarts會根據這些圖形元素定義渲染出圖形元素。

若想要使用該函數直接繪制圖形，則在函數內return 構建dataItem的圖形元素定義。例如：

// 這里返回為這個 dataItem 構建的圖形元素定義。return rectShape && {// 表示這個圖形元素是矩形。還可以是 'circle', 'sector', 'polygon' 等等。type: 'rect',shape: rectShape,// 用 api.style(...) 得到默認的樣式設置。這個樣式設置包含了// option 中 itemStyle 的配置和視覺映射得到的顏色。style: api.style()};

但是,自定義還用echarts內置的屬性還是有些限制啊！需要實現的效果并不是很隨心(→_→)。

所以我們可以利用?renderItem?提供的參數api 獲取到dataItem要顯示的位置(及坐標[x，y]),將自定好的效果直接定位上，豈不是效果更隨心些(←_→)

下面我們來看看renderItem為我們提供的兩個參數：params、api

??params

該參數包含了當前數據信息和坐標系的信息。

actionType: null context: {} coordSys: {type: 'geo', x: 126, y: 18.35, width: 15038655.192776125, height: 7087856.39616931, …} dataIndex: 0 dataIndexInside: 0 dataInsideLength: 1 encode: {lng: Array(1), lat: Array(1)} seriesId: "\u0000自定義\u00000" seriesIndex: 2 //在series數組內的索引 seriesName: "自定義"

api

是一些開發者可調用的方法集合。

?value?：得到給定維度的數據值。

coord:將數據值映射到坐標系上。

renderItem: (params, api) => {if (!this.customApi) {this.customApi = api}}, var coord = this.customApi.coord([dataItem.value, index])

（可通過全局屬性將api方法集 提取出來，再自定義時調用獲取坐標即可）?

獲取到位置信息，即可將自定義效果定位到需求位置實現Echarts組件之外的效果。

總結

以上是生活随笔為你收集整理的Echarts可视化 之custom自定义系列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。