vue3+echarts 绘制3d圆柱形图

今天得到了这样一个需求，用echarts绘制一个圆柱形图，如下图

经过度娘指导发现了一遍类似博客
剩下的就不难了，按照这个思路去修改实现就可以了，废话少说上代码

option = {grid: {left: '0',top: '15',right: '0',bottom: '10',containLabel: true},animation: false,xAxis: {data: ['服务数', '运行Pod数', '运行节点数'],axisTick: {show: false},axisLine: {show: false},axisLabel: {fontSize: '14',fontFamily: 'Source Han Sans CN-Medium, Source Han Sans CN',fontWeight: '500',color: '#fff'}},yAxis: {type: 'value',show: false,//内部横线不展示splitLine: {show: false},axisLabel: {show: false}},series: [//中间的圆柱{type: 'bar',barWidth: 45,data: [220, 182, 191],itemStyle: {normal: {borderWidth: 1,barBorderRadius: [15, 15, 20, 20],color: {type: 'linear',x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: 'rgba(82, 168, 255, 1)' // 0% 处的颜色},{offset: 1,color: 'rgba(0, 102, 206, 1)' // 100% 处的颜色}],global: false // 缺省为 false},shadowBlur: 5,shadowColor: 'rgba(255, 255, 255, 0.18000000715255737)',shadowOffsetX: 0,shadowOffsetY: -2}},label: {show: true, //开启显示position: 'top', //在上方显示color: '#fff',fontSize: '16px',fontFamily: 'YouSheBiaoTiHei-Regular, YouSheBiaoTiHei',fontWeight: '400',verticalAlign: 'bottom',lineHeight: '40'}},//顶部圆柱帽子{name: 'a',tooltip: {show: false},type: 'pictorialBar',itemStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: 'rgba(82, 168, 255, 1)' // 0% 处的颜色},{offset: 1,color: 'rgba(0, 102, 206, 1)' // 100% 处的颜色}],global: false // 缺省为 false},borderWidth: 1,borderColor: '#18CEE2',shadowBlur: 5,shadowColor: 'rgba(255, 255, 255, 0.18000000715255737)',shadowOffsetX: 0,shadowOffsetY: 2}},symbol: 'circle',symbolSize: ['45', '29'],symbolPosition: 'end',data: [221, 183, 192], //具体位置需要自己细微调整z: 3},//底座圆柱{name: 'b',tooltip: {show: false},type: 'pictorialBar',itemStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: 'rgba(82, 168, 255, 1)' // 0% 处的颜色},{offset: 1,color: 'rgba(0, 102, 206, 1)' // 100% 处的颜色}],global: false // 缺省为 false},borderWidth: 1,borderColor: '#18CEE2',shadowBlur: 5,shadowColor: 'rgba(255, 255, 255, 0.18000000715255737)',shadowOffsetX: 0,shadowOffsetY: -2}},symbol: 'circle',symbolSize: ['45', '29'],symbolPosition: 'end',data: [10, 10, 10], //具体细微差距还是得进行一个自己调整z: 3}]
}

将此代码粘贴到echarts里就会的到这样一张图

跟我们的样式只差一个底座，这个就不需要我来写了吧，自己加个背景图就可以了。
ending

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！