<template>
|
<div
|
:id="idName"
|
:style="`margin-top:${top}px`"
|
class="echarts w-full h-full"
|
>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
export default {
|
name: 'V2Echarts',
|
props: {
|
options: {
|
type: Object,
|
default: () => {},
|
require: true
|
},
|
// 传入id名称
|
idName: {
|
type: String,
|
default: () => {
|
return ''
|
},
|
require: true
|
},
|
width: {
|
type: String,
|
default: () => {
|
return '410'
|
}
|
},
|
height: {
|
type: String,
|
default: () => {
|
return '290'
|
}
|
},
|
top: {
|
type: String,
|
default: () => {
|
return '0'
|
}
|
}
|
},
|
data () {
|
return {
|
myChart: null,
|
resizeObserver: null,
|
}
|
},
|
|
watch: {
|
options: {
|
handler (newVal) {
|
this.setChartEvents(newVal)
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
created() {
|
this.$nextTick(this.initTheChart)
|
},
|
methods: {
|
// 初始化图表
|
initTheChart() {
|
this.myChart = echarts.init(document.getElementById(this.idName))
|
this.myChart.setOption(this.options, true)
|
|
// 鼠标移入图表时，不为第一条时就取消第一条的高亮效果
|
this.myChart.on('mouseover', v => {
|
if (v.dataIndex !== 0) {
|
this.myChart.dispatchAction({
|
type: 'downplay',
|
seriesIndex: 0,
|
dataIndex: 0
|
})
|
}
|
if (this.idName === 'jinzhanqushi' || this.idName === 'dailogjinzhanqushi') {
|
this.myChart.setOption({
|
tooltip: {
|
// 鼠标在折线上，系列内横向比对，显示系列名称
|
formatter: function(p) {
|
const ynames = ['年度计划完成', '预计年度完成', '预计年度TBM', '预计年度钻爆']
|
if (ynames.indexOf(p[v.seriesIndex].seriesName) !== -1) {
|
return p[v.seriesIndex].marker +
|
' ' + p[v.seriesIndex].seriesName + ':' + p[v.seriesIndex].value + 'm'
|
} else {
|
let dataStr = ''
|
const valMap = {};
|
p.forEach(element => {
|
const seriesName = element.seriesName; // 图例名称
|
const value = element.value; // y轴值
|
|
// 过滤无效值
|
if (value === '-') {
|
return
|
}
|
// 过滤重叠值
|
if (valMap[seriesName] === value) {
|
return
|
}
|
if (ynames.indexOf(seriesName) === -1) {
|
dataStr += `<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${element.color};"></span>`
|
dataStr += `${element.seriesName}: <span style="font-size:16px;font-weight:600;">${element.data ? element.data : 0}m</span> <br>`
|
valMap[seriesName] = value;
|
}
|
});
|
return dataStr
|
}
|
}
|
}
|
})
|
}
|
})
|
// 鼠标图表时默认显示第一条
|
this.myChart.on('mouseout', v => {
|
this.myChart.dispatchAction({
|
type: 'highlight',
|
seriesIndex: 0,
|
dataIndex: 0
|
})
|
})
|
// this.myChart.on('click', function (param) {
|
// console.log('param', param)
|
// })
|
// 监听窗口变化 - 只刷新最后一个图表
|
window.onresize = () => {
|
this.myChart.resize()
|
}
|
// 监听窗口变化 - 多个图表同时刷新
|
window.addEventListener('resize', () => {
|
this.myChart.resize()
|
})
|
},
|
// 设置图表的事件
|
setChartEvents (options) {
|
// console.log(options, this.idName)
|
if (!this.myChart) return
|
this.myChart.setOption(options, true)
|
// 刷新时默认显示第一条
|
this.myChart.dispatchAction({
|
type: 'highlight',
|
seriesIndex: 0,
|
dataIndex: 0
|
})
|
},
|
setResize() {
|
this.$nextTick(() => {
|
// 使echarts尺寸重置
|
if (this.myChart) {
|
this.myChart.resize()
|
}
|
})
|
}
|
},
|
mounted() {
|
// 当屏幕改变，图表重新动态改变并渲染
|
const self = this;
|
const viewElem = document.body;
|
// 调用实例对象的observe方法，监听整个body节点的变化，当改变窗口大小或者某个DOM节点出现或隐藏时时，就会触发回调
|
this.resizeObserver = new ResizeObserver(() => {
|
if (!self.myChart) return
|
self.myChart.resize();
|
});
|
this.resizeObserver.observe(viewElem);
|
},
|
beforeDestroy() {
|
if (this.resizeObserver) {
|
this.resizeObserver.unobserve(document.body)
|
}
|
}
|
}
|
</script>
|
