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);
})
