11-wms/src/views/OperationalOverview/components/newPie.vue

<!--
 * @Author: zwq
 * @Date: 2022-01-21 14:43:06
 * @LastEditors: zwq
 * @LastEditTime: 2022-11-11 15:27:23
 * @Description:
-->
<template>
  <div :id="id" :class="className" :style="{ height: height * beilv + 'px', width: width }" />
</template>

<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'

export default {
  name: 'OverviewBar',
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'DefaultPieChart'
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    beilv: {
      type: Number,
      default: 1
    },
    height: {
      type: Number,
      default: 300
    },
    showCenterTitle: {
      type: Boolean,
      default: false
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    legendConfig: {
      type: Object,
      default: function() {
        return {}
      }
    },
    seriesConfig: {
      type: Object,
      default: function() {
        return {}
      }
    },
    seriesData: {
      type: Array,
      default: () => []
    },
    barColor: {
      type: Array,
      default: () => [
        '#5fe1d2',
        '#ffb2b0',
        '#8e90ff',
        '#f058aa',
        '#8652da',
        '#87fb84',
        '#61b9ff',
        '#fdf6a6',
        '#ffc465',
        '#98d9ff'
      ]
    }
  },
  data() {
    const lData = this.seriesData
    return {
      chart: null,
      newColor: [
        '#1A99FF',
        '#A691FF',
        '#FB418C',
        '#49FBD6',
        '#DDB112'
      ],
      defaultConfig: {
        // 默认的legend配置
        legend: {
          orient: 'vertical',
          bottom: 0,
          itemHeight: 10,
          itemWidth: 10,
          icon: 'none',
          formatter: function(name) {
            let pieLegendVale = {}
            lData.filter((item, index) => {
              if (item.name === name) {
                pieLegendVale = item
              }
            })
            const color = ['c', 'd', 'e', 'f', 'g']
            const arr = ['{' + color[lData.findIndex(item => item.name === name)] + '|}', '{b|' + pieLegendVale.name + '}', '{a|' + pieLegendVale.value + '}']
            return arr.join(' ')
          },
          textStyle: {
            rich: {
              a: {
                align: 'center',
                fontSize: 13,
                fontWeight: 400,
                color: 'rgba(255, 255, 255, 0.7)',
                padding: [0, 4],
                lineHeight: 16
              },
              b: {
                // verticalAlign: 'top',
                align: 'center',
                fontSize: 13,
                fontWeight: 400,
                color: 'rgba(255, 255, 255)'
              },
              c: {
                // verticalAlign: 'top',
                align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#1A99FF'
              },
              d: {
                // verticalAlign: 'top',
                align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#A691FF'
              },
              e: {
                // verticalAlign: 'top',
                align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#FB418C'
              },
              f: {
                // verticalAlign: 'top',
                align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#49FBD6'
              },
              g: {
                // verticalAlign: 'top',
                align: 'center',
                width: 10,
                borderRadius: 5,
                height: 10,
                backgroundColor: '#DDB112'
              }
            }
          }
        },
        // 默认的series配置
        series: {
          center: ['60%', '55%'],
          radius: ['50%', '70%'],
          silent: true,
          avoidLabelOverlap: false,
          emphasis: {
            label: {
              show: false,
              fontSize: '20',
              fontWeight: 'bold'
            }
          }
        }
      }
    }
  },
  computed: {
    computedHeight: function() {
      if (/[0-9]+%$/.test(this.height)) {
        // 如果是百分比
        return this.height
      }
      return this.height * this.beilv + 'px'
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        title: this.showCenterTitle
          ? {
            text: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
            subtext: '总共',
            top: '48%',
            left: '59%',
            textAlign: 'center',
            itemGap: 5,
            textStyle: {
              color: '#fff',
              fontSize: 26,
              fontWeight: 400,
              lineHeight: 15
            },
            subtextStyle: {
              color: 'rgba(255, 255, 255, 0.7)',
              fontWeight: 400,
              fontSize: 14,
              lineHeight: 20
            }
          }
          : {},
        tooltip: {
          trigger: 'item'
        },
        grid: {
          top: '0px',
          right: '0px',
          bottom: '0px',
          left: '0px',
          containLabel: true
        },
        legend: {
          // 默认配置
          ...this.defaultConfig.legend,
          // 外部传入配置
          ...this.legendConfig
        },
        color: this.newColor,
        series: [
          {
            name: 'default name',
            type: 'pie',
            // 默认series配置
            ...this.defaultConfig.series,
            // 外部传入配置
            ...this.seriesConfig,
            itemStyle: {
              normal: {
                color: (list) => {
                  var colorList = [
                    {
                      colorStart: 'rgba(59, 76, 118, 0.2)',
                      colorEnd: '#1A99FF'
                    },
                    {
                      colorStart: 'rgba(59, 76, 118, 0.2)',
                      colorEnd: '#A691FF'
                    },
                    {
                      colorStart: 'rgba(59, 76, 118, 0.2)',
                      colorEnd: '#FB418C'
                    },
                    {
                      colorStart: 'rgba(59, 76, 118, 0.2)',
                      colorEnd: '#49FBD6'
                    },
                    {
                      colorStart: 'rgba(59, 76, 118, 0.2)',
                      colorEnd: '#DDB112'
                    }
                  ]
                  return new echarts.graphic.LinearGradient(0, list.dataIndex > 1 ? 1 : 0, 0, list.dataIndex > 1 ? 0 : 1, [{ // 左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]['colorStart']
                  }, {
                    offset: 1,
                    color: colorList[list.dataIndex]['colorEnd']
                  }])
                }
              }
            },
            label: {
              formatter: [
                '{d}%'
              ].join('\n')
            },
            data: this.seriesData.map((item, index) => {
              item.label = {
                color: this.newColor[index]
              }
              return item
            })
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
/* .chart >>> div:first-child{
  background-color: red;
  height: 100% !important;
} */
</style>