vue3 echarts插件推荐

在Vue3中，推荐使用vue-echarts插件来集成echarts。该插件可以轻松地在Vue组件中使用echarts，并提供了一种简单的方式来管理和配置echarts实例。

安装vue-echarts插件的步骤如下：
1. 在终端中运行以下命令来安装vue-echarts：

npm install vue-echarts

2. 在main.js中导入echarts和vue-echarts：

import { createApp } from 'vue'
import App from './App.vue'
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'

const app = createApp(App)
app.component('v-chart', ECharts)
app.mount('#app')

3. 在组件中使用v-chart标签，并通过options属性来传递echarts的配置项和数据：

<template>
  <v-chart :options="chartOptions" style="width: 1200px; height: 500px"></v-chart>
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
};
</script>

通过以上步骤，你就可以在Vue3项目中方便地使用vue-echarts插件来集成echarts了。此插件封装了echarts的常用功能，使得echarts在Vue3中更易于管理和使用。