前言： ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

1、安装

（1）安装echarts包

npm install echarts --save

cnpm install echarts --save

（2）安装vue echarts工具包

npm install echarts vue-echarts

cnpm install echarts vue-echarts

2、挂载

（1）按需引入的挂载方式

本文选择vue3，以下是挂载/注册方式：

import { createApp } from 'vue'

import ECharts from 'vue-echarts'

import { use } from "echarts/core";

// 手动引入 ECharts 各模块来减小打包体积

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)

（2）全局引入的挂载方式

在main.js文件中

import { createApp } from 'vue'

import App from './App.vue'

import ECharts from 'vue-echarts' // 引入ECharts

import "echarts"; // 全局引入echarts

// 挂载ECharts 参数1:vue文件中挂载echarts的名字 参数2:挂载的组件

const app=createApp(App)

app.component('ECharts',ECharts)

app.mount('#app')

3、示例

3.1 情形一：一个页面中只使用1~2个ECharts图表

3.1 情形二：一个页面中使用了多个ECharts图表

注意：如果要在一个页面中使用多个ECharts图表，就会出现很多很多option和类名chart，容易混乱，所以最好把图表们封装成组件使用。

（1）组件

（2）vue文件中

（3）效果

可以根据自身情况对options内的数据进行调整

文章来源

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：