vue3+echarts 立体柱状效果

本文主要是介绍vue3+echarts 立体柱状效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue3+echarts 立体柱状效果

废话不多说，直接上代码就两步，直接复制粘贴一手

 <div id="main" class="chart" ref="chartDom"></div>

import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById('main');
var option: EChartsOption;option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {top: '10%',left: '3%',right: '4%',bottom: '10%',containLabel: true},xAxis: [{type: 'category',data: ['天', '大', '1', '2', '3'],axisTick: {alignWithLabel: true},axisLabel: {color: '#ffffff',fontSize: 16}}],yAxis: [{type: 'value',interval: 20,axisLabel: {color: '#ffffff',fontSize: 16}},],series: [{name: 'Direct',type: 'bar',data: [20, 42, 36, 50, 53],barGap: 0,barWidth: 13,label: {normal: {show: false,position: "insideRight"}},itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#8c40dc' },     //柱状图从左向右颜色渐变{ offset: 1, color: '#1e2a4c' }]),}},},{name: 'Direct',type: 'bar',barWidth: 16,data: [20, 42, 36, 50, 53],tooltip: {show: false},label: {normal: {show: false,position: "insideRight"}},itemStyle: {normal: {color: "#502f92"}},}, {name: 'Direct',barWidth: 22,data: [20, 42, 36, 50, 53],type: "pictorialBar", // 长方体顶部四边形symbol: 'diamond',symbolRotate: 0,symbolSize: ['28', '10'],symbolOffset: ['0', '-5'],symbolPosition: 'end',z: 3, // 顶部四边形tooltip: {show: false},label: {normal: {show: false,position: "insideRight"}},itemStyle: {normal: {color: "#761c9a"}},},]
};
onMounted(() => {var myChart = echarts.init(chartDom);option && myChart.setOption(option);
})