echarts bar 基础组件

<template>
  <div class="chart" :style="{ height: height + 'px', width: width }"></div>
</template>
<script>
import echarts from 'echarts'
export default {
  props: {
    barObj: {
      type: Object
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '250'
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    let _this = this
    _this.init()
    window.addEventListener('resize', function() {
     _this.myChart? _this.myChart.resize():''
    })
  },
  beforeDestroy() {
    if (!this.myChart) {
      return
    }
    this.myChart.dispose()
    this.myChart = null
  },
  watch: {
    barObj: {
      deep: true, //深度监听设置为 true
      handler: function() {
        let _this = this
        _this.init()
        window.addEventListener('resize', function() {
          _this.myChart? _this.myChart.resize():''
        })
      }
    }
  },
  methods: {
    init() {
      this.drawLine()
    },
    drawLine() {
      let self = this
      self.myChart = echarts.init(this.$el)
      self.myChart.clear()
      let data = self.barObj
      self.myChart.setOption({
        grid: {
          left: '0%',
          right: '10%',
          top: '0%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          show: 'true',
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          data: data.yData,
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            color:'#fff',
          }
        },
        xAxis: [
          {
            axisTick: {
              show: false
            },
            type: 'value',
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 12,
            label: {
              normal: {
                show: true,
                position: 'right',
                textStyle: {
                  fontSize: 14,
                  fontWeight: 'bold'
                }
              }
            },
            color: function(params) {
              return data.color[params.dataIndex]
            },
            data: data.data
          }
        ]
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>

数据
barObj: {
        color: ["#ffab01", "#ccdcdb", "#ae8d6d", "#44b7f7", "#44b7f7"],
        yData: ["不动产权属证明查询", "海洋预报", "地灾气象预报", "自然资源网上交易查询", "征地信息公开查询", "标准地信息查询", ]
        data: [
      {
        name: "不动产权属证明查询",
        value: 2059781
      },
      {
        name: "海洋预报",
        value: 29805
      },
      {
        name: "地灾气象预报",
        value: 17366
      },
      {
        name: "自然资源网上交易查询",
        value: 13636
      },
      {
        name: "征地信息公开查询",
        value: 4407
      },
      {
        name: "标准地信息查询",
        value: 1739
      },
    ]
      }