echarts折线图封装循环使用

echarts普通折线图无法循环使用 对其封装使其可与循环使用

<template>
  <div>
    <div :id="id" :style="'width: 100%; height:' + customerHeight + 'px'"></div>
  </div>
</template>

<script>
export default {
  name: "lineEcharts",
  props: {
    id: {
      type: String,
      //这边id你自己可以给一个随机的 
      default: "123",
      // default() {
      //   return "line" + `(new Date().toLocaleString())`;
      // },
    },
    // 折线图高度
    customerHeight: {
      type: Number,
      default: 400,
    },
    // 是否为多条折线 小图例是否需要
    multipleLine: {
      type: Boolean,
      default: false,
    },
    // 折线数据
    lineData: {
      type: Object,
      default: () => {},
    },
    // 线条颜色
    linecolor: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      lineStyle: {
        color: "#5968F5",
        borderColor: "rgba(89, 104, 245, 1)",
        shadowBlur: 2,
        normal: {
          color: "#5968F5",
        },
      },
      // x轴y轴字体样式
      axisLabel: {
        show: true,
        interval: 0,
        color: "#fff",
      },
      // axisLine
      axisLine: {
        onZero: false,
        lineStyle: {
          color: "#fff",
        },
      },
      //      // x轴网格线颜色
      splitLine: {
        show: true,
        lineStyle: {
          background: "#FFFFFF",
          opacity: 0.05,
        },
      },
      lineSeries: {
        type: "line",
        smooth: true,
        symbolSize: "5", //折点样式
      },
      optionEcharts: {
        legend: {
          show: false,
          data: [],
          textStyle: {
            color: "#ffffff",
          },
          right: "10%",
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {},
          axisLine: {},
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          type: "value",
          name: "g/c㎡",
          axisLabel: {},
          nameTextStyle: {
            color: "#fff",
          },
          //刻度线
          axisTick: {
            show: false,
          },
          //
          axisLine: {},
          // x轴网格线颜色
          splitLine: {},
        },
        series: [],
      },
    };
  },

  components: {},
  computed: {},
  mounted() {
  //此处是博主样式需求，为了减少重写，单独复制 其实也挺多的 哈哈哈  
  //这边都是样式 不喜欢的可以直接写到数据里面
    this.optionEcharts.xAxis.axisLine = this.axisLine;
    this.optionEcharts.xAxis.axisLabel = this.axisLabel;
    this.optionEcharts.yAxis.axisLine = this.axisLine;
    this.optionEcharts.yAxis.axisLabel = this.axisLabel;
    this.optionEcharts.yAxis.splitLine = this.splitLine;
    //处理数据
    this.myechartsData();
    //增加折线图
    this.concentrationPh();
  },
  methods: {
    myechartsData() {
      this.optionEcharts.legend.show = this.multipleLine;
      this.optionEcharts.yAxis.name = this.lineData.unit;
      this.optionEcharts.xAxis.data = this.lineData.xAxis;
      this.lineData.series.forEach((item, index) => {
        //  legend 图例
        this.optionEcharts.legend.data.push(item.name);
        this.optionEcharts.series.push({
          name: item.name,
          data: item.data,
          type: "line",
          smooth: true,
          color: this.linecolor[index],
          symbolSize: "5", //折点样式
        });
      });
    },
    concentrationPh() {
      let curvePHChart = this.$echarts.init(document.getElementById(this.id));
      curvePHChart.setOption(this.optionEcharts);
    },
  },
};
</script>
<style lang='less' scoped>
</style>

//第一步引入 
import lineEcharts from "@/components/lineEcharts/index.vue"
export default {
  //注册
  components: { lineEcharts },
  data() {
    return {
         lineData: {
            // x轴数据 
            xAxis: ["789", "96", "2-15", "2-16", "2-17", "2-18", "2-19"],
            series: [
              {
                // 折线颜色
                name: "测试速度",
                  // 第一个折线数据
                data: [820, 932, 901, 934, 1290, 1330, 1320],
              },
              {
                name: "ph值",
                  // 第二个折线数据
                data: [720, 832, 1301, 1000, 620, 650, 920],
              },
            ],
            // 单位 y轴上面的单位
            unit: "g/c㎡",
          }，
          //线条颜色 两条就两个颜色  一条就一个 以数组形式传递
           linecolor: ["#5968F5", "#25D079"],
           //折线图是否需要legend  小图例  true 有  false 无
           multipleLine:false
       }
  	}

};
//使用使用 此处id必 
//可以使用v-for 进行循环
<lineEcharts :id="" :lineData="lineData" :linecolor="linecolor" :multipleLine='true'>
        </lineEcharts>