ECharts各类炫酷图表/3D柱形图

一、前言

最近鸡米花实现了各类的炫酷的图表，有3D柱形图、双边柱形图以及异形柱形图，好了，直接上图：

二、效果图

一个个来吧，下面就是代码啦，注意，一下图表展示的宽高均为800px*300px

三、异形横向柱形图

<template><div class="charts" ref="charts"></div>
</template><script>
import * as echarts from "echarts";
export default {mounted() {let myChart = echarts.init(this.$refs.charts);let richData = {height: 35,width: 60,color: "#fff",align: "center",};let data = [4, 13, 25, 29, 38];var option = {backgroundColor: "#061E42",grid: {left: 40,top: "0%",right: 20,bottom: "0%",containLabel: true,},xAxis: [{show: false,},],yAxis: [{axisTick: "none",axisLine: "none",offset: "15",axisLabel: {textStyle: {color: "#ffffff",fontSize: "16",},},data: ["衢州市", "温州市", "绍兴市", "台州市", "金华市"],},{axisTick: "none",axisLine: "none",axisLabel: {textStyle: {color: "#ffffff",fontSize: "12",fontWeight: "bold",},},data: ["  114   16.12%","  30    14.25%","  123   13.15%","  102   26.12%","  10       6.12%",].reverse(),},{nameGap: "50",nameTextStyle: {color: "#ffffff",fontSize: "16",},axisLine: {lineStyle: {color: "rgba(0,0,0,0)",},},data: [],},],series: [{name: "条",type: "bar",yAxisIndex: 0,data,barWidth: 12,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1,0,0,0,[{offset: 0,color: "#76D8FD",},{offset: 1,color: "#025389",},]),},},z: 4,},{name: "背景色",type: "bar",yAxisIndex: 1,barGap: "-100%",data: [99.5, 99.5, 99.5, 99.5, 99.5],barWidth: 12,itemStyle: {color: "#064976",},z: 1,},{name: "背景三角",type: "scatter",hoverAnimation: false,data: [99.5, 99.5, 99.5, 99.5, 99.5],symbol: "triangle",yAxisIndex: 2,symbolSize: 12,symbolRotate: 180,itemStyle: {normal: {color: "#064976",opacity: 1,},},z: 2,},{name: "底部三角",type: "scatter",hoverAnimation: false,data,symbol: "triangle",yAxisIndex: 2,symbolSize: 12,symbolRotate: 180,itemStyle: {normal: {color: "#76D8FD",opacity: 1,},},z: 4,},{name: "底部白色斜杠",type: "scatter",hoverAnimation: false,data,yAxisIndex: 2,symbolSize: [12, 16],symbolKeepAspect: true,symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALkAAADTCAYAAADdwrJgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuYTFjZDEyZiwgMjAyNC8xMS8xMS0xOTowODo0NiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI2LjIgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNS0wMy0wN1QxNDo1MjowNSswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjUtMDMtMDdUMTQ6NTQ6MzErMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjUtMDMtMDdUMTQ6NTQ6MzErMDg6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmNiMjYxYjRlLWE2OWItMjE0NS04ZTI5LTgxNmM5NWMyYzRjNiIgeG1wTU06RG9jdW1lbnRJRD0i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",symbolOffset: [5, 0],itemStyle: {normal: {color: "#76D8FD",opacity: 1,},},z: 4,},{name: "底部深色背影斜杠",type: "scatter",hoverAnimation: false,data,yAxisIndex: 2,symbolSize: [10, 12],symbolKeepAspect: true,symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADNCAYAAADqt6/kAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuYTFjZDEyZiwgMjAyNC8xMS8xMS0xOTowODo0NiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI2LjIgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNS0wMy0wN1QxNTowNDoxMSswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjUtMDMtMDdUMTU6MDY6MDArMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjUtMDMtMDdUMTU6MDY6MDArMDg6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmQxOTgzODE4LWY0ZDUtYzY0Ni1iZDI3LTk2ZDkyNGRhNzMzYSIgeG1wTU06RG9jdW1lbnRJRD0i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",symbolOffset: [9, 0],itemStyle: {normal: {color: "#76D8FD",opacity: 1,},},z: 3,},{name: "头部三角",type: "scatter",hoverAnimation: false,data: [0, 0, 0, 0, 0],symbol: "triangle",yAxisIndex: 2,symbolSize: 12,itemStyle: {normal: {color: "#025389",opacity: 1,},},z: 4,},// 以下为斜杠代码{name: "头部三角",type: "scatter",hoverAnimation: false,data: [0, 0, 0, 0, 0],symbol: "triangle",yAxisIndex: 2,symbolSize: 20,itemStyle: {normal: {color: "#061E42",opacity: 1,},},symbolOffset: [-2, 0],z: 3,},{name: "头部三角",type: "scatter",hoverAnimation: false,data: [0, 0, 0, 0, 0],symbol: "rect",yAxisIndex: 2,symbolSize: 12,itemStyle: {normal: {color: "#fff",opacity: 1,},},z: 2,symbolOffset: [-7, 0],},{name: "头部三角",type: "scatter",hoverAnimation: false,data: [0, 0, 0, 0, 0],symbol: "triangle",yAxisIndex: 2,symbolSize: 12,symbolRotate: 180,itemStyle: {normal: {color: "#061E42",opacity: 1,},},z: 3,symbolOffset: [-13, 0],},],};myChart.setOption(option);},
};
</script><style scoped>
.charts {width: 100%;height: 100%;
}
</style>

四、双边横向柱形图

<template><div class="charts" ref="charts"></div>
</template><script>
import * as echarts from "echarts";
export default {mounted() {let myChart = echarts.init(this.$refs.charts);var myData = [{value: "100岁以上",textStyle: {fontSize: 12,align: "center",},},{value: "60岁以上",textStyle: {fontSize: 12,align: "center",},},{value: "35~59",textStyle: {fontSize: 12,align: "center",},},{value: "18~34",textStyle: {fontSize: 12,align: "center",},},{value: "7~17",textStyle: {fontSize: 12,align: "center",},},{value: "学龄前",textStyle: {fontSize: 12,align: "center",},},];var databeast = [200, 259, 262, 324, 232, 176];var databeauty = [121, 368, 233, 309, 133, 308];let max = Math.max(...databeast, ...databeauty);max = Math.ceil(max / 100) * 100;var width = 320; //根据盒子宽度 计算两边数值的距离，比如说这里是800的盒子，宽度就是800/2左右var maxList = databeast.map((item) => max);var option = {backgroundColor: "#061E42",grid: [{show: false,left: 50,top: 28,bottom: 15,containLabel: true,width: "35%", //如果挡住中间的文字了，适当将宽度调小，同时上面的width=400也要调整一下},{show: false,left: "51%", //调整中间文字的位置top: 28,bottom: 15,width: "0%",},{show: false,right: 50,top: 28,bottom: 15,containLabel: true,width: "35%",},],xAxis: [{type: "value",inverse: true,max: max,axisLine: {show: true,},axisTick: {show: false,},position: "top",name: "女",nameTextStyle: {color: "rgba(255, 255, 255, 1)",fontWeight: "bold",align: "right",verticalAlign: "bottom",lineHeight: 20,padding: [0, 15],},nameLocation: "start",axisLabel: {show: false,},splitLine: {show: true,lineStyle: {color: "#666",type: "dashed",},},},{gridIndex: 1,show: false,},{gridIndex: 2,max: max,type: "value",name: "男",nameLocation: "start",nameTextStyle: {color: "rgba(255, 255, 255, 1)",fontWeight: "bold",align: "left",verticalAlign: "bottom",lineHeight: 20,padding: [0, 15],},axisLine: {show: true,},axisTick: {show: false,},position: "top",axisLabel: {show: false,},splitLine: {show: true,lineStyle: {color: "#666",type: "dashed",},},},],yAxis: [{type: "category",inverse: true,position: "right",axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,margin: 8,textStyle: {color: "#fff",fontSize: 12,},},data: myData,},{gridIndex: 1,type: "category",inverse: true,position: "left",axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: true,textStyle: {color: "#fff",fontSize: 12,},},data: myData,},{gridIndex: 2,type: "category",inverse: true,position: "left",axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,textStyle: {color: "#9D9EA0",fontSize: 12,},},data: myData,},],series: [{name: "帅哥",type: "bar",barWidth: 14,label: {show: true,offset: [-width, 0],position: "right",fontWeight: "bold",color: "#fff",},itemStyle: {show: true,color: "#FC8404",label: {show: true,position: [-40, 5],formatter: function (v) {return v.value * -1;},},},data: databeast,},{name: "背景",type: "bar",barWidth: 18,barGap: "-100%",data: maxList,itemStyle: {color: "#393237",shadowColor: "#393237",shadowOffsetX: 0,shadowOffsetY: -3,},z: 1,emphasis: {disabled: true,},},{name: "女性三角",type: "scatter",hoverAnimation: false,data: databeast,symbol: "triangle",symbolSize: [14, 10],symbolRotate: 90,symbolOffset: [-7, -2],itemStyle: {color: "#FC8404",opacity: 1,},z: 3,emphasis: {disabled: true,},},{name: "男性三角",type: "scatter",hoverAnimation: false,data: databeauty,symbol: "triangle",xAxisIndex: 2,yAxisIndex: 2,symbolSize: 12,symbolSize: [14, 10],symbolOffset: [7, -2],symbolRotate: 270,clip: false,itemStyle: {color: "#01DDF7",opacity: 1,},z: 3,emphasis: {disabled: true,},},{name: "美女",type: "bar",barWidth: 14,xAxisIndex: 2,yAxisIndex: 2,label: {show: true,offset: [width, 0],position: "left",fontWeight: "bold",color: "#fff",},itemStyle: {show: true,color: "#01DDF7",},data: databeauty,},{name: "背景",type: "bar",barWidth: 18,barGap: "-100%",data: maxList,xAxisIndex: 2,yAxisIndex: 2,itemStyle: {color: "#064668",shadowColor: "#064668",shadowOffsetX: 0,shadowOffsetY: -3,},z: 1,emphasis: {disabled: true,},},],};myChart.setOption(option);},
};
</script><style scoped>
.charts {width: 100%;height: 100%;
}
</style>

五、3D横向柱形图

<template><div style="width: 100%; height: 100%" ref="chartDom"></div>
</template><script>
import * as echarts from "echarts";
export default {mounted() {this.initChart();},methods: {initChart() {let myChart = echarts.init(this.$refs.chartDom);let width = 12; //柱形图的单面的宽度，这里单面宽度为12，则柱形图实际宽度为24let diamondAngl = 9; //0为0度 数值越大角度越大const CubeLeft = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const xAxisPoint = shape.xAxisPoint;const c0 = [shape.x - diamondAngl, shape.y];const c1 = [shape.x, shape.y - width];const c2 = [xAxisPoint[0] + 5, xAxisPoint[1] - width];const c3 = [xAxisPoint[0] + 1, xAxisPoint[1]];ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();},});const CubeRight = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const xAxisPoint = shape.xAxisPoint;const c1 = [shape.x, shape.y + width];const c2 = [xAxisPoint[0] + 5, xAxisPoint[1] + width];const c3 = [xAxisPoint[0] + 1, xAxisPoint[1] + 0.05];const c4 = [shape.x - diamondAngl, shape.y + 0.05];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 - diamondAngl, shape.y];const c2 = [shape.x, shape.y + width];const c3 = [shape.x + diamondAngl, shape.y - 0.05];const c4 = [shape.x, shape.y - width + 0.05];ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();},});echarts.graphic.registerShape("CubeLeft", CubeLeft);echarts.graphic.registerShape("CubeRight", CubeRight);echarts.graphic.registerShape("CubeTop", CubeTop);const VALUE = [13, 25, 18, 19, 34, 24];let fill = new echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0,color: "#37C5F6",},{offset: 0.9,color: "#0B1B3E",},{offset: 1,color: "rgba(6,23,53,0.2)",},]);var option = {backgroundColor: "#010d3a",grid: {left: 10,right: 30,bottom: 5,top: 5,containLabel: true,},xAxis: {type: "value",axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: false,},},yAxis: {type: "category",data: ["测试1","测试2","测试3","测试4","测试5","测试6",],axisLine: {show: true,lineStyle: {color: "#113B5E",},},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {fontSize: 12,color: "#C3EAFF",},splitLine: {show: false,},},series: [{type: "custom",renderItem: (params, api) => {const location = api.coord([api.value(0),api.value(1),]);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([0,api.value(1),]),},style: {fill: fill,},},{type: "CubeRight",shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([0,api.value(1),]),},style: {fill: fill,},},{type: "CubeTop",shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0),api.value(0),]),},style: {fill: new echarts.graphic.LinearGradient(1,0,0,0,[{offset: 0,color: "#fff",},{offset: 1,color: "#4CD2FF",},]),},},],};},data: VALUE,},{type: "bar",label: {show: true,position: "right",fontSize: 12,color: "#4DA6FF",offset: [10, 1],},itemStyle: {color: "transparent",},data: VALUE,},],};option && myChart.setOption(option);},},
};
</script>

六、3D垂直柱形图

<template><div style="width: 100%; height: 100%" ref="chartDom"></div>
</template><script>
import * as echarts from "echarts";
export default {mounted() {this.initChart();},methods: {initChart() {let myChart = echarts.init(this.$refs.chartDom);const CubeLeft = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const xAxisPoint = shape.xAxisPoint;const c0 = [shape.x - 9, shape.y - 3];const c1 = [shape.x + 9, shape.y - 3];const c2 = [xAxisPoint[0] + 9, xAxisPoint[1]];const c3 = [xAxisPoint[0] - 9, xAxisPoint[1]];ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();},});const CubeRight = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const xAxisPoint = shape.xAxisPoint;const c1 = [shape.x + 9, shape.y - 3];const c2 = [xAxisPoint[0] + 9, xAxisPoint[1]];const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 6];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 - 9, shape.y - 3];const c2 = [shape.x + 9, shape.y - 3];const c3 = [shape.x + 18, shape.y - 9];const c4 = [shape.x, 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();},});echarts.graphic.registerShape("CubeLeft", CubeLeft);echarts.graphic.registerShape("CubeRight", CubeRight);echarts.graphic.registerShape("CubeTop", CubeTop);const VALUE = [2012, 1230, 3790, 2349, 1654, 1230];let fill = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#367EEF",},{offset: 0.5,color: "#12A8C1",},{offset: 1,color: "rgba(6,23,53,0.2)",},]);var option = {backgroundColor: "#010d3a",grid: {left: 20,right: 20,bottom: 10,top: 20,containLabel: true,},xAxis: {type: "category",data: ["2019", "2020", "2021", "2022", "2023", "2024"],axisLine: {show: true,lineStyle: {color: "#4E7AA0",},},offset: 0,axisTick: {show: false,},axisLabel: {fontSize: 10,color: "#92A0BD",},},yAxis: {type: "value",axisLine: {show: true,lineStyle: {color: "#4E7AA0",},},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {fontSize: 10,color: "#92A0BD",},boundaryGap: ["20%", "20%"],},series: [{type: "custom",renderItem: (params, api) => {const location = api.coord([api.value(0),api.value(1),]);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: fill,},},{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: fill,},},{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: "#A8DBE5",},},],};},data: VALUE,},{type: "bar",label: {normal: {show: true,position: "top",fontSize: 10,color: "#3679BF",offset: [4, -25],},},itemStyle: {color: "transparent",},data: VALUE,},],};option && myChart.setOption(option);},},
};
</script>

