ECharts 饼图绘制与样式配置详解
本文详细介绍 ECharts 中饼图的实现原理及配置方法，包括基础扇形图与南丁格尔图的切换。深入解析 itemStyle 阴影、透明度等样式设置，以及 light/dark 主题的使用与自定义加载。同时涵盖全局与系列专属调色盘配置，以及鼠标悬浮高亮（emphasis）样式的定制技巧。
饼图
饼图主要利用扇形的弧度来展示不同类目数据在总体中的占比情况。其数据格式相较于柱状图更为简洁，仅需一维数值，无需指定类目。由于饼图不基于直角坐标系，因此不需要配置 xAxis 和 yAxis。
myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data:[ // 数据数组，name 为数据项名称，value 为数据项值
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
})通过设置参数 roseType: 'angle'，可以将普通饼图转换为南丁格尔图进行展示。
option = {
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
roseType: 'angle',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
};阴影的配置
利用 itemStyle 参数，可以配置阴影、透明度、颜色、边框颜色及边框宽度等视觉属性：
option = {
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};样式设置
ECharts 支持通过样式配置来调整图形元素或文字的颜色、明暗程度及大小等视觉效果。
颜色主题
自 ECharts4 版本起，除了默认主题外，系统内置了 light 和 dark 两套主题。
具体使用方式如下：
var chart = echarts.init(dom, 'light');
//或者
var chart = echarts.init(dom, 'dark');此外，用户还可以访问官方主题编辑器，挑选喜欢的主题并下载。
目前提供的主题下载格式包含 JS 版本和 JSON 版本。
若使用 JS 版本，可将 JS 主题代码保存为名为“主题名.js”的文件，在 HTML 中引入该文件，随后在代码中调用该主题。
例如上图中选中了某个主题，将 JS 代码保存为 wonderland.js。
<!-- 引入主题 -->
<script src="https://www.runoob.com/static/js/wonderland.js"></script>
...
// HTML 引入 wonderland.js 文件后，在初始化的时候调用
var myChart = echarts.init(dom, 'wonderland');
// ...若主题保存为 JSON 文件，则需要自行加载并注册该主题。
例如上图中选中了某个主题，将 JSON 代码保存为 wonderland.json。
//主题名称是 wonderland
$.getJSON('wonderland.json', function (themeJSON) {
echarts.registerTheme('wonderland', themeJSON)
var myChart = echarts.init(dom, 'wonderland');
});注意：使用 $.getJSON 方法时，需要确保已引入 jQuery 库。
调色盘
调色盘配置可在 option 对象中设置。
调色盘提供一组颜色，图形和系列会自动从中选取颜色进行渲染。
既可以设置全局调色盘，也可以为特定系列设置专属调色盘。
option = {
// 全局调色盘。
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
series: [{
type: 'bar',
// 此系列自己的调色盘。
color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
...
}, {
type: 'pie',
// 此系列自己的调色盘。
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
}全局调色盘实例：
// 全局调色盘。
color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],系列调色盘实例：
series: [{
type: 'pie',
// 此系列自己的调色盘。
color: ['#ff0000','#00ff00', '#0000ff', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...
直接样式设置是常用的配置方式。在 ECharts 的 option 中，多处支持配置 itemStyle、lineStyle、areaStyle、label 等属性。这些位置可直接设置图形元素的颜色、线宽、点的大小、标签文字及样式等。
通常，ECharts 的各个系列和组件均遵循这些命名规范，尽管不同图表和组件中，itemStyle、label 等属性可能出现的位置有所不同。
直接样式设置的参考示例可参见前文 ECharts 饼图部分。
高亮的样式：emphasis
当鼠标悬浮在图形元素上时，通常会显示高亮样式。默认情况下，高亮样式由普通样式自动生成。
如需自定义高亮样式，可通过 emphasis 属性进行定制：
// 高亮样式。
emphasis: {
itemStyle: {
// 高亮时点的颜色
color: 'red'
},
label: {
show: true,
// 高亮时标签的文字
formatter: '高亮时显示的标签内容'
}
},到此这篇关于echarts饼图与样式设置的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持本站。
定制 Quill.js 主题样式：修改默认 CSS 与添加自定义类名
2026-11-04 11:21:35
混淆JS代码怎么在线反混淆并格式化阅读
2026-11-03 21:46:39
JS在线编辑器代码报错怎么调试？控制台使用技巧
2026-11-03 21:24:56
从 marked.js 旧版本升级到最新版：API 变更与迁移指南
2026-11-03 17:38:17
JS富文本编辑器Quill与代码编辑器CodeMirror的区别及应用场景
2026-11-03 16:52:09