<template>
<div :style="{width:`${width}px`,height:`${height}px`}" :id="datachart"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'datachart',
data() {
return {
};
},
props: {
datachart: String,
width: Number,
height: Number,
chartInfo: Object,
isCompare: Boolean
},
computed: {
opt() {
/* eslint-disable */
let that = this;
let option = {
tooltip: {
trigger: 'axis',
// axisPointer : { // 坐标轴指示器,坐标轴触发有效
// type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
// },
position: function (pt) {
return [pt[0], '10%'];
}
},
// title: {
// left: 'center',
// text: '',
// },
legend: {
data:[],
y: 'bottom'
},
xAxis: {
type:'category',
boundaryGap: false,
data: [],
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.2]
},
series: [
{
name:'',
type:'line',
clickable : true,
smooth:true,
// symbol: 'none',
sampling: 'average',
itemStyle: {
color: '#409EFF'
},
data: []
},
{
name:'',
type:'line',
clickable : true,
smooth:true,
// symbol: 'none',
sampling: 'average',
itemStyle: {
color: 'green'
},
data: []
},
]
};
return option;
/* eslint-enable */
}
},
methods: {
drawcharts(index) {
const visiteVolume =
echarts.init(document.getElementById(`dataChart${index}`));
this.opt.xAxis.data = this.chartInfo.chartInfoX;
this.opt.series[0].data = this.chartInfo.chartInfoY;
this.opt.series[0].name = this.chartInfo.chartInfoL[0];
if (this.isCompare) {
this.opt.series[1].data = this.chartInfo.constractChartInfoY;
this.opt.series[1].name = this.chartInfo.chartInfoL[1];
} else {
this.opt.series[1].data = [];
this.opt.series[1].name = '';
}
this.opt.legend.data = this.chartInfo.chartInfoL;
visiteVolume.setOption(this.opt, true);
visiteVolume.off('click');
visiteVolume.on('click', params => {
this.$emit('callBackName', params.name);
});
window.addEventListener('resize', () => {
visiteVolume.resize();
});
}
}
};
</script>
注意点:1.symbol: 不能为 'none',2.echarts如果是多个实例需要通过id new多次