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=" ...
随机推荐
- (16)go-micro微服务jaeger链路追踪
目录 一 jaeger链路追踪介绍 什么是链路追踪: 链路追踪主要功能: 二 jaeger链路追踪作用 三 jaeger链路追踪主要特性 四 jaeger链路追踪原理图 1.链路调用原理 2. 一次调 ...
- day08-AOP-01
AOP 1.官方文档 AOP讲解:下载的spring文件-->spring-framework-5.3.8/docs/reference/html/core.html#aop AOP APIs: ...
- 静态代码块-数组工具类Arrays
静态代码块 静态代码块: 定义在成员位置,使用static修饰的代码块{}. 位置:类中方法外. 执行:随着类的加载而执行且执行一次,优先于main方法和构造方法的执行 格式: public clas ...
- vue学习笔记(四)---- 品牌管理案例
一.导入相关包 <script src="../lib/vue2.6.10.min.js"></script> <script src=". ...
- 算法学习笔记(17): 快速傅里叶变换(FFT)
快速傅里叶变换(FFT) 有趣啊,都已经到NOI的难度了,救命 首先,我们先讲述一下前置知识.已经明白的读者请移步后文 虚数 定义:\(z = a + bi\),其中 \(a, b \in R\ \ ...
- 一个容器,但是一整个k8s集群
你可能需要一个快速启动和销毁的 k8s 集群:你可能在资源受限的环境中运行 k8s 集群:你可能是一个完全的初学者,觉得搭建完整的 k8s 套件太难.那么这篇短文可能可以帮到你. 各种丐版 k8s 集 ...
- Vue18 过滤器
1 简介 过滤器(filter)是输送介质管道上不可缺少的一种装置,大白话,就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理,我们也可以理 ...
- 线程基础知识 04 synchronized锁的四种状态和升级
转https://www.cnblogs.com/mingyueyy/p/13054296.html 1 轻量级锁和重量级锁简要说明 线程调度本来是由操作系统来管理的.现在,操作系统上跑了一个虚拟机J ...
- ECharts 饼图指定颜色显示
一.通过setOption的color属性分配颜色范围 先介绍这里提到的color属性 color:调色盘颜色列表.如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色. 默认为: ['#5 ...
- 学习Java Day4
今天重点学习了读取输入,然后在eclipse上试了很多次,存在一些还没能解决的问题,发现eclipse的使用十分不熟练, 明天重点学习一下如何使用eclipse.