#注意 ：
因为一个页面有多个图表，所以封装一个公共的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() {//循环多个图标domthis.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 > 0this.$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>
)
