Vue项目引入Echarts可视化图表库教程&踩坑

Apache ECharts是一个基于 JavaScript 的开源可视化图表库

官网入口

简单来说，Echarts就是用来做数据可视化的，将一些有关联的数据源以图表的方式呈现，不仅方便阅读，一目了然，还可以增加网页的美化效果，增加逼格。

那么，在Vue项目引入Echarts可视化图表库时，我们主要分为三步：

1.安装Echarts；

2.引入Echarts库；

3.使用Echarts创建一个条形图示例；

1.安装Echarts；

这里安装的是Echarts库以及针对于Vue打包好的Echarts库

npm install echarts vue-echarts

 注：有些npm版本过高或者过低的时候下载Echarts的过程中可能会报错，遇到这种问题可以在后面加上 --legacy-peer-deps试试！如下：

npm install echarts vue-echarts --legacy-peer-deps

2.引入Echarts库；

 2.1全局引入

//main.js

import "echarts"
import ECharts from 'vue-echarts'

Vue.component('v-chart', ECharts) //Vue.2
或者
app.component('v-chart', ECharts) //Vue.3

 2.2按需引入

由于Vue.2和Vue.3的语法规范有点不一样,所以Vue.2和Vue.3的引入方法也有点不一样，这里需要分开说：

        Vue.2

//main.js

import Vue from 'vue'
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'

import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);

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

new Vue(...)

        Vue.3

//main.js

import { createApp } from 'vue'
import ECharts from 'vue-echarts'
import { use } from "echarts/core";

import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);

const app = createApp(...)

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

app.mount(...)

3.使用Echarts创建一个条形图示例；

如图示例代码npm run serve之后，你就能看到如图条形图：

 此外，Apache ECharts官方还有许多各式各样好看的示例，只需要将示例代码copy到项目代码的option下{ ref }的对象值，稍稍修改自己想要的数据，就可以得到各种好看的图表！ 

Apache ECharts 示例官方入口

知识分享，持续更新，求关注不迷路~