echarts饼图直观显示数值最实用的方式
默认：echarts饼图直接显示数值（如图 无需光标悬空触发）
var optionOne = {
title : {
text: '开通渠道饼图',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'horizontal',
x : 'center',
y : 'bottom',
data:['xxxxAPP','xxxx微信端','xxxxAPP','xxxAPP','xxx机顶盒']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'',
type:'pie',
radius : '65%',
center: ['50%', '50%'],
/* label: {
normal: {
show: true,
formatter: '{b}: {c}({d}%)'},
textStyle : {
fontWeight : 'normal',
fontSize : 15
},labelLine :{show:true}
}, */
itemStyle:{
normal:{
label:{
show: true,
formatter: '{b} : {c} ({d}%)'
},
labelLine :{show:true}
}
},
data:[
{value:500, name:'xxxAPP'},
{value:400, name:'xxxx微信端'},
{value:300, name:'xxxxAPP'},
{value:200, name:'xxxAPP'},
{value:100, name:'xxx顶盒'}
]
}
]
};
//4.设置加载动画(非必须)
//VisOneEchart.showLoading(); //数据加载完之前先显示一段简单的loading动画
VisOneEchart.setOption(optionOne);
echarts饼图直观显示数值最实用的方式相关推荐
- echarts适用饼图直观显示数值方式
需求:echarts饼图直接显示数值(如图 无需光标悬空触发) 代码: option = {title : {/* text: '某站点用户访问来源',subtext: '纯属虚构',x:'cente ...
- echarts饼图自动显示数据
在做echarts饼图的时候,默认是不显示数据,现在要直接把数据显示在上面,代码如下: series: [{name: '处理状态',type: 'pie',radius: ['50%', '70%' ...
- echarts 饼图内部显示百分比，外部显示文字说明
为了实现产品的要求,饼图中既显示百分比又显示文字的说明(如下图) 查了echarts 文档,并不能通过简单的配置来实现,原因如下:在单个serie的label中,只能设置一个label,位置可以选择在 ...
- Echarts饼图,以及显示百分比的文字
这样就可以实现饼图点击某一部分,监听点击事件: 试了其他博友的方式都没用,这个是最简单的方式了. // 处理点击事件并且跳转到相应的百度搜索页面 eCharts.on('click', functio ...
- echarts饼图 文字显示在引线之上
用echarts做饼图,文字默认显示在引线的尾部,如果想让文字显示在引线的上边,加上这几个属性就可以了,引线的长度和文字的内边距根据实际需要调整即可:
- 解决echarts饼图label显示不全的问题
今天画饼图的时候,发现某些数据的标签自动隐藏了,怎么调整都不能完全显示,如图: 解决办法 添加如下配置: labelLayout: {hideOverlap: false}, 最终效果
- echarts饼图, 中间显示总数
echarts属性真的太太多了 需求也是五花八门的 先记下来 使用graphic属性 const datas = [{ value: 1048, name: 'Search Engine' },{ v ...
- bizcharts饼图Legend显示数值和百分比
效果图 百分比 官网API:https://www.bizcharts.net/product/BizCharts4/category/62/page/81#itemvalue itemValue是L ...
- echarts legend图例显示数值和百分比
效果图: 核心代码: 主要是在legend中以回调函数形式配置formatter: formatter: function(name) {var data = option.series[0].dat ...
最新文章
- oracle ORACLE_SID使用上的意义
- springcloud学习计划
- 三目运算法求一个大值，以及指定位数的应用，以及函数的声明，以及函数的嵌套，以及函数的递归，以及用递归法求阶乘
- 【转】SAP S4 OP/Cloud 10个区别
- 供应商主数据屏幕增强
- CVPR 2019审稿排名第一满分论文：让机器人也能「问路」的视觉语言导航新方法...
- Java图形 图像与多媒体基础,十一. 图形、图像与多媒体1.绘图基础
- 论文浅尝 | GEOM-GCN: Geometric Graph Convolutional Networks
- Java访问修饰符——用于控制可见性
- 视觉SLAM十四讲学习笔记-第二讲-开发环境搭建
- Vue-cli下打包资源相对路径踩坑
- Python-GeoPandas地图、专题地图绘制
- latex表格排版指南
- 【笔记】TNT: Target-driveN Trajectory Prediction
- python数据分布统计_Python 数据可视化：数据分布统计图和热图
- Git 配置别名 —— 让命令变得更简单
- 微信小程序中好看的按钮样式（渐变色）、view的点击变色效果、按钮漂亮的圆角边框、解决hover设置失效
- 顶！Python 与 Excel 终于在一起了
- 详细讲解Linux内核源码内存管理（值得收藏）
- 视频知识点（17）- flv.js 实现播放本地视频文件的技巧