2024年Web前端最全ECharts用法及常用配置项详解（Vue环境），卑微打工人

本文链接：https://blog.csdn.net/2401_84435700/article/details/138449941

web浏览器中的javascript

window对象

（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; //新版本

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

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

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

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

title	标题组件，包含主标题和副标题。
legend	图例组件，可选 plain 普通图例、scroll 可滚动翻页的图例。
grid	直角坐标系内绘图网格，可以在网格上绘制折线图，柱状图，散点图（气泡图）。
xAxis	x轴。
yAxis	y轴。
dataZoom	区域缩放，常用的为内置型数据区域缩放组件（dataZoomInside），内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
visualMap	视觉映射组件，常用于地图当中。
tooltip	提示框组件。
toolbox	工具栏，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具；除了内置工具之外，还可以自定义工具，写于 feature 内。
geo	地理坐标系组件，用于地图的绘制。
dataset	数据集组件，用于单独的数据集声明。