Echarts基础入门：从零构建饼状图详解
本文介绍Echarts开源图表库的基本特性与优势，详细讲解如何在HTML中引入JS文件、创建容器、配置模块路径及加载数据。通过裁剪官方Demo，提供一份简洁的饼状图实现教程，涵盖从环境搭建到结果展示的全流程，并简述柱状图等其它图表的复用方法。
Echarts特性简介
Echarts是一款表现出色的图表库：
1，作为开源软件，它免费提供了精美的图形界面；
2，使用门槛低，内部封装了关键的JS逻辑，只需正确引用即可调用；
3，图表类型丰富，Echarts提供了多种图标支持，其中地图功能尤为典型；
4，兼容性优异，基于HTML5的动画渲染效果极佳。
访问Echarts官网可获取源码及说明文档，使用前需从官网下载所需的JS源文件。
官网Demo通常包含大量冗余代码，若仅需使用饼状图，需手动剔除无关部分，保留核心功能。为避免耗时裁剪，本文基于精简后的代码整理出以下使用教程：
饼状图实现步骤
Echarts饼状图实现步骤如下：
1，在基础HTML文件中引入JS文件
<head>
<meta charset="utf-8">
<title>Charts demo</title>
<script src="js/esl.js"></script>
</head>
<body>
</body> 2，为图形渲染准备容器
<head>
<meta charset="utf-8">
<title>Charts demo</title>
<script src="js/esl.js"></script>
</head>
<body>
<div id="picturePlace"></div>
</body>即在HTML中添加一个指定id的div元素，图表将渲染显示在该div内部。
3，通过JS模块导入所需组件
<head>
<meta charset="utf-8">
<title>Charts demo</title>
<script src="js/esl.js"></script>
</head>
<body>
<div id="picturePlace"></div>
<script type="text/javascript">
// 路径配置
require.config({
paths:{
'echarts' : 'js/echarts',
'echarts/chart/pie' : 'js/echarts'
}
});
</script>
</body>
4，配置并添加显示数据
<head>
<meta charset="utf-8">
<title>Charts demo</title>
<script src="js/esl.js"></script>
</head>
<body>
<div id="picturePlace"></div>
<script type="text/javascript">
// 路径配置
requireconfig({
paths:{
'echarts' : 'js/echarts',
'echarts/chart/pie' : 'js/echarts'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('picturePlace'));
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} {b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
5，运行程序查看最终效果
上述为饼状图的实现流程，柱状图、散点图等其它图表结构类似，主要区别在于引用JS时指定的模块名不同（如饼状图为pie，柱状图为bar），以及option配置中的数据差异，整体代码框架保持一致。
Mock.js 拦截失效或数据格式错误的常见原因及排查
2026-11-05 10:11:59
Java和JavaScript名字像但没关系：辨析Java、JavaWeb与JS
2026-11-04 09:30:54
CodePen、JSFiddle与RunJS对比：哪款JS在线运行工具更适合你？
2026-11-03 16:46:57
JS 统计图渲染空白或报错怎么排查？常见问题解决指南
2026-11-03 09:49:40
flv.js 常见报错 MediaError 与解码失败排查指南
2026-11-02 10:29:29