您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Echarts怎么自定義圖形”,感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Echarts怎么自定義圖形”吧!
圖形由三個(gè)面組成,需要定義三個(gè)形狀。用cubeleft,cubetop,cuberight來分別定義左側(cè)面,頂部面以及右側(cè)面。
echarts官方文檔處:Documentation - Apache ECharts
我們需要定義一個(gè)這樣的類,然后再通過echarts來注冊(cè)這個(gè)類,后續(xù)就可以通過類名來使用了。
// 繪制左側(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ù)具體怎么用。
第一個(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è)面也是類似的。
// 注冊(cè)三個(gè)面圖形 echarts.graphic.registerShape('CubeLeft', CubeLeft) echarts.graphic.registerShape('CubeRight', CubeRight) echarts.graphic.registerShape('CubeTop', CubeTop)
其他的數(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柱體形狀的圖表了。
到此,相信大家對(duì)“Echarts怎么自定義圖形”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。