echart 饼图数据显示
正常饼图是鼠标移动到饼图上面显示数据,
现在可以直接显示在每块饼图变;
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
label: {
normal: {
formatter: ' {b}:{c} {d}%',//此处可以改变需要的样式
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
}
},
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
echart 饼图数据显示相关推荐
- 关于echart 饼图显示不出来 挖坑总结
关于echart 饼图显示不出来 挖坑总结 近来公司的移动端app,作业页面,从后台接口返回的是:老师布置一次作业的所有题目信息,在app页面除了展示题目信息之外,还需要统计A\B\C\D,正确\错误 ...
- Echart饼图-圆形图修改重新绘制
首先看看默认效果: 代码如下: option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{na ...
- 单击Echart饼图实现数据钻取
使用场景和需求: 第一层饼图显示党员党龄分布的情况. 点击某个党龄段,查看拥有该党龄段的党支部. 默认显示3个党支部,余下的党支部合并为其它,点击其它,查看余下的党支部. 点击某个党支部,返回第一层饼 ...
- echart饼图标签重叠_怎么让ECharts饼图的label标签不重叠?
1.怎么让ECharts饼图的label标签不重叠? 使用ECharts饼图,如果有的项目占比很小,饼图所占空间也比较小的时候,会出现label标签重叠.标签被截断的情况(图1). 可以通过设置rad ...
- echart饼图label超出绘图区域显示省略号
最近在工作遇到这样一个问题,在绘制饼图时,由于label文字过长,而超出了canvas的绘图区域,导致超出的label直接被截掉.dalao要我帮忙看一下这个问题- 阐述问题: 就像正常的思路一样,用 ...
- echart 饼图设置指引线_EXCEL中把饼图砍一半,美观程度瞬间提升
EXCEL中饼图是常用的图表之一,好多人也习惯了直接使用饼图.今天教给大家一个饼图的小技巧,我们只用一半饼图比整个饼图的效果要好很多,如下图是整个饼图和半饼图的对比情况. 这个半饼图是如何做出来的呢, ...
- echart饼图标签重叠_Echarts 解决饼图文字过长重叠的问题
之前在网上查找了很多关于解决饼图文字描述过长导致重叠的问题,找了很多一直没有一个合适的解决方案,最后自己只能花时间研究echarts文档,功夫不负有心人,终于解决了文字重叠展示不全等问题. 废话不多说 ...
- echart 饼图设置指引线_表示整体和部分的条饼图,走起!|Excel144
小伙伴们大家好,今天分享一个组合图的绘制技巧,表示整体和部分关系的条饼图. 效果如下图所示: 数据源如下图所示:左表中的[其它]包括右表中的全部项目,[其它]的金额总和等于右表所有项目的总和.具体操作 ...
- echart饼图标签重叠_解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
最新文章
- oracle acfs 快照,20C 新特性 ORACLE ACFS 基于文件的快照
- 数据中心规划设计中值得注意的八个问题
- Coursera ML笔记 - 神经网络(Learning)
- TF之AutoML之AdaNet框架:AdaNet框架的简介、特点、使用方法详细攻略
- sklearn自学指南(part19)--LDA和QDA
- 在Spring boot 配置过滤器(filter)
- android ListView实现下拉上拉刷新功能
- ibm mq的交互命令模式_IBM的完整形式是什么?
- 第十四天linux扩展知识点
- 设计模式——行为型模式
- Pano2VR热点热区热点替换
- 普拉提瑜伽工作室行业调研报告 - 市场现状分析与发展前景预测
- 【Matlab水果识别】RGB+HSV水果成熟度分级系统【含GUI源码 825期】
- 搭建WinDbg应用程序调试环境
- coreldraw水涟漪怎么做_巧用CorelDRAW X7制作波纹效果文字
- 【其它】怎样开启Win7快速启动栏
- Android shape画一个圆角虚线框
- 为什么将-Xms和-Xmx设置为相同的值?
- bigbrother的补充单节点hdfs搭建好后搭建mapredce
- 搜狗联盟开展“全民捉虫计划”打造诚信联盟
热门文章
- 异步调用案例_异步案例研究
- html5页面中添加腾讯地图api
- Java将图片压缩100KB以下,压缩图片,将几MB的图片压缩成100KB
- 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 有序
- 超快自旋电子学为电子信息新材料开辟了道路
- 在键盘上输入两个int型数据,比较其大小,并输出其中较小的数
- 曾几何时,还是游吟长安的醉客
- 读《470个建筑设计创意发想》
- Creating schema using Saiku Schema Designer
- 解决android api30以上,调用华为P50相机,点击拍照无反应问题