TEAMModelOS/TEAMModelBI/ClientApp/src/components/echarts/doublePie.vue

<!--基础折线图-->
<template>
  <div ref="myEcharts" :style="{ height, width }"></div>
</template>
<script>
import { ref, onMounted, nextTick, watch, getCurrentInstance } from 'vue'
import * as echarts from 'echarts'
export default {
  name: 'baseBar',
  props: {
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
    doublePieData: {
      type: Object,
      default: () => { },
    },
    title: {
      type: String,
      default: '',
    },
  },
  setup (props) {
    const myEcharts = ref(null)
    let { proxy } = getCurrentInstance()
    const chart = new InitChart(props, myEcharts)
    onMounted(() => {
      chart.init(props.doublePieData, proxy)
    })
    watch(
      props,
      (nweProps) => {
        nextTick(() => {
          nweProps ? chart.init(props.doublePieData, proxy) : ''
        })
      },
      { immediate: true, deep: true }
    )
    return {
      myEcharts,
    }
  },
}
class InitChart {
  constructor(props, myEcharts) {
    this.props = props
    this.myEcharts = myEcharts
    this.state = {
      chart: null,
    }
  }
  init (datas, proxy) {
    // var color = ['#55E6C1 ', '#25CCF7', '#F97F51', '#ff7675', '#5352ed', '#D6A2E8']
    // var data = [
    //     { value: 9, name: '已完成' },
    //     { value: 33, name: '进行中' },
    //     { value: 82, name: '未完成' },
    // ]
    console.log(datas, 'double调用')
    this.state.chart && this.destory()
    this.state.chart = echarts.init(this.myEcharts.value)
    this.state.chart.setOption({
      color: datas.color ? datas.color : '',
      tooltip: datas.tooltip ? datas.tooltip : {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: datas.legend ? datas.legend : {},
      series: datas.series ? datas.series : [],
    })
    window.addEventListener('resize', () => {
      this.state.chart.resize()
    })
  }

  destory () {
    this.state.chart.dispose()
    window.removeEventListener('resize', () => {
      console.log('事件移除')
    })
  }
}
</script>
<style lang="less"></style>