yecai_client/src/views/module_kzks/dashboard/components/pieContentChart.vue

<template>
  <div class="pieContentChart" ref="pieContentChart" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: '',
  props: {
    // title: {
    //   type: String,
    //   default: ''
    // },
    // yAxisNames: {
    //   type: Array,
    //   default: []
    // },
    // yAxisNumbers: {
    //   type: Array,
    //   default: []
    // },
    // seriesData: {
    //   type: Array,
    //   default: []
    // }
  },
  data () {
    return {
      uEcharts: null,
      uOption: null,
      pieContentData: [
        {
            name: "材料费",
            value: 411,
            unit: '万元'
        },
        {
            name: "外协费",
            value: 417,
            unit: '万元'
        },
        {
            name: "事务费",
            value: 221,
            unit: '万元'
        },
        {
            name: "专用费",
            value: 121,
            unit: '万元'
        },
        {
            name: "人工费",
            value: 127,
            unit: '万元'
        },
      ]
    }
  },
  watch: {
    seriesData: {
      handler(newValue, oldValue){
        console.log(newValue, oldValue)
        if(newValue){
          this.setSeriesData()
        }
      },
      immediate: true
    }
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart(){
      var _this = this
      this.uEcharts = echarts.init(this.$refs.pieContentChart)
      
      let dashedPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
      let color = ['#42CEAF', '#FF882A', '#16B4FE', '#747AFE'];
      let arrName = [];
      let arrValue = [];
      let sum = 0;
      let pieSeries = [],
          lineYAxis = [];

      // 数据处理
      this.pieContentData.forEach((v, i) => {
          arrName.push(v.name);
          arrValue.push(v.value);
          sum = sum + v.value;
      })

      // 图表option整理
      this.pieContentData.forEach((v, i) => {
          pieSeries.push({
              name: '学历',
              type: 'pie',
              clockWise: false,
              hoverAnimation: false,
              radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
              center: ["35%", "50%"],
              label: {
                  show: false
              },
              data: [{
                  value: v.value,
                  name: v.name
              }, {
                  value: sum - v.value,
                  name: '',
                  itemStyle: {
                      color: "rgba(0,0,0,0)"
                  }
              }]
          });
          pieSeries.push({
              name: '',
              type: 'pie',
              silent: true,
              z: 1,
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: [65 - i * 15 + '%',57 - i * 15 + '%'],
              center: ["35%", "50%"],
              label: {
                  show: false
              },
              data: [{
                  value: 7.5,
                  itemStyle: {
                      color: "#E3F0FF"
                  }
              }, {
                  value: 2.5,
                  name: '',
                  itemStyle: {
                      color: "rgba(0,0,0,0)"
                  }
              }]
          });
          v.percent = (v.value / sum * 100).toFixed(1) + "%";
          lineYAxis.push({
              value: i,
              textStyle: {
                  rich: {
                      circle: {
                          color: color[i],
                          padding: [0, 5]
                      }
                  }
              }
          });
      })
      // 配置参数
      this.uOption = {
        color: color,
        grid: {
          top: '15%',
          bottom: '55%',
          left: "30%",
          containLabel: false
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: function(params) {
                let item = _this.pieContentData[params];
                console.log(item)
                return '{line|}{circle|●}{name|'+ item.name +'}{bd||}{percent|'+item.percent+'}{value|'+ item.value+'}{unit|元}'
            },
            interval: 0,
            inside: true,
            textStyle: {
              color: "#333",
              fontSize: 14,
              rich: {
                line: {
                    width: 40,
                    height: 10,
                    backgroundColor: {image: dashedPic}
                },
                name: {
                    color: '#666',
                    fontSize: 14,
                },
                bd: {
                    color: '#ccc',
                    padding: [0, 5],
                    fontSize: 14,
                },
                percent:{
                    color: '#333',
                    fontSize: 14,
                },
                value: {
                    color: '#333',
                    fontSize: 12,
                    fontWeight: 500,
                    padding: [0, 0, 0, 10]
                },
                unit: {
                    fontSize: 14
                }
              }
            },
            show: true
          },
          data: lineYAxis
        }],
        xAxis: [{
          show: false
        }],
        series: pieSeries
      }

      // 使用刚指定的配置项和数据显示图表
      this.uOption && this.uEcharts.setOption(this.uOption);
      window.addEventListener('resize', ()=>{
        this.uEcharts.resize()
      })
    },
    setSeriesData(){
      console.log()
      console.log(this.uEcharts)
    }
  }
}
</script>

<style lang="less" scoped>
.pieContentChart{
  width: 100%;
  height: 100%;
}
</style>