echarts 折线组件

<template>
  <div class="lineChartsTemplate" :id="chartsId"></div>
</template>

<script>
export default {
  name: "lineChartsTemplate",
  components: {},
  props: {
    xData: {
      type: Array,
      default: () => [],
    },
    yData: {
      type: Array,
      default: () => [],
    },
    lineColor: {
      type: String,
      default: "#F1924E"
    },
    title: {
      type: String,
      default: "这是标题"
    },
    chartsId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      myChart: null
    };
  },
  methods: {
    initLineChartsTemplate() {
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
          borderColor: this.lineColor, // 边框颜色
        }, // 坐标轴指示器配置
        title: {
          text: this.title,
          left: 'center',
          top: "5%",
          textStyle: {
            color: "#000",
            fontSize: 14,
            align: 'center'
          },
        },
        textStyle: {
          color: "#333333", // xy轴的提示文字颜色，不包含背景刻度线
        },
        color: [this.lineColor],
        grid: {
          top: "20%",
          left: "50px",
          right: "20px",
          bottom: "35px",
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#333333",
                // width: 0,
                type: "solid",
              }, // x轴线的颜色以及宽度
            },
            // axisLabel: {
            //   show: true,
            //   textStyle: {
            //     color: "rgba(255, 255, 255, 0.3)",
            //   }
            // }, // x轴文字的配置
            splitLine: {
              show: false,
              lineStyle: {}, // 分割线配置
            },
            axisTick: {
              show: false,
            }, // x轴的刻度线
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#333333",
                opacity: 0.1,
              }, // 设置横向的线的颜色
            },
            axisLabel: {
              show: true,
              margin: 20,
              // textStyle: {
              //   color: "rgba(255, 255, 255, 0.3)",
              // }, // y轴的字体配置
            },
          },
        ],
        series: [
          {
            data: this.yData,
            type: "line",
            smooth: true,
          },
        ],
      };
      this.myChart = this.$echarts.init(
        document.getElementById(this.chartsId)
      );
      this.myChart.setOption(option);

      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
  created() {},
  async mounted() {
    await this.initLineChartsTemplate()
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  }
};
</script>

<style lang="scss" scoped>
.lineChartsTemplate {
  width: 100%;
  height: 100%;
}
</style>

父组件中使用

<div class="trendAnalysis-charts" v-if="!isShowTable">
      <div id="myChartBox1" class="charts">
        <lineChartsTemplate ref="lineChartsTemplate"
                            :chartsId="'charts1'"
                            :title="'平均数据'"
                            :lineColor="'#1492FF'"
                            :xData="[1, 2, 3, 4, 5 ,6 , 6,2]"
                            :yData="[12, 3, 23, 2, 1, 35, 21 ,6]"
        />
      </div>

      <div id="myChartBox2" class="charts">
        <lineChartsTemplate ref="lineChartsTemplate"
                            :chartsId="'charts2'"
                            :title="'行程时间'"
                            :xData="[1, 2, 3, 4, 5 ,6 , 6,2]"
                            :yData="[12, 3, 23, 14, 66, 35, 1 ,6]"
        />
      </div>

      <div id="myChartBox3" class="charts">
        <lineChartsTemplate ref="lineChartsTemplate"
                            :chartsId="'charts3'"
                            :title="'TTI（行程时间比）'"
                            :lineColor="'#1492FF'"
                            :xData="[1, 2, 3, 4, 5 ,6 , 6,2]"
                            :yData="[12, 3, 23, 125, 5, 35, 4 ,6]"
        />
      </div>

      <div id="myChartBox4" class="charts">
        <lineChartsTemplate ref="lineChartsTemplate"
                            :chartsId="'charts4'"
                            :title="'拥堵指数'"
                            :xData="[1, 2, 3, 4, 5 ,6 , 6,2]"
                            :yData="[12, 3, 23, 125, 66, 35, 123 ,6]"
        />
      </div>
    </div>


import lineChartsTemplate from './lineChartsTemplate'

  components: {
    lineChartsTemplate
  },
      
      
      // 直接替换 xData yData title chartsId lineColor 即可