Echarts自定義圖形的方法參考
前言
在一個(gè)前端大屏項(xiàng)目中，有一個(gè)模塊使用到了自定義的，由三個(gè)面組成的偽3D柱形圖。在此處記錄一下，方便后續(xù)自定義的時(shí)候參考一下。涉及到了zrender里面的一些方法，還特意去zrender看了些示例和文檔。
1.自定義圖形最后的效果是這樣的：
圖形由三個(gè)面組成，需要定義三個(gè)形狀。用cubeleft,cubetop,cuberight來分別定義左側(cè)面，頂部面以及右側(cè)面。
2.注冊(cè)自定義的圖形
echarts官方文檔處：Documentation - Apache ECharts
我們需要定義一個(gè)這樣的類，然后再通過echarts來注冊(cè)這個(gè)類，后續(xù)就可以通過類名來使用了。
3.extendShape
// 繪制左側(cè)面
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function(ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c0 = [shape.x, shape.y]
const c1 = [shape.x - 13, shape.y - 13]
const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13]
const c3 = [xAxisPoint[0], xAxisPoint[1]]
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
}
})
// 繪制右側(cè)面
const CubeRight = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function(ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c1 = [shape.x, shape.y]
const c2 = [xAxisPoint[0], xAxisPoint[1]]
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
const c4 = [shape.x + 18, shape.y - 9]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
// 繪制頂面
const CubeTop = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function(ctx, shape) {
const c1 = [shape.x, shape.y]
const c2 = [shape.x + 18, shape.y - 9]
const c3 = [shape.x + 5, shape.y - 22]
const c4 = [shape.x - 13, shape.y - 13]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})這段代碼主要是看buildpath如何使用，zrender的官方文檔中，并沒有直接告訴這個(gè)方法的兩個(gè)參數(shù)是干什么用的，只給了一個(gè)示例，從這個(gè)示例中，可以知道這兩個(gè)參數(shù)具體怎么用。
示例網(wǎng)址：https://github.com/ecomfe/zrender/blob/master/test/pin.html
第一個(gè)參數(shù)是path，第二參數(shù)是shape。path可以理解為一個(gè)canvas中的繪制畫筆，可以設(shè)置路徑并且閉合路徑。
第二個(gè)參數(shù)在echarts中，是自定義的custom傳遞過來的，因此可以通過這個(gè)對(duì)象獲取到我們一個(gè)很熟悉的屬性 xAxisPoint。
繪制的兩個(gè)面中，只有左側(cè)和右側(cè)面需要有填充高度，頂部不需要，所以頂部的形狀就沒有使用xAxisPoint這個(gè)屬性。
這也是很好理解的，因?yàn)槲覀冏远x的偽圓柱體里面的填充物肯定是有一個(gè)高度的。填充多少根據(jù)我們的數(shù)據(jù)來知道，讓它看起來確實(shí)是被某種東西從底部開始增多填充了。
拿比較簡(jiǎn)單的頂部來舉例：
buildPath: function(ctx, shape) {
const c1 = [shape.x, shape.y]
const c2 = [shape.x + 18, shape.y - 9]
const c3 = [shape.x + 5, shape.y - 22]
const c4 = [shape.x - 13, shape.y - 13]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0],c4[1]).closePath()
}繪制的四邊形，其實(shí)就是四個(gè)頂點(diǎn)，我們只需要用moveTo來控制路徑就行，在最后那個(gè)點(diǎn)進(jìn)行閉合就行。偏移量是固定的值，可以根據(jù)情況自己去設(shè)置不同的值來扭曲這個(gè)四邊形。
其中c1是底部的頂點(diǎn)，c2是右側(cè)的頂點(diǎn)，c3是頂部的頂點(diǎn)，c4是右側(cè)的頂點(diǎn)。其他兩個(gè)面也是類似的。
4.使用echarts注冊(cè)這三個(gè)圖形
// 注冊(cè)三個(gè)面圖形
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)5.使用自定義的形狀
其他的數(shù)據(jù)都和正常使用echarts一樣，不同的地方在于series的配置。
series數(shù)組中，總共放置二個(gè)對(duì)象。第一個(gè)對(duì)象如下：
{
type: 'custom',
renderItem: function(params, api) {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'CubeLeft',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(47,102,192,.27)',
stroke: 'black'
},
z2: 999
}, {
type: 'CubeRight',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(59,128,226,.27)',
stroke: 'black'
},
z2: 999
}, {
type: 'CubeTop',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(72,156,221,.27)',
stroke: 'black'
},
z2: 999
}]
}
},
data: MAX
}最主要的還是renderItem里面的邏輯，這個(gè)方法返回一個(gè)對(duì)象，對(duì)象就是我們自定義的一個(gè)group組。renderItem可以返回的對(duì)象在文檔中都有說明：Documentation - Apache ECharts
我們定義的那三個(gè)面，需要把它看成一個(gè)整體，所以renderItem返回的是一個(gè)類型為group的對(duì)象，另外三個(gè)形狀作為children保存在數(shù)組中。
其中的shape參數(shù)，會(huì)在buildpath中使用到。
style中設(shè)置了它的填充顏色和邊框線顏色。然后使用z2定義這個(gè)echarts的顯示層級(jí)為最上級(jí)。如果不使用它，下面用于填充的會(huì)將其遮擋住。
這里也只是定義了第一個(gè)自定義的形狀，也就是最外層的那個(gè)偽3d柱體。第二個(gè)自定義形狀是要填充的形狀。
{
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
var color = new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 1,
color: "#FEFD53"
},
{
offset: 0,
color: "#f7c824"
}
]
);
return {
type: 'group',
children: [{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: color,
stroke: 'red'
}
}, {
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: color,
stroke: 'red'
}
}, {
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: color,
stroke: 'red'
}
}]
}
},
data: VALUE
}內(nèi)部填充的圖形，使用了一個(gè)線性漸變的顏色用來填充。邊框線使用紅色。與第一個(gè)不同的是，style里面的風(fēng)格，以及data使用的數(shù)據(jù)。這里的data使用value具體的數(shù)值。而外殼的圖形使用的數(shù)據(jù)是max最大值。這樣就會(huì)有一個(gè)漸變顏色填充的紅色邊框圖形，填充到了一個(gè)黑色邊框的柱體中。
這樣就自定義好了一個(gè)視覺上的3d柱體形狀的圖表了。
總結(jié)
到此這篇關(guān)于Echarts自定義圖形的文章就介紹到這了,更多相關(guān)Echarts自定義圖形內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了js在IE與FF之間的區(qū)別。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
本篇文章主要是對(duì)js數(shù)組去重的三種常用方法進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
微信小程序scroll-view實(shí)現(xiàn)字幕滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)字幕滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
javascript實(shí)現(xiàn)的平方米、畝、公頃單位換算小程序
這篇文章主要介紹了javascript實(shí)現(xiàn)的平方米、畝、公頃單位換算小程序,此代碼通過URL傳參的方式使用,也可以根據(jù)自己的需求做些改動(dòng),需要的朋友可以參考下2014-08-08
經(jīng)常使用的一些javascript方法，今天總結(jié)了一下，以便以后查詢，有需要的小伙伴可以參考下。2015-05-05
JS 實(shí)現(xiàn)Table相同行的單元格自動(dòng)合并示例代碼
Table相同行的單元格自動(dòng)合并，使用js來實(shí)現(xiàn)此效果，具體代碼下，感興趣的朋友可以參考下2013-08-08
大家都知道ElementUI是"餓了么"公司推出的基于Vue2.0的組件庫，這篇文章主要介紹了axios攔截器、ElementUI組件的使用方法,需要的朋友可以參考下2023-01-01
JavaScript實(shí)現(xiàn)雙向鏈表過程解析
這篇文章主要介紹了利用JavaScript實(shí)現(xiàn)雙向鏈表以及它的封裝和常用操作，文中的示例代碼講解詳細(xì)，對(duì)日常的學(xué)習(xí)和工作都有一定的價(jià)值，快來和小編一起學(xué)習(xí)吧2021-12-12
本篇文章主要介紹了javascript將url解析為json格式的兩種方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
JavaScript表格隔行變色和Tab標(biāo)簽頁特效示例【附j(luò)Query版】
這篇文章主要介紹了JavaScript表格隔行變色和Tab標(biāo)簽頁特效,結(jié)合實(shí)例形式分析了javascript元素遍歷、事件響應(yīng)相關(guān)操作技巧,并附帶jQuery對(duì)應(yīng)實(shí)現(xiàn)代碼供大家參考,需要的朋友可以參考下2019-07-07