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

<template>
  <div
    :id="id"
    ref="fault-pie-chart"
    class="right-content-quality-analysis"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
  >
    <!-- <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: 0.5,
        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: 0.5,
        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: 0.5,
        x2: 1,
        y2: 0.5,
        colorStops: [
          { color: '#FFFFFF00', offset: 0 },
          { color: '#49FBD600', offset: 0.1 },
          { color: '#49FBD6', offset: 1 } // 绿
        ],
        global: false
      }
    ]

    const demoData = [
      { value: 107, name: '破片' },
      { value: 146, name: '崩边' },
      { value: 43, name: '脏污' },
      { value: 83, name: '划擦伤' },
      { value: 20, name: '崩孔' }
    ]

    return {
      chart: null,
      // default configs
      configs: {
        title: {
          textAlign: 'center',
          left: '67%',
          top: '50%',
          text: demoData.reduce((prev, curr) => prev + curr.value, 0),
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 'normal'
          },
          itemGap: 2,
          subtext: '总数',
          subtextStyle: {
            color: '#fff',
            fontSize: 12,
            fontWeight: 'lighter'
          }
        },

        legend: {
          selectedMode: false,
          top: 0,
          bottom: 0,
          left: 0,
          orient: 'vertical',
          icon: 'none',
          itemGap: 8,
          itemWidth: 10,
          formatter: function(name) {
            // test data - dynamic
            const testData = demoData

            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: {
                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'
              },
              d: {
                // verticalAlign: 'top',
                // align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#DDB112'
              },
              e: {
                // verticalAlign: 'top',
                // align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#1A99FF'
              },
              f: {
                // verticalAlign: 'top',
                // align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#A691FF'
              },
              g: {
                // verticalAlign: 'top',
                // align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#49FBD6'
              }
            }
          }
        },

        series: [
          {
            silent: true,
            name: 'PieForm',
            type: 'pie',
            center: ['68%', '61%'],
            radius: ['42%', '60%'],
            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 }
              }
            },
            labelLine: {
              length: 5,
              length2: 5
            },
            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 >= 50 && dataIndex === 1) {
                  colorGradient.x = 1
                  colorGradient.y = 1
                  colorGradient.x2 = 0
                  colorGradient.y2 = 0
                } else if (totalRate + percent < 100) {
                  /** 也许这里需要完善，但目前工作良好 */
                  (() => {})()
                }

                totalRate += percent
                return colorGradient
              }
            },
            data: demoData
          }
        ]
      }
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      if (this.chart) {
        this.chart.resize()
        this.$nextTick(() => {
          // 重新绘制文本大小
          this.applyChartOption()
        })
      }
    })

    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.applyChartOption()
      this.chart.resize()
    })
  },

  methods: {
    calcFontsize(baseSize) {
      const beilv = document.documentElement.style.getPropertyValue('--beilv')
      return beilv * baseSize
    },
    applyChartOption() {
      // const fs1 = this.calcFontsize(1 /** px*/)
      // const fs3 = this.calcFontsize(3 /** px*/)
      const fs5 = this.calcFontsize(5 /** px*/)
      const fs8 = this.calcFontsize(8 /** px*/)
      const fs10 = this.calcFontsize(10 /** px*/)
      const fs12 = this.calcFontsize(12 /** px*/)
      const fs16 = this.calcFontsize(16 /** px*/)
      const titleSize = this.calcFontsize(22 /** px*/)
      const subtitleSize = this.calcFontsize(14 /** px*/)

      this.configs.title.textStyle.fontSize = titleSize
      this.configs.title.subtextStyle.fontSize = subtitleSize

      this.configs.legend.top = '26%'
      this.configs.legend.left = fs8
      this.configs.legend.itemGap = fs8
      this.configs.legend.itemWidth = fs8

      this.configs.legend.textStyle.rich.a.fontSize = fs12
      this.configs.legend.textStyle.rich.a.lineHeight = fs16
      this.configs.legend.textStyle.rich.b.fontSize = fs12
      // this.configs.legend.textStyle.rich.b.lineHeight = fs16
      this.configs.legend.textStyle.rich.c.width = fs8
      this.configs.legend.textStyle.rich.c.height = fs8
      this.configs.legend.textStyle.rich.c.borderRadius = fs5
      this.configs.legend.textStyle.rich.d.width = fs8
      this.configs.legend.textStyle.rich.d.height = fs8
      this.configs.legend.textStyle.rich.d.borderRadius = fs5
      this.configs.legend.textStyle.rich.e.width = fs8
      this.configs.legend.textStyle.rich.e.height = fs8
      this.configs.legend.textStyle.rich.e.borderRadius = fs5
      this.configs.legend.textStyle.rich.f.width = fs8
      this.configs.legend.textStyle.rich.f.height = fs8
      this.configs.legend.textStyle.rich.f.borderRadius = fs5
      this.configs.legend.textStyle.rich.g.width = fs8
      this.configs.legend.textStyle.rich.g.height = fs8
      this.configs.legend.textStyle.rich.g.borderRadius = fs5

      this.configs.series[0].label.rich.first.fontSize = fs10
      this.configs.series[0].label.rich.second.fontSize = fs10
      this.configs.series[0].label.rich.third.fontSize = fs10
      this.configs.series[0].label.rich.fourth.fontSize = fs10
      this.configs.series[0].label.rich.fifth.fontSize = fs10

      this.chart.setOption(this.configs)
    }
  }
}
</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>