echarts在vue里面封装组件

echarts在vue里面封装组件

<!-- 柱状图组件 -->
<template>
  <div style="width: 100%; height: 100%" :id="chartid"></div>
</template>
    
<script>
export default {
  props: {
    //图表id
    chartid: {
      type: String,
    },
    yname: {
      type: String,
      default: "数量",
    },
    XAxisdata: {
      type: Array,
      default: [],
    },
    seriesData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      columnarEcharts: {},
    };
  },
  watch: {
    //检测数据变化更新图表
    seriesData: {
      handler(newVal, oldVal) {
        this.columnarEcharts.setOption(this.option, true);
      },
      deep: true,
    },
    option: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          if (this.columnarEcharts) {
            this.columnarEcharts.setOption(this.option, true);
          }
        });
      },
      deep: true,
    },
  },
  computed: {
    option() {
      return {
        xAxis: {
          type: "category",
          data: this.XAxisdata,
        },
        tooltip: {
          trigger: "item",
        },
        dataZoom: [
          {
            type: "slider",
            realtime: false,
            start: 0,
            end: 100,
            bottom: 0,
            height: 20,
          },
          {
            type: "inside",
            start: 0,
            end: 100,
            bottom: 0,
            height: 20,
          },
        ],
        yAxis: {
          type: "value",
          name: this.yname,
        },
        series: this.seriesData,
      };
    },
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
            this.columnarEcharts = this.$echarts.init(document.getElementById(that.chartid));
            this.columnarEcharts.setOption(this.option);
            window.addEventListener('resize', function () {
              that.columnarEcharts.resize();
            });
        });
  },
};
</script>