Echarts--柱状图封装使用

Echarts介绍

Echarts是一个使用 JavaScript 实现的开源可视化库，可以很方便的以多彩的形式展示数据，使人一目了然。关于具体的使用，如有兴趣的可以参见官网说明 Echarts详细说明文档

Echarts–柱状图封装使用

这里我仅介绍Echarts中的柱状图的使用，包括渐变柱状图，堆叠柱状图的使用。其实不管是渐变柱状图还是堆叠柱状图都是柱状图，只是在图的数据option里变得更加复杂一点。在这里我主要拿渐变柱状图和堆叠柱状图来说明

• 图的封装：首先是单独建一个Chart组件，做好基本的封装工作，代码如下

// 组件 Chart.vue
<template>
  <div :id="id" :style="chartStyle"></div>
</template>
<script>
export default {
   
  name: 'Chart',
  data () {
   
    return {
   
      chart: ''
    }
  },
  props: {
   
    id: {
   
      type: String
    },
    width: {
   
      type: String,
      default: '100%'
    },
    height: {
   
      type: String,
      default: '100%'
    },
    data: {
   
      type: Array
    },
    option: {
   
      type: Object
    }
  },
  computed: {
   
    chartStyle () {
   
      return {
   
        height: this.height,
        width: this.width
      }
    }
  },
  methods: {
   
    init () {
   
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.chart.setOption(this.option)
      window.addEventListener('resize', this.chart.resize) // 图表自适应
    }
  },
  mounted () {
   
    this.$nextTick(function () {
   
      this.init()
    })
  },
  watch: {
   
    // 观察option的变化
    option: {
   
      handler (newVal, oldVal) {
   
        if (this.chart) {
   
          if (newVal) {
   
            this.chart.setOption(newVal)
          } else {
   
            this.chart