<div id="myChart" :style="{ height: '230px'}"></div>
mounted() {
this.initChart()
},
methods: {
initChart() {
let myChart = this.$echarts.init(document.getElementById("myChart"));
myChart.setOption({
title: {
text: '报警态势曲线',
textStyle: {
color: '#333',
fontSize: 14,
fontWeight: '700'
},
padding: [5, 0, 0, 0],
},
grid: {
left: 0,
top: 40,
bottom: 20,
right: 10,
containLabel: true
},
xAxis: {
type: 'category',
data: [
'第2周',
'第4周',
'第5周',
'第6周',
'第7周',
'第8周',
],
axisLine: {
lineStyle: {
color: '#f3f3f3'
}
},
axisTick: {
length: 3
},
axisLabel: {
color: '#999'
},
},
yAxis: {
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#f3f3f3'
}
},
axisLabel: {
color: '#666',
formatter: '{value}次',
},
splitLine: {
show: true,
lineStyle: {
color: '#f3f3f3'
}
},
},
tooltip: {
trigger: 'axis',
padding: [12, 17, 20, 23],
textStyle: {
color: '#ffffff'
},
renderMode: 'html',
className: 'tooltip',
},
series: [{
name: '报警态势曲线',
type: 'line',
data: [0, 10, 2, 4, 4, 7, 0, 0, 0, 3, 0, 9, 6, 0, 0],
smooth: true, // 平滑曲线
showSymbol: false,
itemStyle: {
color: '#126EFC'
},
lineStyle: {
width: 3,
color: '#126EFC'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#126EFC' // 0% 处的颜色
}, {
offset: 1,
color: '#ffffff' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}, ],
});
},
}