11-mes-new/src/views/3DOverview/components/RightContentFaultAnalysis.vue

<template>
  <div class="right-content-quality-analysis">
    <div :id="id" ref="fault-pie-chart" class="fault-pie-chart" />
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'

export default {
  name: 'RightContentFaultAnalysis',
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'default-fault-analysis-id'
    }
  },
  data() {
    let totalRate = 0
    const colors = [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          { color: '#FFFFFF00', offset: 0 },
          { color: '#FB418C00', offset: 0.1 },
          { color: '#FB418C', offset: 1 } // 红
        ],
        global: false
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          { color: '#FFFFFF00', offset: 0 },
          { color: '#DDB11200', offset: 0.1 },
          { color: '#DDB112', offset: 1 } // 黄
        ],
        global: false
      },
      {
        type: 'linear',
        x: 1,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
          { color: '#FFFFFF00', offset: 0 },
          { color: '#1A99FF00', offset: 0.1 },
          { color: '#1A99FF', offset: 1 } // 兰
        ],
        global: false
      },
      {
        type: 'linear',
        x: 1,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
          { color: '#FFFFFF00', offset: 0 },
          { color: '#A691FF00', offset: 0.1 },
          { color: '#A691FF', offset: 1 } // 紫 3
        ],
        global: false
      },
      {
        type: 'linear',
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
          { color: '#FFFFFF00', offset: 0 },
          { color: '#49FBD600', offset: 0.1 },
          { color: '#49FBD6', offset: 1 } // 绿
        ],
        global: false
      }
    ]

    return {
      chart: null,
      // default configs
      configs: {
        title: {
          textAlign: 'center',
          left: '64%',
          top: '35%',
          text: '33039',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: 'normal'
          },
          subtext: '总数',
          subtextStyle: {
            color: '#fff',
            fontSize: 10,
            fontWeight: 'lighter'
          }
        },
        legend: {
          top: '5%',
          bottom: '0%',
          left: '-5%',
          orient: 'vertical',
          icon: 'none',
          itemGap: 5,
          itemWidth: 10,
          formatter: function(name) {
            // test data - dynamic
            const testData = [
              { name: 'A', value: 100 },
              { name: 'B', value: 200 },
              { name: 'C', value: 300 },
              { name: 'D', value: 400 },
              { name: 'E', value: 500 }
            ]
            let pieLegendVale = {}
            testData.filter((item, index) => {
              if (item.name === name) {
                pieLegendVale = item
              }
            })
            const color = ['c', 'd', 'e', 'f', 'g']
            const arr = [
              '{' + color[testData.findIndex(item => item.name === name)] + '|}',
              '{b|' + pieLegendVale.name + '}',
              '{a|' + pieLegendVale.value + '}'
            ]
            return arr.join(' ')
          },
          textStyle: {
            rich: {
              a: {
                // align: 'center',
                fontSize: 10,
                color: 'rgba(255, 255, 255, 0.7)',
                lineHeight: 16
              },
              b: {
                // verticalAlign: 'top',
                // align: 'center',
                fontSize: 10,
                color: 'rgba(255, 255, 255)'
              },
              c: {
                // verticalAlign: 'top',
                // align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#FB418C'
                // backgroundColor: '#1A99FF'
              },
              d: {
                // verticalAlign: 'top',
                // align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#DDB112'
                // backgroundColor: '#A691FF'
              },
              e: {
                // verticalAlign: 'top',
                // align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#1A99FF'
                // backgroundColor: '#FB418C'
              },
              f: {
                // verticalAlign: 'top',
                // align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#A691FF'
                // backgroundColor: '#49FBD6'
              },
              g: {
                // verticalAlign: 'top',
                // align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#49FBD6'
                // backgroundColor: '#DDB112'
              }
            }
          }
        },

        series: [
          {
            name: 'PieForm',
            type: 'pie',
            center: ['65%', '50%'],
            radius: ['50%', '70%'],
            avoidLabelOverlap: true,
            label: {
              formatter: params => {
                const colorMap = ['first', 'second', 'third', 'fourth', 'fifth']
                return `{${colorMap[params.dataIndex]}|${params.percent} %}`
              },
              rich: {
                first: { color: '#FB418C', fontSize: 8 },
                second: { color: '#DDB112', fontSize: 8 },
                third: { color: '#1A99FF', fontSize: 8 },
                fourth: { color: '#A691FF', fontSize: 8 },
                fifth: { color: '#49FBD6', fontSize: 8 }
              }
            },
            itemStyle: {
              color: params => {
                /** 计算渐变方向的过程，只靠 dataIndex 不太行 */
                const { dataIndex, percent } = params
                const colorGradient = colors[dataIndex]
                if (totalRate + percent < 25) {
                  /** 也许这里需要完善，但目前工作良好 */
                  (() => {})()
                } else if (totalRate + percent < 50) {
                  colorGradient.x = 0
                  colorGradient.y = 0
                  colorGradient.x2 = 1
                  colorGradient.y2 = 1
                } else if (totalRate + percent < 100) {
                  /** 也许这里需要完善，但目前工作良好 */
                  (() => {})()
                }

                totalRate += percent
                return colorGradient
              }
            },
            data: [
              { value: 100, name: 'A' },
              { value: 200, name: 'B' },
              { value: 300, name: 'C' },
              { value: 400, name: 'D' },
              { value: 500, name: 'E' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    window.addEventListener('resize', function() {
      if (this.chart) {
        this.chart.resize()
      }
    })

    this.$nextTick(() => {
      // if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
      if (!this.chart) this.chart = echarts.init(this.$refs['fault-pie-chart'])

      this.chart.setOption(this.configs)

      this.chart.resize()
    })
  },

  methods: {}
}
</script>

<style scoped>
.right-content-quality-analysis {
  height: calc(100% - 32px);
}

.fault-pie-chart {
  height: 100%;
  width: 100%;
}

.fault-pie-chart >>> div {
  width: 100% !important;
}
</style>