前端人必看!Vue3 超神可视化大屏，用

1.数据可视化组件库

在数据可视化领域有很多热门的组件库。 例如：

今天要介绍的 ECharts 是当下非常热门的可视化组件库之一。

2.Echarts 介绍

ECharts 是由百度团队开源的前端组件库。

接下来给大家讲一下如何在 Vue3 项目中安装使用 vue-echarts 。

3.ECharts 与 vue-echarts 的区别和联系

vue-echarts 组件库是在 ECharts 的基础之上进行了封装，非常适合 Vue 项目。

它和 echarts 的功能、使用方式基本一致。支持各种图表，也是通过配置 option 去调整图表样式。

它和 Echarts 的不同之处如下所示：

所以 Vue 项目中建议使用 vue-echarts 组件开发可视化大屏。

4.Vue3 项目中安装使用 vue-echarts

1.安装 vue-echarts

因为 vue-echarts 对 echarts 进行了封装，所以安装 vue-echarts 的同时要安装 echarts。

npm install echarts vue-echarts

2.main.js 中注册组件

这里建议按需引入 Echarts 的组件，因为可以大大减少项目的代码体积。

main.js

import { createApp } from 'vue'
import App from './App.vue'
import ECharts from 'vue-echarts' // vue-echarts
import { use } from 'echarts/core' // echarts 核心
import { CanvasRenderer } from 'echarts/renderers'// 渲染器
import { BarChart, LineChart, PieChart } from 'echarts/charts' // 图表
import {
    GridComponent,
    TooltipComponent,
    LegendComponent,
    TitleComponent
} from 'echarts/components' // echarts 组件

// 按需注册
use([
    CanvasRenderer,
    BarChart,
    LineChart,
    PieChart,
    GridComponent,
    TooltipComponent,
    LegendComponent,
    TitleComponent
]);
const app = createApp(App)
app.component('v-chart', ECharts)
app.mount("#app")

5.Vue 组件中使用 vue-echarts

注意：如果使用 div 或者其他布局组件 包裹 v-chart，一定要设置高度！！！！

使用案例：

  <div class="chart-container">
    <el-row style="height: 100%; padding: 20px">
      <el-col :span="12">
         基础用法 
        <v-chart :option="chartOption" autoresize @click="handleChartClick" />
      el-col>
      <el-col :span="12">
        <v-chart :option="initPieOption" autoresize @click="handlePieClick" />
      el-col>
    el-row>
  div>
</template>