Merge branch 'feature_1.0'

quanyawei

2023-10-07 9083fd270cd172f998eb2dd3dfae59187a70cb1a

 src/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts.vue

New file
@@ -0,0 +1,151 @@
<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
// import resize from '@/components/Echarts/mixins/resize'
export default {
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '290px'
    },
    chartData: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      seriesData: []
    }
  },
  watch: {
    'chartData': {
      handler(newVal) {
        console.log('newVal', newVal)
        this.seriesData = []
        this.seriesData = newVal
        this.$nextTick(() => {
          this.initChart()
        })
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.clear()
      this.setOptions()
    },
    setOptions() {
      // function fontSize(res) {
      //     let clientWidth =
      //         window.innerWidth ||
      //         document.documentElement.clientWidth ||
      //         document.body.clientWidth
      //     if (!clientWidth) return
      //     let fontSize = 100 * (clientWidth / 1920)
      //     return res * fontSize
      // }

      this.chart.setOption(
        {
          color: ['#F56463', '#00C6FF', '#F09615', '#0079E6', '#a814ff', '#03b915'],
          legend: {
            itemHeight: 14,
            itemWidth: 14,
            icon: 'rect',
            orient: 'vertical',
            top: 'center',
            right: '5%',
            textStyle: {
              align: 'left',
              color: '#',
              verticalAlign: 'middle',
              rich: {
                name: {
                  width: 80,
                  fontSize: 16
                },
                value: {
                  width: 20,
                  align: 'right',
                  fontFamily: 'Medium',
                  fontSize: 16
                },
                rate: {
                  width: 10,
                  align: 'right',
                  fontSize: 16
                }
              }
            },
            data: this.seriesData,
            formatter: (name) => {
              if (this.seriesData.length) {
                const item = this.seriesData.filter((item) => item.name === name)[0]
                return `{name|${name}}{value| ${item.value}}`
              }
            }
          },
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(255,255,255,.8)', // 通过设置rgba调节背景颜色与透明度
            color: 'gray'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['30%', '80%'],
              center: ['35%', '50%'],
              roseType: 'radius',
              label: {
                formatter: '{d}%'
              },
              labelLine: {
                length: 1,
                length2: 20
              },
              data: this.seriesData
            }
          ]
        },
        true
      )
      this.chart.resize()
      window.onresize = this.chart.resize
    }
  }
}
</script>