epmet-work-pc-chengyang/src/views/dataBoard/overview/components/DemandCharts.vue

<template>
  <div class="charts">
    <el-select v-model="date" class="select" placeholder="请选择" popper-class="selectPopClass" @change="timeChange">
      <el-option v-for="item in dateList" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
    <div id="DemandCharts"></div>
  </div>
</template>

<script>

import * as echarts from "echarts";

export default {
  name: "DemandCharts",
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dateList: [{
        label: '当月',
        value: 1
      }, {
        label: '前三个月',
        value: 3
      }, {
        label: '近半年',
        value: 6
      }, {
        label: '近一年',
        value: 12
      }],
      date: 12
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    timeChange() {
      this.initChart();
    },
    initChart() {
      this.$http.post('/governance/userdemand/countByCategory',{monthTime: this.date} ).then(({data:{data}}) => {
        let div = document.getElementById('DemandCharts');
        this.myChart = echarts.init(div);
        var getname = data.map(item => item.categoryName); // 课程名
        var getNum = data.map(item => item.cateTotal);
        var totals = eval(getNum.join('+'))
        var data = [];
        for (var i = 0; i < getname.length; i++) {
          data.push({name: getname[i], value: getNum[i]})
        }
        const color = ['#16A7EB', '#5974FF', '#04C790', '#FFAA01', '#FF6701', '#EF3B00']

        var option = {
          color,
          tooltip: {
            trigger: "item"
          },
          legend: {
            type: "plain",
            orient: "vertical",
            right: 0,
            top: "center",
            align: "left",
            itemGap: 10,
            itemWidth: 8,
            itemHeight: 8,
            symbolKeepAspect: false,
            selectedMode: false,
            formatter: function (name) {
              for (var i = 0; i < getname.length; i++) {
                if (name == data[i].name) {
                  name = name.length > 8?name.slice(0,7)+'...':name;
                  return '{name|' + name + '}{num|' + getNum[i] + '人}'
                }
              }
            },
            textStyle: {
              rich: {
                name: {
                  fontSize: 12,
                  width: 96,
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  padding: [0, 29, 0, 5],
                  color: '#A3B9DA',
                },
                num: {
                  fontSize: 12,
                  fontWeight: 500,
                  align: 'right',
                  color: '#FFFFFF',
                }
              }
            }
          },
          series: [{
            name: '',
            type: "pie",
            radius: ["65%", "90%"],
            center: ["20%", "50%"],
            avoidLabelOverlap: false,

            label: {
              show: true,
              position: "center",
              color: "rgba(13, 17, 29,0)",
              formatter: `{primary|${totals}}\n{point|总数}`,
              rich: {
                primary: {
                  fontSize: 24,
                  color: '#7FCEFF',
                  align: 'center'
                },
                point: {
                  fontSize: 12,
                  fontWeight: 400,
                  color: "#A3B9DA",
                  align: 'center'
                }
              }
            },
            labelLine: {
              show: false
            },
            data: data,
            zlevel: 30
          }]
        };
        this.myChart.setOption(option, true);
        window.addEventListener("resize", () => this.myChart.resize());
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  width: 90px !important;
  height: 24px !important;
  color: #a0cdff;
  border: 1px solid #125aaa !important;
  border-radius: 12px !important;
  background: #021c49 !important;
}

/deep/ .el-input__icon {
  line-height: 24px !important;
  color: #a0cdff;
}

.charts {
  display: flex;
  justify-content: space-between;

  #DemandCharts {
    flex: calc(100% - 100px);
    width: calc(100% - 100px);
    height: 126px;
  }
}
</style>