前言

echart是前端开发中经常会使用到的绘制图表的js库，echart使用json配置的方式确实很简单易用。

但在实际项目中，系统首页或统计页面中涉及到大量图表，代码中也充斥着大量json代码，看起来很不优雅，这里分享自己在vue项目中echart的使用方式，

使用的echart 版本: 5.0

echart 5.0中，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

设计的原则：

• 封装一个通用的echart-vue基础组件，实现包括loading动画，数据预加载等等；
• 根据项目特点，封装常用的echart各种类型图表的option配置

具体代码：

//echart组件
<template>
  <div class="bar-chart" :id="id" :style="style"></div>
</template>

<script>
import { getUId } from '@/util/uuid' // 随机生成uuid

export default {
  props: {
    chartTitle: {
      type: String,
      default: ''
    },
    isLoading: {
      type: Boolean,
      default: true
    },
    option: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      chart: undefined,
      id: undefined
    }
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  created() {
    this.id = getUId()
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.id))
    this.chart.setOption(this.option)
  },
  methods: {
      // 更新echart配置项，如果参数是回调函数，显示loading动画
    async updateOption(argus) {
      if (typeof argus === 'function') {
        if (this.isLoading) {
          this.chart.showLoading()
        }
        const option = await argus()
        this.chart.setOption(option)
      } else {
        this.chart.setOption(argus)
      }
    }
  }
}
</script>

<style scoped>
</style>

// 柱状图默认配置项
export const BARCHART_OPTION = {
  title: {
    text: '---',
    subtext: '--',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar'
  }]
}

// vue页面中使用
<template>
      <Echart ref="chart" :chart-title='' class="chart" :option="Option" :style="{width:'100%',height:'380px'}"/>
</template>
<script>
import Echart from '@/components/echart/index'
import { BARCHART_OPTION } from '@/components/echart/comp/echart-default-option'

export default {
  name: 'StatisWindow',
  components: { Echart },
  data() {
    return {
      option: Object.assign({}, BARCHART_OPTION),
    }
  },
  mounted() {
    this.$refs.chart.updateOption({
        //具体配置项
    })
}