``
<template>
<div class="leftTopChart">
<div id="leftTop"></div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
components: {
},
data() {
return {
myChart: null,
echartData:[
{
name: '2020',
value: 14.5
},
{ name: '2021', value: 14.5 },
{ name: '2022', value: 8.7 }
]
};
},
watch: {
},
methods: {
loadData(){
let option = {
tooltip: {
trigger: 'axis'
},
legend: {
x: 'right',
data: ['xx', 'yy'],
textStyle: {
color: '#ffffff'
},
},
color: ['#758FCA','#FFB99B'],
textStyle: {
color: '#ffffff'
},
grid: {
left: '3%',
right: '4%',
top: '20%',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#4C5D82'
},
}
},
yAxis: {
name: '警情数',
type: 'value',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: 'transparent'
},
},
splitLine: {
show: true,
lineStyle: {
color: '#4C5D82',
type: 'dashed'
}
}
},
series: [
{
name: 'xx',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210],
lineStyle: {
color: '#758FCA'
},
showSymbol: false,
smooth: true,
smoothness: 0.5
},
{
name: 'yy',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310],
lineStyle: {
color: '#FFB99B'
},
showSymbol: false,
smooth: true,
smoothness: 0.5
}
]
};
this.renderChart(option);
},
renderChart(option){
let self = this;
this.$nextTick().then(()=>{
self.myChart.setOption(option);
})
window.addEventListener('resize',()=>{
self.myChart.resize();
})
}
},
watch: {
echartData: {
handler() {
this.echarts.setOption(this.option, true)
},
deep: true
}
},
mounted() {
this.loadData()
this.myChart = echarts.init(document.getElementById('leftTop'));
}
}
</script>
<style lang='less' scoped>
.leftTopChart{
height: 100%;
width: 100%;
#leftTop{
height: 100%;
}
}
</style>
