epmet-oper-gov/src/views/modules/visual/components/screen-echarts-frame/index.vue

<template>
  <div class="screenEchartsFrame"
       ref="screenEchartsFrame"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'screen-echarts-frame',
  data () {
    return {
      myChart: ''
    }
  },
  props: {
    chartMethod: {
      type: Function
    }
  },
  mounted () {
    this.initChart()
    window.onresize = () => {
      this.myChart.resize()
    }
  },
  beforeDestroy () {
    // 销毁echarts实例对象
    if (this.myChart) this.myChart.dispose()
  },
  watch: {},
  methods: {
    initChart () {

      this.$nextTick(() => {
        const dom = this.$refs.screenEchartsFrame
        this.myChart = echarts.init(dom)

        // this.myChart.setOption(this.chartMethod());
        this.$emit('myChartMethod', this.myChart)
      })
    },
    //点击pie事件
    handleClick (fun) {
      this.myChart.on('click', fun);
    },

    //高亮
    highLight (index) {
      this.myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 1,
        dataIndex: index
      });
    },

    // 配置option
    setOption (option) {
      this.myChart.setOption(option)
    },
    // 获取option
    getOption () {
      if (this.myChart) {
        return this.myChart.getOption()
      } else {
        return null
      }
    },
    //
    resize () {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    clear () {
      if (this.myChart) {
        this.myChart.clear()
      }
    },
    showLoading () {
      if (this.myChart) {
        this.$nextTick(() => {
          this.myChart.showLoading({
            text: '',
            color: '#29cdff',
            textColor: '#29cdff',
            maskColor: 'rgba(255, 255, 255, 0)',
            zlevel: 0

          })
        })
      }
    },
    hideLoading () {

      if (this.myChart) {
        this.myChart.hideLoading()
      }
    },
    // 启动动画时使用
    tooltipAnimate (chart, length) {
      // 清除上一次动画
      this.timeTicket && clearInterval(this.timeTicket)
      const count = 0
      // 启动动画
      this._action(chart, count, length)
      chart && // 移除动画
        chart.on('mouseover', params => {
          this._cleanAction(chart, params)
        })
      // 重写启动动画
      chart &&
        chart.on('mouseout', () => {
          this._action(chart, count, length)
        })
    },
    // tooltip动画action
    _action (chart, count, length) {
      this.timeTicket && clearInterval(this.timeTicket)
      this.timeTicket = setInterval(() => {
        if (!chart) {
          clearInterval(this.timeTicket)
          return
        }
        chart &&
          chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0
          })
        chart &&
          chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: count % length
          })
        chart &&
          chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: count % length
          })
        count++
      }, 1000 * 3)
    },
    _cleanAction (chart, params) {
      this.timeTicket && clearInterval(this.timeTicket)
      if (!chart) {
        clearInterval(this.timeTicket)
        return
      }
      chart &&
        chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
        })
      chart &&
        chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        })
      chart &&
        chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.screenEchartsFrame {
  width: 100%;
  height: 100%;
}
</style>