###
ECharts 饼图使用教程
#### 创建基本饼图
要创建一个简单的
ECharts饼图，首先需要引入
ECharts库并初始化
图表容器。下面是一个完整的HTML页面示例，展示了如何设置一个基础的饼图[^1]：
```html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<!-- 引入
echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/
echarts/dist/
echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<!-- 为
ECharts准备一个具备
大小（宽高）的DOM -->
<div id="main" style="height: 100%"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化
echarts实例
var myChart =
echarts.init(document.getElementById('main'));
// 指定
图表的配置项和数据
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
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:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示
图表。
myChart.setOption(option);
</script>
</body>
</html>
```
此代码片段设置了标题、提示框、
图例位置，并通过`series`属性定义了一个名为“访问来源”的饼图系列。
####
自定义图标
对于更复杂的场景，比如希望给每个扇形区域添加特定的小图标，则可以利用图形标记功能来实现这一点[^2]。这里给出一段简化版的例子说明如何向各个部分附加图片作为装饰：
```javascript
// ...省略前面相同的部分...
var iconData = [
{name:"篮球", value:79, iconPath:'/path/to/basketball.png'},
{name:"足球", value:85, iconPath:'/path/to/soccer.png'},
// 更多项目...
];
option.series[0].data = iconData.map(function(item){
return {
name:item.name,
value:item.value,
label:{
normal:{
formatter:function(params){
return '{a|'+params.name+'}\n{b|' + params.percent.toFixed(1)+'%\n}{c|'+
'<img src="'+item.iconPath+'" width=20 height=20>';
},
rich:{}
}
}
};
});
myChart.setOption(option);
```
上述脚本中，`iconData`数组包含了各运动项目的名称、数值及其对应的图像路径；而`formatter`函数用于构建带有百分比及小图标的标签文本。
#### 动态效果与布局调整
当有多个样本需展示时，可以通过编程方式让这些样本轮流被突出显示，形成一种动画播放的效果。此外，在空间允许的前提下，还可以考虑将额外的信息分布到
图表周围的位置上以便更好地呈现更多信息[^3]。
```javascript
function highlightSeries(index) {
const options = myChart.getOption();
options.series.forEach((serie, i) => {
serie.itemStyle.normal.shadowBlur = index === i ? 20 : 0;
serie.label.emphasis.show = index === i;
});
myChart.setOption(options);
}
setInterval(() => {
let currentIndex = Math.floor(Math.random() * option.series.length);
highlightSeries(currentIndex);
}, 2000); // 每隔两秒切换一次高亮对象
```
这段逻辑实现了每隔一段时间随机选取某个序列进行强调的功能，从而达到动态视觉上的变化感。
本文解析了Letoption配置中的grid部分，重点关注了图例设置，包括位置调整、图标样式和文本样式修改。理解这些细节有助于提升图表的可读性和专业性。
扫一扫
1130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
