Echart通用模板

Echarts中所有数据的通用模板
只需要将数据添加至

  myChart.setOption(
      //放入Echart数据对象
    )

<template>
  <div :id="id" class="chart" />
</template>

<script>
// 引入基本模板
const echarts = require('echarts')
// 必须要引入的词云包 如果使用词云则需要解开以下注解
// import 'echarts-wordcloud';
export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    id: {
      type: String,
      default: 'id'
    }
  },
  watch: {
    data: {
      deep: true, // 深度监听
      handler() {
        this.initData()
      }
    }
  },
  created() {
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 初始化数据
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(this.id))
      // 绘制图表
      myChart.setOption(
        // 放入Echart数据对象
        }
      )
    }
  }
}
</script>
<style scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>