echarts-柱状图/曲线图封装

遇到的问题
当一个页面引入多个组件时, 页面只渲染一个canvas
原因
页面渲染的canvas的id相同
解决办法
封装组件的id改为ref

<template>
  <div class="line1">
    <div ref="line1" style="width:100%;height:240px"></div>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";

import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/markPoint";
import "echarts/lib/component/markLine";
import "echarts/lib/component/tooltip";
export default {
  mounted() {
    this.initData();
  },
  props: {
    dataList: {
      type: Object,
      default: {}
    }
  },
  methods: {
    initData() {
      //  使用ref而不是id, 当一个页面引入多个组件时, 避免了echarts的id重复,页面只渲染一个图表的问题
      this.myChart = echarts.init(this.$refs.line1);
      let _this = this;
      //   const colors = ["#5793f3", "#675bba"];
      const option = {
        color: "#409EFF",
        title: {
          text: this.dataList.text,
          subtext: ""
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // data: this.dataList.legendData,
          //   selected: {
          //     水分: this.selectFlag,
          //     颗粒度: !this.selectFlag
          //   }
        },
        toolbox: {
          show: false,
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            magicType: { type: ["bar", "line"] },
            restore: {}
          }
        },
        // grid: {
        //   right: "20%" // 距离容器右侧的距离
        // },
        xAxis: {
          type: "category",
          name: this.dataList.xUnit,
          // boundaryGap: false, // // 坐标轴两边留白
          axisLine: {
            lineStyle: {
              color: "#666"
            }
          },
          axisTick: { // // 是否显示坐标轴刻度
            show: false
          },
          data: this.dataList.xData,
          splitLine: { show: false } // 去除网格线
        },
        yAxis: {
          type: "value",
          name: this.dataList.yUnit,
          position: "left",
          axisLine: {
            lineStyle: {
              color: "#666"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: "{value}"
          },
          splitLine: { show: true } // 去除网格线
        },
        series: [
          {
            // name: "水分",
            type: this.dataList.type,
            smooth: true,
            data: this.dataList.yData
            // yAxisIndex: 1,
            // markPoint: {
            //   data: [
            //     { type: "max", name: "最大值" },
            //     { type: "min", name: "最小值" }
            //   ]
            // }
          }
        ]
      };
      // console.log("this.myChart: ", this.myChart);
      this.myChart.setOption(option);
      // 点击切换图表
      //   this.myChart.on("legendselectchanged", function(params) {
      //     let option = this.getOption();
      //     let select_key = Object.keys(params.selected);
      //     if (!params.selected[params.name]) {
      //       select_key.map(res => {
      //         option.legend[0].selected[res] = !params.selected[res];
      //       });
      //     } else {
      //       select_key.map(res => {
      //         option.legend[0].selected[res] = false;
      //       });
      //       option.legend[0].selected[params.name] = true;
      //     }
      //     this.setOption(option);
      //     _this.$emit("legendselectchanged", params);
      //   });
    }
  },
  watch: {
    dataList: function() {
      // console.log('data: ', this.dataList)
      this.initData();
    }
  }
};
</script>

<style lang="scss" scoped></style>