mzBigScreen/src/components/PatrolmanStatistics/3.vue

<template>
  <div id="qwe" style="width: 100%; height: 100%; "></div>
</template>

<script>
    import { oldPersonSelectByJob } from '../../api'
    import 'echarts-liquidfill'

    export default {
        name: "PatrolmanJobDistributionCount",
        data() {
          return {
            dataArr: [],
            colorArr: [
              { color1: '#00D7FF', color2: '#00D7FF' },
              { color1: '#E9F82D', color2: '#E9F82D' },
              { color1: '#32FC6B', color2: '#32FC6B' },
              { color1: '#FEC400', color2: '#FEC400' }
            ]
          }
        },
        methods: {
          async draw() {
              const result = await oldPersonSelectByJob({}, 'POST');
              this.dataArr = result;
              const seriesArr = [];
              const titleArr = [];

              for(let i = 0; i < this.dataArr.length; i++) {
                  const d = this.dataArr[i];

                  seriesArr.push({
                      type: 'liquidFill',
                      data: [`${(parseInt(d.value) / 100).toFixed(2)}`],
                      radius: '40%',
                      center: [`${ 12.5 + i * 25 }%`, `40%`],
                      backgroundStyle: {
                        borderColor: this.colorArr[i].color1,
                        color: "#011065"
                      },
                      outline: {
                          show: false
                      },
                      waveAnimation: false, // 禁止左右波动
                      label: {
                          normal: {
                              position: ['50%', '50%'],
                              textStyle: {
                                  fontSize: this.fontSize(0.2),
                                  color: this.colorArr[i].color1
                              },
                              formatter: `${ d.value }`
                          }
                      },
                      itemStyle: {
                          normal: {
                              color: new this.$echarts.graphic.LinearGradient(
                                  0, 0, 0, 1,
                                  [
                                      {offset: 0, color: this.colorArr[i].color1},
                                      {offset: 1, color: this.colorArr[i].color2}
                                  ]
                              )
                          }
                      }
                  });

                  titleArr.push({
                      text: d.label,
                      left: `${ 12.5 + i * 25 }%`,
                      top: `70%`,
                      textAlign: "center",
                      textStyle: {
                          fontSize: this.fontSize(0.18),
                          fontWeight: 'normal',
                          color: '#fff'
                      }
                  });
              }

              let myChart = this.$echarts.init(document.getElementById('qwe'));
              myChart.setOption({
                  title: titleArr,
                  xAxis: {
                      type: 'value',
                      max: 100,
                      splitLine: {
                          show: false
                      },
                      axisLine: {
                          show: false
                      },
                      axisLabel: {
                          show: false
                      },
                      axisTick: {
                          show: false
                      }
                  },
                  yAxis: {
                      type: 'category',
                      splitLine: {
                          show: false
                      },
                      axisLine: {
                          show: false
                      },
                      axisLabel: {
                          show: false
                      },
                      axisTick: {
                          show: false
                      }
                  },
                  series: seriesArr
              });
          },
          fontSize(res) {
            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            if (!clientWidth) return;
            let fontSize = 100 * (clientWidth / 1920);
            return res * fontSize;

          }
        },
        watch: {
            data() {
                this.myChart.destroy();
                this.draw();
            }
        },
        mounted() {
            this.draw();
        }
    }
</script>

<style scoped>

</style>