代码:
<div class="leftCard" id="hiddenDanger" ref="hiddenDangerRef"></div>
<script>
mounted(){
this.getCharts()
},
methods:{
getCharts() {
let chartDom = document.getElementById('hiddenDanger');
let myChart = this.$echarts.init(chartDom);
this.option = {
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
triggerEvent: true,
axisTick: {
alignWithLabel: true,
show: false,
},
axisLine: {
lineStyle: {
color: '#D3EBFF',
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: '#D3EBFF',
fontSize: '18'
}
}
},
yAxis: {
type: 'value',
name: '单位:条',
min: 0,
interval: 100,
nameTextStyle: {
color: '#D3EBFF',
fontSize: 18,
nameLocation: 'start',
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#35618B'
}
},
axisLabel: {
textStyle: {
color: '#D3EBFF',
fontSize: '18'
}
}
},
series: [
{
emphasis: {
itemStyle: {
opacity: 1
}
},
data: [136, 260, 280, 165, 220, 260, 158, 165, 40, 130, 290, 210],
type: 'pictorialBar',
barCategoryGap: '-80%',/*多个并排柱子设置柱子之间的间距*/
symbol:
'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
itemStyle: {
normal: {
color: 'rgba(9, 136, 204, 0.3500)'
}
},
z: 10,
}
]
};
myChart.setOption(this.option);
},
}
</script>