Vue-ECharts vue3 折线图

首先，你需要安装 Vue-ECharts 和 ECharts：

npm install echarts vue-echarts@5.1.1

然后，在你需要使用折线图的组件中引入 ECharts 和 Vue-ECharts：

import * as echarts from 'echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { VueECharts } from 'vue-echarts';

use([CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent]);

export default {
  components: {
    'v-chart': VueECharts,
  },
  data() {
    return {
      chartData: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line',
            smooth: true,
          },
        ],
      },
    };
  },
  mounted() {
    echarts.registerTheme('my_theme', {
      // 自定义主题
    });
  },
};

最后，在模板中添加 `v-chart` 组件，使用 `:options` 属性将数据传递给折线图：

<template>
  <div>
    <v-chart :options="chartData" theme="my_theme" />
  </div>
</template>