vue 封装echarts

<template>
  <div ref="bar_echarts" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  name: 'BarCharts',
  props: {
    seriesData: {
      type: Array
    }
  },
  data () {
    return {}
  },
  mounted () {
    this.showEcharts('', this.$refs.bar_echarts)
  },
  methods: {
    showEcharts (data, dom) {
      // let datalist = data
      let myChart = this.$echarts.init(dom)
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      option && myChart.setOption(option)
      // myChart.setOption({
      //   xAxis: {
      //     data: data
      //   },
      //   series: [
      //     {
      //       data: data
      //     }
      //   ]
      // })
    }
  },
  watch: {
    seriesData: function (newVal) {
      if (newVal) {
        // this.showEcharts(newVal)
      }
    }
  }
}
</script>

<style scoped>

</style>