lg_frontend/components/charts/AirRateCharts.vue

<!--空气质量变化趋势-->
<template>
  <div id="charts" ref="charts">

  </div>
</template>

<script>
import * as echarts from 'echarts'
import {EleResize} from '@/utils/esresize';

const lodash = require('lodash')
export default {
  name: 'AirRateCharts',
  props: {
    rateNum: {
      type: Number,
      default: 0
    },
    color: {
      type: Array,
      default: () => [
        '#FDBD00',
        '#00D5FF',
        '#1978E5'
      ]
    }
  },
  data() {
    return {}
  },
  watch: {
    rateNum: {
      deep: true,
      immediate: true,
      handler(value) {
        if (value) {
          this.$nextTick(() => {
            this.init()
          })
        }
      }
    }
  },
  mounted() {
  },

  methods: {
    init() {
      let myCharts = echarts.init(this.$refs.charts)
      let barCharts = this.$refs.charts
      let sexdata = [{
          value: this.rateNum,
          symbol: 'rect',
          symbolClip: true,
          symbolRepeat: true,
          symbolSize: [
            '40%', // 50% of the width of reference bar.
            "80%" // 100% of the height of reference bar.
          ]
        }]
      let option = {
        legend: {},
        //在坐标系内绘制
        grid: [{
          left: 10,
          bottom: 10,
          top: 10,
          right: 60
        }],
        //x 轴
        xAxis: {
          max: 100,
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
        },
        //y 轴
        yAxis: {
          data: ['a'],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        //展示层
        series: [
          //目标数据
          {
            type: 'pictorialBar',
            symbolBoundingData: 100,
            itemStyle: {
              normal: {
                color: 'rgba(76,184,255,1)'
              }
            },
            z: 20,
            data: sexdata
          },
          //背景数据
          {
            type: 'pictorialBar',
            symbolBoundingData: 100,
            z: 15,
            itemStyle: {
              normal: {
                color: '#1B2940'
              }
            },
            label: {
              show: true,
              position: 'right',
              distance: 16,
              color: '#fff',
              fontSize: 16,
              formatter(params) {
                return sexdata[0].value + " % "
              }
            },
            data: [{
              symbol: 'rect',
              value: 100,
              symbolClip: true,
              symbolRepeat: true,
              symbolSize: [
                '40%', // 50% of the width of reference bar.
                "80%" // 100% of the height of reference bar.
              ]
            }]
          }
        ]
      };

      myCharts.setOption(option)
      let listener = function () {
        myCharts.resize()
      }
      EleResize.on(barCharts, listener)
    }
  }
}
</script>

<style scoped lang="less">
#charts {
  height: 100%;
  width: 100%;
}
</style>