echarts饼图同时展示数量和百分比
要在ECharts中同时展示饼图数据的数量和百分比,可以使用ECharts中的formatter功能。下面是一个简单的示例,演示如何在饼图中显示数量和百分比:
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
formatter: '{b}: {c} ({d}%)'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: true
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
在这个示例中,formatter函数用于设置鼠标悬停时显示的文本内容。{a}
表示系列名, {b}
表示数据项名称, {c}
表示数据值, {d}
表示百分比。通过设置 formatter: "{a} <br/>{b}: {c} ({d}%)"
,我们可以在饼图上同时显示数据值和百分比。
同时,在 series
中的 label
属性中,我们设置了 {b}: {c} ({d}%)
作为标签文本的格式,这样标签也会同时显示数据值和百分比。
echarts饼图同时展示数量和百分比的更多相关文章
- ECharts饼图试玩
处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...
- 将数据动态加载到Echarts饼图中
需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...
- knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
- Django结合Echarts在前端展示数据
前言 最近在用Django写UI自动化测试平台,基本快要弄完了,但是首页只有项目列表展示,一直感觉很空旷,所以想把一些关键数据在首页展示出来. 这时就想到利用Echarts这个开源项目,但是Djang ...
- 百度ECHARTS 饼图使用心得 处理data属性
做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...
- echarts饼图不显示数据为0的数据
首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...
- echarts饼图配置
js引用和配置div <div id="container" style="height: 100%"></div> <scrip ...
- ECharts饼图制作分析
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11 ...
- echarts 饼图 + 全屏显示
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- LRU 居然翻译成最近最少使用?真相原来是这样!
前言 相信有很多同学和我一样,第一次碰到 LRU(Least Recently Used) 的这个解释「最近最少使用」都不知道是什么意思,用汤老师的话来说: 我真的感到匪夷所思啊! 最近是表示时间,最 ...
- (18)go-micro微服务ELK介绍
目录 一 什么是ELK 二 Beats的六种工具 三 ELK系统的特点 四 ELK+beats系统架构 五 ELK优点 六 最后 一 什么是ELK ELK是三个[开源软件]的缩写,分别表示:Elast ...
- 学习ASP.NET Core Blazor编程系列二十二——登录(1)
学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
- 深度剖析 Linux 伙伴系统的设计与实现
在上篇文章 <深入理解 Linux 物理内存分配全链路实现> 中,笔者为大家详细介绍了 Linux 内存分配在内核中的整个链路实现: 但是当内核执行到 get_page_from_free ...
- 【随笔记】Littlevgl 8.x 踩过的坑
在多线程并发使用的时候,总是在运行过程中莫名其妙的 crash,后面才意识到 LVGL 本身不支持并发,加了互斥锁解决了. 在引入矢量字库时(freetype),又有启动时会概率性 crash 的问题 ...
- shin-monitor源码分析
在经过两年多的线上沉淀后,将监控代码重新用 TypeScript 编写,删除冗余逻辑,正式开源. 根据 shin-monitor 的目录结构可知,源码集中在 src 目录中.关于监控系统的迭代过程,可 ...
- 微信小程序-获取用户头像信息以及修改用户头像
这里主要用到button的open-type功能,官网已有说明: 给button设置open-type="chooseAvatar",来使bindchooseavatar方法生效, ...
- Cesium viewer.extend 五个拓展(五)
2023-01-09 1.viewerDragDropMixin 一个mixin,它为查看器小部件添加了对CZML文件的默认拖放支持. czml即为json,但json不一定为czml:如同geojs ...
- 记一次google手机恢复出厂设置到root抓包全过程
前言 开始因为手机密码忘记了,不想重置,不然找店家root的工具都没了,自己也不会google root的操作,之前听说还挺麻烦的.操作了半天好了,确实是挺麻烦的,做个记录. 一.恢复出厂设置 还原教 ...
- 简单介绍Python中如何给字典设置默认值
这篇文章主要介绍了Python中如何给字典设置默认值问题,具有很好的参考价值,希望对大家有所帮助.如有错误或未考虑完全的地方,望不吝赐教 Python字典设置默认值 我们都知道,在 Python 的字 ...