mzBigScreen/src/components/PatrolmanStatistics/9.vue

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

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

    export default {
        //老年人居住环境
        name: "OldPersonLiveCount",
        data() {
          return {
            dataArr: [],
            myChart: null
          }
        },
        methods: {
          async draw() {
              const result = await oldPersonLive({}, 'POST');
              this.dataArr = result;

              this.myChart = this.$echarts.init(document.getElementById('myChart9'));
              this.myChart.setOption({
                  grid:{
                      top:"15%",
                      left:"18%",
                      right:"5%",
                  },
                  xAxis: {
                      type: 'category',
                      boundaryGap: true,
                      data: this.dataArr.map((item) => {
                          return item.label;
                      }),
                      splitLine: {
                          show: false
                      },
                      axisLine: {
                          show: false,
                          lineStyle: {
                              color: '#fff'
                          }
                      },
                      axisLabel: {
                          show: true,
                          fontSize: this.fontSize(0.16)
                      },
                      axisTick: {
                          show: false
                      }
                  },
                  yAxis: {
                      type: 'value',
                      max: 100,
                      splitLine: {
                          show: false
                      },
                      axisLine: {
                          show: false,
                          lineStyle: {
                              color: '#fff'
                          }
                      },
                      axisTick: {
                          show: false
                      },
                      axisLabel: {
                          show: true,
                          formatter: '{value}%',
                          fontSize: this.fontSize(0.16)
                      }
                  },
                  series: [
                      {
                          type: 'line',
                          smooth: true,
                          areaStyle: {
                              color: {
                                  type: 'linear',
                                  x: 0,
                                  y: 0,
                                  x2: 0,
                                  y2: 1,
                                  colorStops: [{
                                      offset: 0, color: 'rgba(0, 144, 255, 0.2)' // 0% 处的颜色
                                  }, {
                                      offset: 1, color: 'rgba(215, 255, 255, 0.2)' // 100% 处的颜色
                                  }],
                                  global: false // 缺省为 false
                              }
                          },
                          symbol: `image://${require('../../assets/PatrolmanStatistics/y.png')}`,
                          symbolSize: [10, 10],
                          data: this.dataArr.map((item) => {
                              return parseFloat(item.value);
                          }),
                          label: {
                              show: true,
                              formatter: '{c}%',
                              color: '#fff',
                              fontSize: 12
                          },
                          itemStyle: {
                              color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                  offset: 0,
                                  color: '#96c2ff'
                              }, {
                                  offset: 1,
                                  color: '#0090ff'
                              }]),
                          },
                          lineStyle: {
                              width: 2
                          }
                      }
                  ]
              });
          },
          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>