MZbigScreen/src/components/PatrolmanStatistics/2.vue

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

<script>
    import { oldPersonSelectAuthAndLook } from '../../api'

    export default {
      name: "PatrolmanAuthenticationCount",
      data() {
        return {
          // dataArr: [
          //   { label: '党员', arr: [ { label: '认证', value: 1234 }, { label: '未认证', value: 4321 } ] },
          //   { label: '群众', arr: [ { label: '认证', value: 4567 }, { label: '未认证', value: 7654 } ] }
          // ],
          dataArr: [],
          colorArr: [
            { color1: '#FFA625', color2: '#FFD09C' },
            { color1: '#00FF0C', color2: '#B7FFE2' }
          ],
          myChart: null
        }
      },
      methods: {
        async draw() {
            const result = await oldPersonSelectAuthAndLook({}, 'POST');
            this.dataArr = result;
            const seriesArr = [];

            let maxValue = 0;
            for(let i = 0; i < this.dataArr.length; i++) {
                const d = this.dataArr[i];
                const arr = d.arr;
                for(let j = 0; j < arr.length; j++) {
                    if(maxValue < arr[j].value) {
                        maxValue = arr[j].value;
                    }
                }
            }

            const labelArr = this.dataArr[0].arr.map((item) => item.label).reverse();

            for(let i = 0; i < this.dataArr.length; i++) {
                const d = this.dataArr[i];
                seriesArr.push({
                    name: d.label,
                    type: 'bar',
                    barWidth: '20%',
                    data: [
                        {
                            value: d.arr[1].value,
                            itemStyle: {
                                normal: {
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        color: this.colorArr[i].color1
                                    }, {
                                        offset: 1,
                                        color: this.colorArr[i].color2
                                    }]),
                                    barBorderRadius: [0, 50, 50, 0]
                                }
                            },
                            label: {
                                show: true,
                                position: 'right',
                                color: this.colorArr[i].color1,
                                fontSize: 20
                            },
                        },
                        {
                            value: d.arr[0].value,
                            itemStyle: {
                                normal: {
                                    color:  new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        color: this.colorArr[i].color1
                                    }, {
                                        offset: 1,
                                        color: this.colorArr[i].color2
                                    }]),
                                    barBorderRadius: [0, 50, 50, 0]
                                }
                            },
                            label: {
                                show: true,
                                position: 'right',
                                color: this.colorArr[i].color1,
                                fontSize: 20
                            },
                        }
                    ]
                });

                const kkArr = new Array(this.dataArr.length).fill({});
                kkArr[i] = { value: 100, symbolPosition: 'start' };

                seriesArr.push({
                    type: 'pictorialBar',
                    symbol: `image://${require('../../assets/PatrolmanStatistics/label.png')}`,
                    symbolSize: [16, 50],
                    symbolOffset: [-20, 0],
                    data: kkArr,
                    label: {
                        show: true,
                        position: 'left',
                        offset: [-30, 0],
                        distance: 0,
                        color: '#fff',
                        fontSize: 16,
                        formatter: `${ labelArr[i] }`
                    },
                    z: 10
                });
            }
            this.myChart = this.$echarts.init(document.getElementById('ww'));
            this.myChart.setOption({
                color: [this.colorArr[0].color1, this.colorArr[0].color1, this.colorArr[1].color1],
                legend: {
                  data: ["党员", "群众"],
                  right: '4%',
                  top: '13%',
                  textStyle: {
                    color: "#fff"
                  },

                },
                grid: {
                    left: '20%',
                    right: '15%',
                    bottom: '10%',
                    height: '80%',
                   top:'20%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        max: maxValue,
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        nameTextStyle: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: seriesArr
            });
        }
      },
      watch: {
          data() {
              this.myChart.destroy();
              this.draw();
          }
      },
      mounted() {
          this.draw();
      }
    }
</script>

<style scoped>

</style>