vue 中Echart的简单使用

公司有图表需求，简单记录一下echart使用方法。

把Echart稍微简单封装成一个组件

<template>
  <div class="echarts-base">
    <div :id="echartsData.id" :style="echartsData.style || defaultStyle"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    echartsData: {
      type: Object,
      default: () => {
        return {
          id: '',
          style: null,
          option: null,
        }
      }
    }
  },
  data() {
    return {
      defaultStyle: {width: '300px', height: '300px'}
    }
  },
  created() {

  },
  mounted() {
    this.drawEchart()
  },
  methods: {
    // 获取echart节点
    getElementEchart() {
      return echarts.init(document.getElementById(this.echartsData.id))
    },
    // 绘制
    drawEchart() {
      let baseEchart = this.getElementEchart()
      baseEchart.setOption(this.echartsData.option)        
    },
    // 显示loading
    showLoading() {
      let baseEchart = this.getElementEchart()
      baseEchart.showLoading()
    },
    // 隐藏loading
    hiddenLoading() {
      let baseEchart = this.getElementEchart()
      baseEchart.hideLoading()
    }
  }
}
</script>

<style scoped lang="scss">
.echarts-base {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

调用组件

<template>
  <div id="app">
    <echarts-base ref="firstEchart" :echartsData="echartData"></echarts-base>
  </div>
</template>

<script>
import EchartsBase from "@/components/EchartsBase/index.vue"
export default {
  name: 'App',
  components: {EchartsBase},
  data() {
    return {
      echartData: {
        id: 'firstEchart',
        style: {width: '600px', height: '500px'},
        option: {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {
            data: []
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: []
            }
          ]
        }
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.$refs.firstEchart.showLoading()
      setTimeout(() => {
        let title = {
            text: '哈哈哈哈'
          }
        let xAxisData = ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '帽子', '军大衣']
        let seriesData = [
          {
            name: '销量',
            type: 'bar',
            data: [10, 20, 30, 40, 50 , 60 ,70, 15]
          }
        ]
        this.$set(this.echartData.option, 'series', seriesData)
        this.$set(this.echartData.option.xAxis, 'data', xAxisData)
        this.$set(this.echartData.option, 'title', title)
        this.$refs.firstEchart.drawEchart()
        this.$refs.firstEchart.hiddenLoading()
      }, 2000);
    }
  }
}
</script>