要在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. Linux C 用GPS时间更新系统时间的方法。

    思路: 1.GPS模块会自动收到带时间信息的消息. GPS模块会收到很多的协议消息带时间信息的.我们选择"$GPRMC"这条协议.其中的时间格式有的是hhmmss(时分秒) 有的是 ...

  2. python连接kafka-2.0

    import sysimport timeimport osimport jsonimport vertica_pythonimport loggingimport pykafkafrom pykaf ...

  3. [BUUCTF]洞拐洞拐洞洞拐

    [BUUCTF] 洞拐洞拐洞洞拐 问题链接:https://buuoj.cn/challenges#洞拐洞拐洞洞拐 问题附件是一张图片. 一. 图片分析 查看图片,发现是由有规律的黑白像素构成的PNG ...

  4. Java基础学习笔记-常量与变量♪(^∇^*)

    常量与变量相同点 都有作用域,跟JS差不多, 变量的作用域:一对{ }之间有效 1.局部 2.全局 2.1.属于类的量(类常量和类变量) 2.2.属于实例的量(实例常量和实例变量) • 前面都可加权限 ...

  5. 安装nginx并配置nginxscript(njs)实现请求头验证或者分流

    本文以centos为例 nginx+nginxscript 源码安装nginx 安装必要环境 安装gcc环境 sudo yum -y install gcc gcc-c++ 安装 pcre,让ngin ...

  6. 12月19日内容总结——Q查询进阶、ORM查询优化、ORM事务、ORM常用字段类型和字段参数、Ajax介绍、数据编码格式、Ajax携带文件数据

    目录 一.Q查询进阶操作 二.ORM查询优化 三.ORM事务操作 四.ORM常用字段类型 五.ORM常用字段参数 六.Ajax AJAX简介 应用场景 AJAX的优点 语法实现 七.数据编码格式(Co ...

  7. QQ、微信、微博、空间等分享链接接入

    一.HTMl代码 1.隐藏标签用于获取信息 <img style="display:none" id="coverImage" src="@it ...

  8. JZOJ 1078. 【GDOI2006】The Kth Element

    \(\text{Problem}\) 给定一个整数序列 \(a[1..N]\),定义 \(sum[i][j]=a[i]+a[i+1]+...+a[j]\),将所有的 \(sum[i][j]\) 从小到 ...

  9. 线段树优化DP学习笔记 & JZOJ 孤独一生题解

    在 \(DP\) 的世界里 有一种题需要单调队列优化 \(DP\) 一般在此时,\(f_i\) 和它的决策集合 \(f_j\) 在转移时 \(i\) 不和 \(j\) 粘在一起(即所有的 \(j\) ...

  10. Vue中v-model与:value的区别

    v-model不可以加其他值 <input type="text" v-model="curAmount"> :value可以加 单位 <in ...