ECharts基础配置详解

最新推荐文章于 2025-11-15 14:26:20 发布

原创

最新推荐文章于 2025-11-15 14:26:20 发布 · 1.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

ECharts是一款基于JavaScript的数据可视化图表库，提供多种图表类型。文章介绍了ECharts的安装方法，包括下载解压、CDN引入和npm安装。接着，通过一个简单的柱状图实例展示了如何引入依赖、定义图表区域、配置图表数据及完整代码示例。此外，还提及了option配置中的主要选项，如标题、图例、坐标轴和系列配置。

文章目录

一、前言

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

二、主要功能

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

三、ECharts安装

2.1 下载解压版引入

可以去官网按需定制图表模块进行下载对应压缩包，并用

按需配置下载地址：https://echarts.apache.org/zh/download.html

2.2 使用 CDN 方法

Staticfile CDN（国内） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js

jsDelivr：https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

使用的是国外的地址可能引入打开页面，加载时间会过长。尝试练习还是建议下载到本地引入即可；

2.3 项目上安装下载

npm install echarts --save

四、简单图表示例

4.1 引入依赖文件

<script src="js/echarts.min.js"></script>

4.2 定义一个页面展示图表的区域

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="echartsBox" style="width: 600px;height:400px;"></div>

4.3 实例化echarts并配置图表数据

// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('echartsBox'));
// 指定图表的配置项和数据
const option = {
   
   
	title: {
   
   
		text: '柱状图实例'
	},
	xAxis: {
   
   
		data: ['周一', '周二', '周三', '周四', '周五']
	},
	yAxis: {
   
   },
	series: [{
   
   
		name: '情绪',