#注意 ：

因为一个页面有多个图表，所以封装一个公共的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>