要在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饼图同时展示数量和百分比的更多相关文章

  1. ECharts饼图试玩

    处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...

  2. 将数据动态加载到Echarts饼图中

    需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...

  3. knockout+echarts实现图表展示

    一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...

  4. Vue Echarts 饼图设置默认选中一个

    Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...

  5. Django结合Echarts在前端展示数据

    前言 最近在用Django写UI自动化测试平台,基本快要弄完了,但是首页只有项目列表展示,一直感觉很空旷,所以想把一些关键数据在首页展示出来. 这时就想到利用Echarts这个开源项目,但是Djang ...

  6. 百度ECHARTS 饼图使用心得 处理data属性

    做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...

  7. echarts饼图不显示数据为0的数据

    首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...

  8. echarts饼图配置

    js引用和配置div <div id="container" style="height: 100%"></div> <scrip ...

  9. ECharts饼图制作分析

    ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11 ...

  10. echarts 饼图 + 全屏显示

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. 03-Sed基础语法及例子

    1 Sed语法及举例 在实际使用sed过程中经常使用字符串的替换.删除.查找等操作.Linux中的编辑器Vi.GVIM.emacs等都可以进行上述操作,但是大量进行操作的时候,效率很低. 地址参数 { ...

  2. win32com操作word API精讲 第六集 Range(四)对齐和缩进

    本课程<win32com操作word API精讲&项目实战>同步在B站.今日头条.视频号及本公众号发布.其中本公众号以发布文字教程为主. 今天是大年初二,一灯在此祝愿各位朋友兔年吉 ...

  3. vue 解决循环引用组件/动态组件/组件未注册报错

    使用动态组件报错 Unknown custom element: - did you register the component correctly? For recursive component ...

  4. 1.5万字长文:从 C# 入门 Kafka

    目录 1, 搭建 Kafka 环境 安装 docker-compose 单节点 Kafka 的部署 Kafka 集群的部署 2, Kafka 概念 基本概念 关于 Kafka 脚本工具 主题管理 使用 ...

  5. Postgresql 使用Vscode开发指南

    Postgresql 使用Vscode开发指南 depends libraries sudo apt install -y libsystemd-dev libxml2-dev libssl-dev ...

  6. 应用容器引擎-Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.容器是完全使用沙箱 ...

  7. Java 入门与进阶P-7.3+P-7.4

    函数的调用 简单应用举例 例1:编写一个求两个数的和的子函数 要求使用键盘录入的方式: 分析与总结: 要实现某一功能,把其定义为一个函数封装起来 就可以重复多次使用:这样一来,main函数里的代码减少 ...

  8. spring-in-action-day04-配置属性 @ConfigurationProperties

    1.Spring环境抽象的概念 2.怎么配置属性.在application.yml举例一些常用的配置 3.自定义配置属性@ConfigurationProperties(prefix = " ...

  9. Zstack救急实战记录

    起了这么个标题很容易引起歧义,先说明:是Zstack云架构帮我救急,而不是Zstack系统出了问题被救.具体容我慢慢道来: 使用Docker搭建EPICS的IOC记录 去年暑假时在一台工控机上裸装ce ...

  10. JavaScript是怎样实现继承的?

    一.是什么 继承(inheritance)是面向对象软件技术当中的一个概念. 如果一个类别B"继承自"另一个类别A,就把这个B称为"A的子类",而把A称为&qu ...