hyyfClient/src/views/PdcData/analysis/CostPie.vue

<!--
 * @Author: your name
 * @Date: 2021-10-12 08:39:43
 * @LastEditTime: 2021-10-12 10:10:54
 * @LastEditors: Please set LastEditors
 * @Description: 成本分析扇形图
 * @FilePath: \hyyfClient\src\views\PdcData\analysis\CostPie.vue
-->
<template>
  <div class="cost-pie">
    <div id="costPie"></div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    init() {
      let options = {
        grid: {
          x: 100
        },
        legend: {
          top: '25%',
          left: '75%',
          orient: 'vertical',
          icon: "circle",
          selectedMode: false, // 取消右侧项选中
          itemGap: 20, // 各项间隔
          textStyle: {
            fontSize: 15,
            color: '#666'
          },
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: '70%', // 半径
            center: ['35%', '55%'],
            avoidLabelOverlap: false,
            labelLine: {
              show: true
            },
            itemStyle: {
              normal: {
                color: function (colors) { // 颜色设置
                  var colorList = ['rgb(112,182,3)', 'rgb(232,56,92)', 'rgb(123,0,255)', 'rgb(0,215,233)', 'rgb(255,255,160)', 'rgb(0,0,255)']
                  return colorList[colors.dataIndex]
                },
                label: {
                  formatter: '{b}: {c}%'
                }
              },
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  formatter: '{b}: {c}%',
                  textStyle: {
                    fontSize: '15',
                  }
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
            },
            data: this.data
          }
        ]
      };

      this.myChart.setOption(options)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('costPie'));
    // this.init()
  },
  watch: {
    data(value) {
      console.log('成本分析环形图数据', value)
      this.init()
    }
  }
}
</script>
<style scoped>
.cost-pie {
  display: inline-block;
  width: 100%;
  height: 300px;
}
#costPie {
  width: 100%;
  height: 100%;
}
</style>>