<template>
<div class="qf-e-chart">
<div class="e-chart-canvas" ref="echarts"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'EChart',
props: {
options: { type: Object, default: {} },
clickCall: { type: Function, default: () => {} }
},
methods: {
setChart() {
// 初始化echarts实例
const chart = echarts.init(this.$refs.echarts)
let option = {
title: {},
tooltip: {},
legend: {},
xAxis: {},
yAxis: {},
series: [],
toolbox: {},
grid: {}
}
Object.assign(option, this.options)
chart.clear()
// 绘制图表
chart.setOption(option, true)
// 浏览器大小改变时重置大小
window.onresize = function () {
chart.resize()
}
// 容器大小改变时重置大小
this.$nextTick(() => {
chart.resize()
})
// 防止重复触发点击事件
if (chart._$handlers.click) {
chart._$handlers.click.length = 0
}
chart.on('click', (params) => {
this.clickCall && this.clickCall(params)
})
},
initChart() {
this.$nextTick(() => {
this.setChart()
})
}
},
mounted() {
this.initChart()
}
}
</script>
<style scoped>
.e-chart-canvas {
width: 100%;
min-height: 380px;
max-height: 400px;
}
</style>