mzBigScreen/src/components/oldStatistics/7.vue

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

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

    export default {
        //老年人探访频次统计
        name: "OldPersonFrequencyCount",
        data() {
          return {
            dataArr: [],
            colorArr: [ 'rgba(0, 124, 255, 0.6)', 'rgba(129, 212, 255, 0.6)' ],
            myChart: null
          }
        },
        methods: {
          async draw() {
              const result = await oldPersonVisitFrequency({}, 'POST');
              this.dataArr = result;

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

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

                  const bgArr = new Array(arr.length).fill({});
                  bgArr[i] = { value: maxValue, symbolPosition: 'start' };
                  seriesArr.push({
                      type: 'pictorialBar',
                      symbol: `image://${require("../../assets/oldStatistics/x.png")}`,
                      symbolSize: ['100%', 15],
                      symbolOffset: [0, 0],
                      data: bgArr,
                      label: {
                          show: true,
                          position: 'right',
                          offset: [10, 2],
                          distance: 0,
                          color: 'rgba(0, 124, 255, 1)',
                          fontSize: this.fontSize(0.15),
                          formatter: `${d.value}人`
                      },
                      z: 2
                  });

                  const imgArr = new Array(arr.length).fill({});
                  imgArr[i] = { value: d.value, symbolPosition: 'start' };
                  seriesArr.push({
                      type: 'pictorialBar',
                      symbol: 'rect',
                      symbolSize: ['100%', 15],
                      itemStyle: {
                          normal: {
                              color: () => {
                                  return new this.$echarts.graphic.LinearGradient(
                                      0, 0, 1, 0,
                                      [
                                          {offset: 0, color: this.colorArr[0]},
                                          {offset: 1, color: this.colorArr[1]}
                                      ]
                                  )
                              }
                          }
                      },
                      data: imgArr,
                      z: 3
                  });
              }

              if(this.myChart != null) {
                  this.myChart.clear();
              }

              this.myChart = this.$echarts.init(document.getElementById('myChartold7'));
              this.myChart.setOption({
                  grid: {
                      top: '15%',
                      bottom: '15%',
                      right: '18%',
                      left: '4%',
                      containLabel: true
                  },
                  xAxis: {
                      type: 'value',
                      max: maxValue,
                      axisTick: {
                          show: false
                      },
                      axisLabel: {
                          show: false
                      },
                      axisLine: {
                          show: false
                      },
                      splitLine: {
                          show: false
                      }
                  },
                  yAxis: {
                      type: 'category',
                      data: arr.map((item) => item.label),
                      axisTick: {
                          show: false
                      },
                      axisLabel: {
                          show: true,
                          color: '#fff',
                          fontWeight: 'bold',
                          fontSize: this.fontSize(0.16),

                      },
                      axisLine: {
                          show: true,
                          lineStyle: {
                              color: '#fff'
                          }
                      }
                  },
                  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;

          }
        },
        mounted() {
          this.draw();
        }
    }
</script>

<style scoped>

</style>