#注意 ：
因为一个页面有多个图表，所以封装一个公共的js文件，方便后续使用。
适用于Vue2版本，粘贴即用即可。
1、echartsMixin.js文件如下
// echartsMixin.js
import echarts from 'echarts'
export default {
data() {
return {
myCharts: []
}
},
mounted() {
window.addEventListener('resize', this.handleResize)//监听图表随屏幕的变化而变化
},
methods: {
initChart(ref) {//初始化dom事件
const chart = echarts.init(ref)
this.myCharts.push(chart)
return chart
},
handleResize() {//循环多个图标dom
this.myCharts.forEach(chart => {
chart.resize()
})
}
},
beforeDestroy() {//页面摧毁前摧毁图表
this.myCharts.forEach(chart => {
chart.dispose()
})
}
}
2、其次在使用到的页面去引入此文件（这里不建议全局注册到main.js上）
3、使用方法如下，定义一个方法，供图像dom元素加载完毕调用
getFirstPageData(objQuery).then(res => {
if (res.success) {
// 第一个扇形图
const firstBingChartObj = {
mark: 'evaluation1',
color: that.color,
dataList: res.data.firstBingChartObj.dataList,
total: res.data.firstBingChartObj.total
}
// 加数据时显示判断
this.firstNoDataMark = res.data.firstBingChartObj.dataList.length > 0
this.$nextTick(() => {
if (this.firstNoDataMark) {
that.getFirstBingChart(firstBingChartObj)
}
})
// 第二个扇形图
const secondBingChartObj = {
mark: 'evaluation2',
color: that.color,
dataList: res.data.secondBingChartObj.dataList,
total: res.data.secondBingChartObj.total
}
this.secondNoDataMark = res.data.secondBingChartObj.dataList.length > 0 //这里为了判断是否有图像数据，没数据显示没数据公共组件，，下面会提到哈
this.$nextTick(() => {
if (this.secondNoDataMark) {
that.getSecondBingChart(secondBingChartObj)
}
})
this.watchEcharts()// dom元素初始化后 调用监听echarts图表变化
}
})4、图表无数据时候显示无数据组件。（注意：这里要用v-if进行判断需要使用nexTick，使用v-show会导致图表变形哈）
//html
<div v-if="firstNoDataMark" id="evaluation1" ref="evaluation1" style="width: 100%; height: 320px" />
<no-data v-else text="当前年度暂无数据" :custom-style-obj="{height:'320px'}" />5、no-data组件
<template>
<div class="no-data-show" :style="{height:customStyleObj.height}">
<div class="nodata-card">
<div class="no-data-icon">
<img :src="iconUrl" width="120" height="120">
</div>
<div class="no-data-title">{{ text }}</div>
</div>
</div>
</template>
<script>
export default {
name: 'NoData',
props: {
value: {
type: Number,
default: null
},
// 自定义样式
customStyleObj: {
type: Object,
default: function() {
return {
minHeight: '184px',
height: '200px'
}
}
},
// text显示数据
text: {
type: String,
default: '本月度暂无数据'
},
// 传递图标
iconUrl: {
type: String,
default: 'http://10.81.16.14:9900/publishattachment/2024/03/14/e190cace7eb74e728172073c0499926f.png'
}
},
data: function() {
return {
}
},
watch: {
value: {
handler: function(newVal, oldVa) {
},
immediate: true,
deep: true
}
},
created() {
},
methods: {
}
}
</script>
<style scoped lang="scss">
/*无数据展示*/
@import "@/views/scsscomponents/no-data-show.scss";
</style>
