echars 饼图使用
2024-09-30 08:49:58
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
align: 'left',//文字永远在左侧
icon: 'circle',// 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
data: [
{
name: '红码人数',
textStyle: {
fontSize: 12,
color: 'white'
}
},
{
name: '黄码人数',
textStyle: {
fontSize: 12,
color: 'white'
}
},
{
name: '绿码人数',
textStyle: {
fontSize: 12,
color: 'white'
}
}
],
formatter(name) { //文字显示图形数据
var index = 0;
var clientlabels = ['红码人数','黄码人数','绿码人数'];
var clientcounts = [`${data.red}`,`${data.yellow}`,`${data.green}`];
clientlabels.forEach((value,i) => {
if (value === name){
index = i;
}
});
return `${name} ${clientcounts[index]}`;
}
},
color: ['red', 'yellow', 'green'],
series: [
{
name: '',
type: 'pie',
radius: ['35%', '45%'],
center: ['35%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
formatter(argument) {
var html;
html = `${data.number}\r\n\r\n总人数`;
return html;
},
textStyle: {
fontSize: 15,
color: '#fff'
}
}
},
labelLine: {
show: false
},
data: [
{ value: `${data.red}`, name: '红码人数' },
{ value: `${data.yellow}`, name: '黄码人数' },
{ value: `${data.green}`, name: '绿码人数' }
]
}
]
};
最新文章
- Android Studio中清单文件改versionCode和versionName没效果的原因
- POJ 1797 Heavy Transportation （Dijkstra变形）
- 格式化分区，报/dev/sdb1 is apparently in use by the system; will not make a filesystem here!
- Ubuntu 命令行下快速打开各类文件 分类： ubuntu shell 2014-11-18 20:06 210人阅读 评论(0) 收藏
- 类型萃取(type traits)
- 数组名取地址所算数运算应注意的&quot;trap&quot;
- php设计模式(一)：简介及创建型模式
- Android 主题theme说明 摘记
- 关于Net core 的https 设置小知识
- js的事件冒泡，事件捕获
- vue_vuex
- C++函数装饰器
- 三、CSS样式——链接
- Django项目的创建及基本使用
- Office web apps 打补丁后（安装PDF在线浏览） 错误解决
- LOJ#3093. 「BJOI2019」光线（递推+概率期望）
- C#中一种替换switch语句更优雅的写法
- django源码解析之 BooleanField (二)
- JAVA第十周《网络编程》学习内容总结
- SDWebImage实现图片展示、缓存、清除缓存