七、象形柱形图

<template><div class="charts" ref="charts"></div>
</template><script>
import * as echarts from "echarts";
export default {mounted() {let myChart = echarts.init(this.$refs.charts);var option = {backgroundColor: "#061E42",grid: {left: "50",top: "20",right: "10",bottom: "30",},tooltip: {position: "top",},xAxis: {type: "category",data: ["1月", "2月", "3月", "4月", "5月", "6月"],axisLabel: {show: true,color: "#5A7FB3",fontSize: 12,},axisTick: {show: false,},axisLine: {show: true,lineStyle: {color: "#5A7FB3",},},splitLine: {show: false,},},yAxis: {type: "value",axisLabel: {show: true,color: "#5A7FB3",fontSize: 12,},axisTick: {show: false,},axisLine: {show: true,lineStyle: {color: "#5A7FB3",},},splitLine: {show: false,},},series: [{name: "1月",data: [0, 0, 0, 0, 0, 0, 0],stack: "a",type: "bar",},{name: "1月",data: [0, 0, 0, 0, 0, 0, 0],stack: "a",type: "bar",},{name: "2月",data: [0, 0, 0, 0, 0, 0, 0],stack: "a",type: "bar",},{name: "3月",data: [0, 0, 0, 0, 0, 0, 0],stack: "a",type: "bar",},{name: "4月",data: [0, 0, 0, 0, 0, 0, 0],stack: "a",type: "bar",},{name: "5月",data: [0, 0, 0, 0, 0, 0, 0],stack: "a",type: "bar",},{name: "6月",data: [0, 0, 0, 0, 0, 0, 0],stack: "a",type: "bar",},{type: "pictorialBar",label: {show: true,position: "top",color: "#A6CCFF",fontSize: 10,},itemStyle: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "#23EA5A",},{offset: 1,color: "rgba(59,113,215,0.2)",},],global: false,},},data: [2000, 3209, 4328, 3409, 5677, 3562],stack: "a",barCategoryGap: "-100%",symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",},],};myChart.setOption(option);},
};
</script><style scoped>
.charts {background-color: #fff;width: 100%;height: 100%;
}
</style>