admin 管理员组文章数量: 1086019
2024年4月18日发(作者：weigh的音标是什么)
echarts legend data 样式
ECharts 中的 legend 数据样式可以通过设置 legend 对象的属性进行自定义。下面是
一个示例，展示如何自定义 legend 的数据样式：
javascript
var option = {
legend: {
data: ['销量', '库存'],
type: 'scroll',
orient: 'vertical',
left: 'left',
top: 'bottom',
bottom: 20,
width: '80%',
pageIconColor: '#fff', // 激活的分页按钮颜色
pageIconInactiveColor: '#ccc', // 没激活的分页按钮颜色
formatter: function(name) {
// 获取 legend 显示内容
var data = ;
var total = 0;
var tarValue = 0;
var value = 0;
for (var i = 0, l = ; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
value = total;
}
}
// 返回自定义的显示内容
return '{a|' + name + '}：{' + tarValue + '}(' + value + '%)';
}
},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name: '库存',
type: 'bar',
data: [15, 30, 46, 20, 20, 30]
}
]
};
在上面的示例中，我们首先定义了 legend 的数据为 ['销量', '库存']，并设置了
type、orient、left、top、bottom、width 等属性来自定义 legend 的显示样式。然后，
我们通过 formatter 函数来自定义 legend 的显示内容。在 formatter 函数中，我们遍历
了 legend 的数据，找到了与当前 name 对应的 value，以及所有数据的总和。最后，我们
返回一个格式化的字符串，其中包含自定义的显示内容。在返回的字符串中，{a|name} 表
示 name 的文本，{tarValue} 表示与当前 name 对应的 value，{value} 表示所有数据的
总和。
版权声明：本文标题：echarts legend data 样式 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1713388794a632155.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论