手摸手带你在vue中封装echarts组件

<template>
  <div :id="testEchartsObj.id" style="width:100%;height:500px;background:#fff;"></div>
</template>
<script>
// 引入基本模板
let $echarts = require("echarts/lib/echarts");
// 引入图形组件
require("echarts/lib/chart/line");
// 引入其他组件
require("echarts/lib/component/title");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");

export default {
  name: "testEcharts",
  props: {
    testEchartsObj: {
      type: Object
    }
  },
  data() {
    return {
      myChart: ""
    };
  },
  methods: {
    initEcharts() {
      this.myChart = $echarts.init(
        document.getElementById(this.testEchartsObj.id)
      );
      this.myChart ? this.myChart.clear() : "";
      var option = {
        //可能你不需要名称，所以名称通过props的self属性动态渲染
        // title: {
        //   text: "折线图堆叠"
        // },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: []
      };
      this.myChart.setOption(option);
    },
    setEcharts() {
      var _this = this;
      //获取series对象
      var series_data = [];
      _this.nameArr.map((item, index) => {
        var obj = {};
        obj.name = item;
        obj.type = "line";
        obj.stack = "总量";
        obj.data = _this.y_data[index];
        // console.log(obj);
        series_data.push(obj);
      });
      //默认配置
      _this.myChart.setOption({
        xAxis: {
          data: _this.x_data
        },
        legend: {
          data: _this.nameArr
        },
        series: series_data
      });
      //自定义配置
      if (JSON.stringify(_this.self) !== "{}") {
        // console.log(_this.self);
        _this.myChart.setOption(_this.self);
      }
    }
  },
  mounted() {
    this.initEcharts();
    this.setEcharts();
    // console.log(this.x_data, this.y_data, this.nameArr);
    var that = this;
    //监听窗口resize事件
    window.addEventListener("resize", function() {
      that.myChart ? that.myChart.resize() : "";
    });
  },
  //计算属性监听所有props里面的具体属性
  computed: {
    x_data: function() {
      return this.testEchartsObj.x_data;
    },
    y_data: function() {
      return this.testEchartsObj.y_data;
    },
    nameArr: function() {
      return this.testEchartsObj.nameArr;
    },
    self: function() {
      return this.testEchartsObj.self;
    }
  },
  //通过watch整个testEchartsObj使得数据变化后重新渲染echarts图
  watch: {
    testEchartsObj: {
      handler(newValue, oldValue) {
        // console.log(newValue); //props参数
        this.setEcharts();
      },
      deep: true
    }
  }
};
</script>

<template>
  <div>
    <test-echarts :testEchartsObj="testEchartsObj"></test-echarts>
    <button @click="testEchartsObj.self.xAxis.axisLabel.interval+=1">增大inter_val</button>
  </div>
</template>

<script>
export default {
  components: {
    testEcharts: () => import("./testEcharts")
  },
  data() {
    return {
      testEchartsObj: {
        id: "test-echarts",
        nameArr: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        x_data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        y_data: [
          [120, 132, 101, 134, 90, 230, 210],
          [120, 132, 101, 134, 90, 230, 210],
          [150, 232, 201, 154, 190, 330, 410],
          [320, 332, 301, 334, 390, 330, 320],
          [820, 932, 901, 934, 1290, 1330, 1320]
        ],
        //自定义配置
        self: {
          title: {
            text: "自定义名字折线图堆叠"
          },
          xAxis: {
            axisLabel: {
              interval: 0
            }
          }
        }
      }
    };
  }
};
</script>