Vue：折线图绘制组件，以及往组件中传值

作者：CSDN @ _乐多_

本文记录了Vue开发中，使用echarts绘制折线图，并实现了折线图封装，且实现了往组件中传值的操作。

---

---

一、折线图组件

<template>
  <div class="line-chart-container">
    <div ref="lineChart" style="height: 400px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "LineChart",
  props: {
    chartData: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    this.renderLineChart();
  },
  methods: {
    renderLineChart() {
      const chartDom = this.$refs.lineChart;
      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: this.chartData.map((dataPoint) => dataPoint.name),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.chartData.map((dataPoint) => dataPoint.value),
            type: "line",
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>

<style>
.line-chart-container {
  width: 100%;
  height: 100%;
}
</style>

二、应用组件

在主“App.vue”文件中，您可以使用“LineChart”组件并将数据传递给它，如下所示：

使用:chartData="lineChartData"传递数据

<template>
  <div id="app">
    <LineChart :chartData="lineChartData" />
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "App",
  components: {
    LineChart: () => import("./components/LineChart.vue"),
  },
  data() {
    return {
      lineChartData: [
        { name: "January", value: 50 },
        { name: "February", value: 80 },
        { name: "March", value: 30 },
        { name: "April", value: 70 },
        { name: "May", value: 60 },
        { name: "June", value: 90 },
        // Add more data points here...
      ],
    };
  },
};
</script>

声明：
本人作为一名作者，非常重视自己的作品和知识产权。在此声明，本人的所有原创文章均受版权法保护，未经本人授权，任何人不得擅自公开发布。
本人的文章已经在一些知名平台进行了付费发布，希望各位读者能够尊重知识产权，不要进行侵权行为。任何未经本人授权而将付费文章免费或者付费（包含商用）发布在互联网上的行为，都将视为侵犯本人的版权，本人保留追究法律责任的权利。
谢谢各位读者对本人文章的关注和支持！