Echarts Vue组件 基本通用组件

1. 通用组件，基本设置

<template>
  <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart">
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  props: {
    className: {
      type: String,
      default: 'my-echarts'
    },
    id: {
      type: String,
      default: 'my-echart'
    },
    width: {
      type: String,
      default: '98%'
    },
    height: {
      type: String,
      default: '100%'
    },
    datalists:{
        requried:true 
    }
  },
  data() {
    return {
      chart: null
    } },
  watch: {
      datalists: {
        handler: function (val, oldVal) {
          this.initChart();
        },
        deep: true
      }
    },
  mounted (){
    this.initChart(); // 初始化echarts表格
    let _this=this;
   window.addEventListener("resize",function (event) {   //改变窗口大小，echarts图表响应式改变
         _this.chart.resize();
    })
  },

  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.myEchart);
      // 把配置和数据放这里
      this.chart.setOption(this.datalists)
    },
   
  }
}
</script>

2. 应用

• 2.1 引用

 import Echart from './Echart'
import echarts from 'echarts'
export default {
    name:'Home',
    components: {
        Echart
  },

• 2.2 在页面中应用

<Echart v-bind:datalists="datalists"></Echart>

2.3 设置数据给datalists,数据一般是computed