參考文檔?https://www.jb51.net/article/221784.htm

注意實現版本

?代碼如下

<!-- 3D柱狀圖 --> <template><div id="bar" style="width:800px;height:800px"></div> </template><script> import * as echarts from 'echarts/core'; import { LegendComponent } from 'echarts/components'; import { CustomChart } from 'echarts/charts'; echarts.use([LegendComponent, CustomChart]); let colorList = ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'] export default {name: "Bar3D",data() {return {data: [],option: {},}},mounted() {this.data = [{ name: '京哈高速', value: 10 },{ name: '京哈高速1', value: 20 },{ name: '京哈高速2', value: 30 },{ name: '京哈高速3', value: 40 },{ name: '京哈高速4', value: 50 },{ name: '京哈高速5', value: 60 },{ name: '京哈高速6', value: 70 },{ name: '京哈高速7', value: 80 },{ name: '京哈高速8', value: 90 },{ name: '京哈高速9', value: 100 },{ name: '京哈高速10', value: 110 },{ name: '京哈高速11', value: 120 }];// 拼軸顯示和數據的數組let xAxisText = [];let dataList = [];this.data.forEach(item => {xAxisText.push(item.name);dataList.push(item.value)})// 從這里開始 創建自定義圖形 —— 長方體的正面let MyCubeRect = echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 180, // 長方體寬度zWidth: 8, // 陰影折角寬zHeight: 4 // 陰影折角高},buildPath: function (ctx, shape) {console.log(ctx, shape);const api = shape.api;const xAxisPoint = api.coord([shape.xValue, 0]);const p0 = [shape.x, shape.y];const p1 = [shape.x - shape.width / xAxisText.length, shape.y];const p4 = [shape.x + shape.width / xAxisText.length, shape.y];const p2 = [xAxisPoint[0] - shape.width / xAxisText.length, xAxisPoint[1]];const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];ctx.moveTo(p0[0], p0[1]); //0ctx.lineTo(p1[0], p1[1]); //1ctx.lineTo(p2[0], p2[1]); //2ctx.lineTo(p3[0], p3[1]); //3ctx.lineTo(p4[0], p4[1]); //4ctx.lineTo(p0[0], p0[1]); //0ctx.closePath();}})// 創建第二個自定義圖形 —— 長方體的上面和側面let MyCubeShadow = echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 180,zWidth: 8,zHeight: 4},buildPath: function (ctx, shape) {const api = shape.api;const xAxisPoint = api.coord([shape.xValue, 0]);// const p0 = [shape.x, shape.y];const p1 = [shape.x - shape.width / xAxisText.length, shape.y];const p4 = [shape.x + shape.width / xAxisText.length, shape.y];const p6 = [shape.x + shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];const p7 = [shape.x - shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];const p5 = [xAxisPoint[0] + shape.width / xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight];ctx.moveTo(p4[0], p4[1]); //4ctx.lineTo(p3[0], p3[1]); //3ctx.lineTo(p5[0], p5[1]); //5ctx.lineTo(p6[0], p6[1]); //6ctx.lineTo(p4[0], p4[1]); //4ctx.moveTo(p4[0], p4[1]); //4ctx.lineTo(p6[0], p6[1]); //6ctx.lineTo(p7[0], p7[1]); //7ctx.lineTo(p1[0], p1[1]); //1ctx.lineTo(p4[0], p4[1]); //4ctx.closePath();}});echarts.graphic.registerShape('MyCubeRect', MyCubeRect);echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);this.option = {color: ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'],title: {text: '驗算路線排行榜',left: 20,top: 20},legend: {show: true,top: 25},grid: {left: '3%',right: '4%',top: '15%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: xAxisText,// boundaryGap: true,interval: 0,axisLabel: {color: '#333',// 讓x軸文字方向為豎向// interval: 0,// formatter: function (value) {// return value.split('').join('\n')// }}},yAxis: {type: 'value'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},},series: [{name: '次數',type: 'custom',renderItem: (params, api) => {let location = api.coord([api.value(0), api.value(1)]);return {type: 'group',children: [{type: 'MyCubeRect',shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1]},style: {fill: colorList[params.dataIndex % colorList.length]}, // api.style()——繼承原本的樣式}, {type: 'MyCubeShadow',shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1]},style: {fill: colorList[params.dataIndex % colorList.length],text: '' // 繼承原本樣式的基礎上將label清空 如果不清空生成的圖上會顯示兩個重疊的label}}]}},// stack: '總量1',label: {show: true,position: 'top',color: '#333',formatter: `{c}次`,fontSize: 16,distance: 15},itemStyle: {color: (params) => {// 使每根柱子顏色都不一樣 return colorList[params.dataIndex % colorList.length]}},data: dataList}]}this.initEcharts();},methods: {initEcharts() {let myChart = echarts.init(document.getElementById('bar'))myChart.setOption(this.option)}} }</script>

?git地址?echarts集合git地址https://gitee.com/zhangjinhao/echarts

總結

以上是生活随笔為你收集整理的echarts实现平面3D柱状图的全部內容，希望文章能夠幫你解決所遇到的問題。

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