MZbigScreen/src/components/PatrolmanStatistics/6.vue

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

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

    export default {
        //老年人精神状态
        name: "OldPersonMentality",
        data() {
          return {
            dataArr: [],
            colorArr: ['#238aff','#ff0','#0f0'],
            myChart: null
          }
        },
        methods: {
          async draw() {
              const result = await oldPersonMind({}, 'POST');
              this.dataArr = result;

              const seriesArr = [];

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

                  const imgArr = new Array(this.dataArr.length).fill({});
                  imgArr[i] = { value: parseInt(d.value) };

                  seriesArr.push({
                      type: 'pictorialBar',
                      barWidth: 40,
                      symbol: `image://${require('../../assets/PatrolmanStatistics/sjx-' + i + '.png')}`,
                      itemStyle: {
                          normal: {
                              color: (params) => {
                                  return this.colorArr[params.dataIndex];
                              }
                          }
                      },
                      label: {
                          show: true,
                          position: 'top',
                          textStyle: {
                              fontSize: 18
                          },
                          fontWeight: 'bold',
                          offset: [0, 0],
                          formatter: '{c}%'
                      },
                      data: imgArr
                  });
              }

              this.myChart = this.$echarts.init(document.getElementById('myChart66'));
              this.myChart.setOption({
                  xAxis: {
                      type: 'category',
                      data: this.dataArr.map((item) => item.label ),
                      splitLine: {
                          show: false
                      },
                      axisLine: {
                          show: false
                      },
                      axisLabel: {
                          show: true,
                          color: '#fff',
                          fontWeight: 'bold',
                          fontSize: 15
                      },
                      axisTick: {
                          show: false
                      }
                  },
                  yAxis: {
                      type: 'value',
                      splitLine: {
                          show: false
                      },
                      axisLine: {
                          show: false
                      },
                      axisLabel: {
                          show: false
                      },
                      axisTick: {
                          show: false
                      }
                  },
                  series: seriesArr
              });
          }
        },
        watch: {
            data() {
                this.myChart.destroy();
                this.draw();
            }
        },
        mounted() {
            this.draw();
        }
    }
</script>

<style scoped>

</style>