目錄

一、準(zhǔn)備工作

1.下載引入ECharts庫

2.創(chuàng)建容器

二、繪制基本柱狀

三、繪制立體柱狀方法一

1.定義立方體形狀

2.注冊立方體形狀

3.配置custom系列

4.設(shè)置數(shù)據(jù)

5.渲染圖表

四、繪制立體柱狀方法二

1.畫前知識

2.計算坐標(biāo)renderItem?函數(shù)

（1）type: "custom"

（2）renderItem?函數(shù)

（3）坐標(biāo)轉(zhuǎn)換

（4）自定義圖形

（5）多邊形polygon

（6）繪制點形成圖形

---

一、準(zhǔn)備工作

1.下載引入ECharts庫

npm install echarts

import * as echarts from "echarts";

2.創(chuàng)建容器

在HTML中創(chuàng)建一個用于容納圖表的容器，例如一個div元素。

<div id="barchart"></div>

二、繪制基本柱狀

繪制基本柱狀圖，樣式修改成想要的。

xAxis?對象定義了 X 軸的配置，包括軸標(biāo)簽（axisLabel）、軸線（axisLine）、軸刻度（axisTick）等。這里設(shè)置了標(biāo)簽顏色、標(biāo)簽旋轉(zhuǎn)角度、軸線顏色，并隱藏了軸刻度。

yAxis?對象定義了 Y 軸的配置，與 X 軸類似，包括軸標(biāo)簽、軸線、軸刻度以及分割線（splitLine）的配置。

直接上代碼：

