JavaScript使用百度ECharts插件绘制饼图操作示例
本文详细介绍如何在JavaScript中使用百度ECharts插件绘制饼图。内容涵盖引入AMD规范加载器、配置模块路径、创建DOM容器以及初始化图表并驱动生成的完整流程，附带代码示例供参考。
ECharts简介与饼图绘制概述
本文通过具体实例，演示如何利用JavaScript调用百度ECharts插件来绘制饼图，供读者参考学习。
百度ECharts是由百度前端团队开发并维护的开源JavaScript图表库，基于HTML5技术构建。其中“E”代表Enterprise，意指该库适用于商业级数据图表展示。
本文将简述使用ECharts绘制饼图（Pie Chart）的具体步骤，下图展示了利用ECharts生成的饼图实际效果。
配置AMD加载器与模块路径
首先，需要在HTML页面中创建一个<script>标签，并引入符合AMD规范的模块加载器，例如esl.js。
关于AMD规范的详细说明，可参考阮一峰的相关博文：《Javascript模块化编程（二）：AMD规范》。
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
创建容器与初始化图表
接下来，在页面中添加一个用于承载ECharts图形的DOM容器，为后续渲染图形做好准备。
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
</body>
在新增的<script>标签中，需为模块加载器配置echarts库及所需图表模块的路径，此处相对路径指从当前页面链接至echarts.js文件。
由于本示例目标是绘制饼图，因此在paths配置中需特别添加'echarts/chart/pie'这一路径。
<script type="text/javascript">
// 路径配置
require.config({
paths:{
'echarts' : 'http://echarts.baidu.com/build/echarts',
'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts'
}
});
</script>
在<script>标签内动态加载echarts库及指定图表模块，并在回调函数中完成图表初始化，从而驱动图表的生成与渲染。
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text: 'ECharts实例',
subtext: '饼图（Pie Chart）',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['part1','part2','part3','part4']
},
toolbox: {
show : true,
feature : {
//mark : {show: true},
//dataView : {show: true, readOnly: false},
restore : {show: true},
//saveAsImage : {show: true}
}
},
calculable : false,
series : [
{
name:'饼图实例',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:100, name:'part1'},
{value:200, name:'part2'},
{value:300, name:'part3'},
{value:400, name:'part4'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
感兴趣的用户可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun对上述代码进行测试，以查看运行效果。
如需了解更多JavaScript相关内容，可查看本站系列专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》。
希望本文所述内容能对读者的JavaScript程序设计工作有所帮助。
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数？
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑？
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41