ECharts用法及常用配置项详解（Vue环境）

目录

一、案例展示

二、ECharts 用法与常用属性介绍

1.在项目中引入 ECharts

2.绘制图表

3.常用配置项

三、案例完整代码 + 详细注释

一、案例展示

本例通过一个 echarts 图表的 demo 来熟悉图表的各属性；

此 demo 实现了图表数据的展示、缩放、全屏展示、拖拽以及自定义工具如图表切换等功能；效果如下：

二、ECharts 用法与常用属性介绍

1.在项目中引入 ECharts

（1）首先使用 npm下载安装 ECharts；

npm install echarts --save

（2）在项目的 main.js 文件中引入（此处为全局引入，后续在单个 .vue 页面中无需再引）；

//引入

import echarts from 'echarts'

import * as Echarts5 from 'echarts5' //echarts新版本echarts5

//使用

Vue.prototype.$echarts = echarts;

Vue.prototype.$echarts5 = Echarts5; //新版本

2.绘制图表

（1）首先为 ECharts 准备一个定义了高宽的 DOM 容器；

（2）初始化 echarts 实例并显示图表

在 vue 的 methods:{ } 中定义方法绘制图表，初始化 echarts 实例；

注意在 vue 中初始化 echarts 实例与官网稍有不同，需要将 echarts.init 改为 this.$echarts.init ，定义后的方法也需要在 vue 挂载阶段 mounted(){ } 中进行调用。

3.常用配置项

区域缩放，常用的为内置型数据区域缩放组件（dataZoomInside），内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。

地理坐标系组件，用于地图的绘制。

更多详情请参见 ECharts 官网的配置项手册：Documentation - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/option.html#title

三、案例完整代码 + 详细注释

Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。