<template>
<div ref="lineEcharts" class="my-echarts"></div>
</template>
<script>
export default {
name: 'lineChart',
props: {
propOption: {
type: Object,
default: () => {},
},
},
data() {
return {
lineOption: {
// color: ['#DF547A', '#6FD088', '#A5EDFF'],
legend: {
right: 10,
// icon: 'circle',
textStyle: {
color: '#fff',
},
},
tooltip: {
trigger: 'axis',
},
grid: {
left: '5%',
right: '5%',
bottom: '0',
top: '30%',
containLabel: true,
},
xAxis: {
axisLabel: {
color: '#fff',
},
},
yAxis: {
type: 'value',
axisLabel: {
color: '#fff',
},
nameTextStyle: {
color: '#fff',
},
splitLine: { show: false },
},
series: [],
},
Option: {},
myChart: null,
};
},
watch: {
propOption: {
deep: true,
handler: function (val) {
this.Option = _.merge({}, this.lineOption, val);
this.init(this.Option);
},
},
},
mounted() {
this.Option = _.merge({}, this.propOption, this.lineOption);
this.$nextTick(() => {
this.init(this.Option);
});
},
activated() {
this.Option = _.merge({}, this.propOption, this.lineOption);
this.$nextTick(() => {
this.init(this.Option);
});
},
methods: {
init(option) {
if (this.myChart) {
this.myChart.dispose();
}
this.myChart = this.$echarts.init(this.$refs.lineEcharts);
this.myChart.setOption(option);
let _this = this;
window.addEventListener(
'resize',
_.debounce(function () {
if (_this.myChart) {
_this.myChart.resize();
}
}, 200),
);
},
},
};
</script>
<style lang="less" scoped>
.my-echarts {
height: 100%;
width: 100%;
}
</style>