mounted() {this.getbarchart();
},  

 getbarchart() {let barchartDom = document.getElementById("barchart");this.barchart = echarts.init(barchartDom);let option = {color: ["#3398DB"],xAxis: {data: ["兩卡人員","前科人員","地方摸排","機場攔截","邊境攔截","限制出境","緬北人員"],axisLabel: {color: "#8CBAEE",rotate: -60},axisLine: {lineStyle: {color: "#8CBAEE"}},axisTick: {show: false}},yAxis: {axisLabel: {color: "#8CBAEE"},axisLine: {lineStyle: {color: "#8CBAEE"}},axisTick: {show: false},splitLine: {lineStyle: {color: "#0B0842"}}},// 基礎(chǔ)柱狀圖series: [{type: 'bar',// type: 'custom',barWidth: "30%",data: [120, 100, 199, 311, 400, 238, 140],itemStyle: {// 設(shè)置漸變色color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#387BFE' },{ offset: 1, color: '#7CB1FD' }])},},]};option && this.barchart.setOption(option);},

三、繪制立體柱狀方法一

使用echarts.graphic.extendShape|registerShape大概步驟如下：

1.定義立方體形狀

使用echarts.graphic.extendShape方法來定義一個新的立方體形狀。在這個方法中，傳入一個對象，該對象包含shape屬性和buildPath方法。shape屬性用于定義立方體的形狀屬性（如坐標(biāo)、大小等），而buildPath方法則用于定義繪制立方體路徑的邏輯。

2.注冊立方體形狀

使用echarts.graphic.registerShape方法來注冊你定義的立方體形狀，就可以在custom系列中使用這個形狀了。

3.配置custom系列

在ECharts的配置項中，添加一個custom系列的配置。在renderItem函數(shù)中，你可以使用你注冊的立方體形狀來繪制每個數(shù)據(jù)項對應(yīng)的立方體。

4.設(shè)置數(shù)據(jù)

為custom系列設(shè)置數(shù)據(jù)，每個數(shù)據(jù)項將對應(yīng)一個立方體。

5.渲染圖表

調(diào)用ECharts實例的setOption方法來應(yīng)用配置，并渲染圖表。

我覺得這位大大寫的很nice，可參考博客：03-echarts如何畫立體柱狀圖_echarts立體柱狀圖-CSDN博客

四、繪制立體柱狀方法二

自定義type: "custom"及多邊形polygon

1.畫前知識

可查看博客第二部分：03-echarts如何畫立體柱狀圖_echarts立體柱狀圖-CSDN博客

2.計算坐標(biāo)renderItem?函數(shù)

（1）type: "custom"

因為我們要自定義形狀，所以用type: 'bar'已不合適，用custom自定義系列

（2）renderItem?函數(shù)

renderItem?是一個函數(shù)，它接收兩個參數(shù)：params?和?api。

params: 通常包含當(dāng)前渲染的數(shù)據(jù)項的信息，但在自定義系列中，它的使用可能不頻繁。

api: 提供了一系列的方法和屬性，用于訪問當(dāng)前數(shù)據(jù)點的信息、坐標(biāo)轉(zhuǎn)換、繪制圖形等。

（3）坐標(biāo)轉(zhuǎn)換

使用api.coord方法將當(dāng)前數(shù)據(jù)點的數(shù)值坐標(biāo)轉(zhuǎn)換為屏幕坐標(biāo)

api.value(0)通常是X軸的值

api.value(1)是Y軸的值

api.coord([api.value(0), 0])[1]; 獲取Y軸為0時的屏幕坐標(biāo)（即X軸上的點），用于繪制圖形的底部。

（4）自定義圖形

返回一個對象，指定了要渲染的圖形類型type: "group"和子元素children。type: "group": 表示這是一個圖形組，可以包含多個子圖形。children: 是一個數(shù)組，包含了要渲染的子圖形多邊形polygon。

（5）多邊形polygon

type: "polygon": 指定這是一個多邊形。

shape: 定義了多邊形的形狀，通過points數(shù)組給出多邊形的頂點坐標(biāo)。頂點坐標(biāo)是通過之前計算的屏幕坐標(biāo)加減一些偏移量來確定的。

style: 定義了多邊形的樣式。fill: 使用線性漸變填充多邊形。new echarts.graphic.LinearGradient(...)創(chuàng)建了一個線性漸變對象，指定了漸變的方向、起始顏色和結(jié)束顏色。

（6）繪制點形成圖形

左側(cè)：

左上點: [基礎(chǔ)X軸坐標(biāo)點-側(cè)面寬度，頂部Y軸坐標(biāo)點-斜角高度]

左下點：[基礎(chǔ)X軸坐標(biāo)點-側(cè)面寬度，底部Y軸坐標(biāo)點]

右下點：[基礎(chǔ)X軸坐標(biāo)點，底部Y軸坐標(biāo)點]

右下點：[基礎(chǔ)X軸坐標(biāo)點，頂部Y軸坐標(biāo)點]

右側(cè)：

左上點: [基礎(chǔ)X軸坐標(biāo)點，頂部Y軸坐標(biāo)點]

左下點：[基礎(chǔ)X軸坐標(biāo)點，底部Y軸坐標(biāo)點]

右下點：[基礎(chǔ)X軸坐標(biāo)點 +側(cè)面寬度 ，底部Y軸坐標(biāo)點]

右下點：[基礎(chǔ)X軸坐標(biāo)點 +側(cè)面寬度，頂部Y軸坐標(biāo)點 - 斜角高度]

頂部菱形：

中下點: [基礎(chǔ)X軸坐標(biāo)點，頂部Y軸坐標(biāo)點]

右點：[基礎(chǔ)X軸坐標(biāo)點+側(cè)面寬度，頂部Y軸坐標(biāo)點- 斜角高度]

中上點：[基礎(chǔ)X軸坐標(biāo)點 ，頂部Y軸坐標(biāo)點- 斜角高度*2]

左點：[基礎(chǔ)X軸坐標(biāo)點 -側(cè)面寬度，頂部Y軸坐標(biāo)點 - 斜角高度]

完成代碼如下：

        getbarchart() {let barchartDom = document.getElementById("barchart");this.barchart = echarts.init(barchartDom);let option = {color: ["#3398DB"],xAxis: {data: ["兩卡人員","前科人員","地方摸排","機場攔截","邊境攔截","緬北人員"],axisLabel: {color: "#8CBAEE",rotate: -60},axisLine: {lineStyle: {color: "#8CBAEE"}},axisTick: {show: false}},yAxis: {axisLabel: {color: "#8CBAEE"},axisLine: {lineStyle: {color: "#8CBAEE"}},axisTick: {show: false},splitLine: {lineStyle: {color: "#0B0842"}}},// 立方體柱狀series: [{type: "custom",data: [120, 24, 90, 311, 400, 238, 100],renderItem: (params, api) => {const basicsCoord = api.coord([api.value(0), api.value(1)]);const topBasicsYAxis = basicsCoord[1];const basicsXAxis = basicsCoord[0];const bottomYAxis = api.coord([api.value(0), 0])[1];return {type: "group",children: [// 左側(cè){type: "polygon",shape: { points: [[basicsXAxis-10, topBasicsYAxis-4], [basicsXAxis-10, bottomYAxis], [basicsXAxis, bottomYAxis], [basicsXAxis, topBasicsYAxis]]},style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#387BFE' },{ offset: 1, color: '#7CB1FD' }])}},// 右側(cè){type: "polygon",shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis, bottomYAxis],[basicsXAxis+10, bottomYAxis],[basicsXAxis+10, topBasicsYAxis-4]]},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#387BFE' },{ offset: 1, color: '#7CB1FD' }])}},// 頂部{type: "polygon",shape: {points: [[basicsXAxis, topBasicsYAxis],[basicsXAxis-10, topBasicsYAxis - 4],[basicsXAxis, topBasicsYAxis - 8],[basicsXAxis+10, topBasicsYAxis - 4]]},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#387BFE' },{ offset: 1, color: '#7CB1FD' }])}}]};}}]};option && this.barchart.setOption(option);},

若文章對你有幫助，點個贊吧！