echarts的引用

1. 通过 npm 获取 echarts；

 npm install echarts --save；

2. 通过 CDN 引入；

 通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script>
</head>
</html>

vue3的引用：

1.通过 CDN：

<script src="https://unpkg.com/vue@next"></script>

2.脚手架 Vite：

npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3

3.脚手架 vue-cli：

npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3

在打包环境引用echarts

npm install echarts --save

// 在打包环境引用echarts
import * as echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({title: {text: 'ECharts 入门示例'},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]
});

上面的代码会引入所有 ECharts 中所有的图表和组件，但是假如你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {BarChart
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {TitleComponent,TooltipComponent,GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {CanvasRenderer
} from 'echarts/renderers';// 注册必须的组件
echarts.use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({...
});

在 TypeScript 中按需引入

对于使用了 TypeScript 来开发 ECharts 的开发者，我们提供了类型接口来组合出最小的EChartsOption类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。

// 在 TypeScript 中按需引入
import * as echarts from 'echarts/core';
import {BarChart,// 系列类型的定义后缀都为 SeriesOptionBarSeriesOption,LineChart,LineSeriesOption
} from 'echarts/charts';
import {TitleComponent,// 组件类型的定义后缀都为 ComponentOptionTitleComponentOption,GridComponent,GridComponentOption
} from 'echarts/components';
import {CanvasRenderer
} from 'echarts/renderers';// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption
>;// 注册必须的组件
echarts.use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);var option: ECOption = {...
}

在vue3中的引用：

使用如下命令通过 npm 安装 EChartsnpm install echarts --save

在项目中的 main.js文件中加入：

// 引用echarts
import * as echarts from 'echarts'
......
const app = createApp(App).mount('#id');
app.config.globalProperties.$echarts = echarts;//之后你可以在组件中调用
this.$echarts.init(document.getElementById('chart-id'))

其他写法也可以，只是我这么写，调的时候this.$echarts就可以，个人写法而已。

echarts与vue3的结合相关推荐

【Echarts】在Vue中使用Echarts
在Vue中使用Echarts 引入第三方库vue-echarts vue-echarts安装与使用 vue2中使用Echarts vue-echarts安装 vue2中使用Echarts vue3中使 ...
echarts is not defined
关于echarts is not defined 在vue中使用echarts的柱状图时遇到echarts is not defined 可能是因为路径的问题解决办法: 1 把 color: new ...
Vue 项目前端响应式布局及框架搭建
Vue 项目前端响应式布局及框架搭建一.flexible 插件 1.引用 flexible 插件 2.修改 flexible 默认配置 3.展示效果二.cssrem 插件 (px -> re ...
【Vue】Vue 项目前端响应式布局及框架搭建
文章目录 Vue 项目前端响应式布局及框架搭建一.项目基本结构二.项目分辨率响应式创建 1.flexible.js 2.引用 flexible 插件 3.修改 flexible 默认配置 4.cs ...
echarts vue 柱状图实例_「源码学习」适用于 Vue3 的 ECharts 包装组件
距离 Vue3 发布已经有近一周的时间,不知道大家源码都学习的怎么样了呢?今天 Gitee 为开发者们推荐一个新的学习资源,就是下面要介绍的这个同时适用于 Vue2 和 Vue3 的 EChatrts ...
Vue3+Cli4 中使用 Echarts 5
文章目录前言一.按需引入二.全局引入三.4小时血泪史 1.第一个困难 2.第二轮太阳总结前言最近在做这个项目,这也是驱使我探求Vue3和Echarts结合方法的原因,虽然还没做完,我挑一 ...
Vue3 Echarts散点图+高德地图+卫星地图（一）——获取高德地图API
前言:在开发的过程中,对于Vue3的情况下,对于Echarts地图的文章操作很少,并且官方不通俗易懂,所以在此进行记录探索过程.还是一如既往贴近直接C/V操作,如果对于Echarts基本配置不会的同学 ...
不习惯的 Vue3 起步六の Echarts绘制下钻地图
序看过一些可视化大屏展示地图的例子,准备动手做做. 既然要开始比制作,那么先把目标定好,做一个展示中国城市的下钻地图使用: Vue3 Vite Typescript echarts 实现效果: 准 ...
在vue3.0中安装并使用echarts
(vue3.0安装并使用echarts) 1. 安装echarts npm install echarts --save 2. main.js import { createApp } from 'v ...

echarts与vue3的结合

echarts的引用

1. 通过 npm 获取 echarts；

2. 通过 CDN 引入；

vue3的引用：

1.通过 CDN：

2.脚手架 Vite：

3.脚手架 vue-cli：

在打包环境引用echarts

在 TypeScript 中按需引入

在vue3中的引用：

其他写法也可以，只是我这么写，调的时候this.$echarts就可以，个人写法而已。

echarts与vue3的结合相关推荐

最新文章

热门文章