Vue3 安装和使用 echarts

31 min read

要在Vue3项目中安装和使用echarts，需要先安装echarts和vue-echarts。

  1. 在项目的根目录下打开终端，运行以下命令来安装echarts：
npm install echarts --save
  1. 运行以下命令来安装vue-echarts：
npm install [email protected] --save
  1. 在main.js文件中引入echarts和vue-echarts，并配置它们：
import { createApp } from 'vue'
import App from './App.vue'
import ECharts from 'vue-echarts'

import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

const app = createApp(App)

app.component('v-chart', ECharts)

app.mount('#app')
  1. 在Vue组件中使用echarts，例如在App.vue文件中：
<template>
  <v-chart :options="chartOptions" style="width: 100%; height: 400px;"></v-chart>
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
      }
    }
  }
}
</script>

这样就可以在Vue3项目中安装和使用echarts了。在上面的例子中，我们通过配置chartOptions来定义echarts的图表配置，然后在模板中使用v-chart组件来展示图表。你可以根据自己的需要配置和使用echarts。