echarts-detail---饼图
echarts-饼图
1.饼图上面显示纵坐标的百分比数值
series: [
{
name: arr[i].name,
type: 'pie',
radius: ['30%', '50%'],
avoidLabelOverlap: false,
center: ['40%', '50%'],
data: data,
selectedMode: 'single',
label: {
normal: {
formatter: function (item) {
if (!item.percent) {
return ''
} else {
return (item.percent).toFixed(2) + '%)'
} }
},
emphasis: {
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
var result1 = result
var data = result1
var data1 = [];
result.forEach(function (item, index) {
var itval = {};
itval.ManageGradeName = item.ManageGradeName
itval.ManagerCount = item.ManagerCount
itval.Ratio = item.Ratio
itval.name = item.name
itval.value = item.value
data1.push(itval)
})
var sum = _.sumBy(data, 'ManagerCount')
var ratio = _.sumBy(data, 'Ratio')
var Name = _.map(data, 'ManageGradeName');
result1.unshift({
ManageGradeName: "合计",
ManagerCount: sum,
Ratio: '1'
})
content.append(compiled({
'data': data,
'dom': '<div class="record" id="proportion" style="width: 440px; height: 270px; display: inline-block; margin-left:65px;"></div>'
})) _.each(data1, function (item) {
item.value = item.ManagerCount;
item.name = item.ManageGradeName;
})
var myChart = echarts.init(document.getElementById("proportion"));
var option = {
color: gObj.color,//饼图中数据的颜色
title: { //饼图的title设置
text: '占比情况',
x: '141px',
y: '124px',
textStyle: {
color: '#333',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: 14,
}
},
tooltip: {//鼠标悬浮的提示
trigger: 'item',
formatter: function (item) {
return item.seriesName + ' <br/>' + item.name +
' : ' + item.value + ' (' + (item.value * 100 / sum).toFixed(1) + '%)';
}
},
legend: { //数据详情在div的位置
x: 'center',
y: 'bottom',
orient: 'horizontal',
//bottom: 5,
//left: 10,
data: Name,
type: 'scroll',//
},
series: [// 填入饼图中的数据
{
barWidth: 30,
name: '占比',
type: 'pie',
radius: ['30%', '50%'],
avoidLabelOverlap: false,
center: ['40%', '50%'],
data: data1,
selectedMode: 'single',
label: {// 数据的格式
normal: {
formatter: function (item) {
if (!item.percent) {
return ''
} else {
return (item.value * 100 / sum).toFixed(1) + '%'
}
}
},
emphasis: {
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option)
echarts-detail---饼图的更多相关文章
- echarts标准饼图(一)——基本配置demo
echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title)配置 三.提示框(tooltip)配置 四.图例(legend)配置 五.系列列表(series )配置 下面是一 ...
- ECharts 环形饼图 动态获取json数据
ECharts 环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...
- echarts中饼图显示百分比
通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法: tooltip : { trigger: ' ...
- echarts标准饼图解读(一)——提示框(tooltip)配置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Echarts 解决饼图文字过长重叠的问题
之前在网上查找了很多关于解决饼图文字描述过长导致重叠的问题,找了很多一直没有一个合适的解决方案,最后自己只能花时间研究echarts文档,功夫不负有心人,终于解决了文字重叠展示不全等问题. 废话不多说 ...
- echarts圆饼图设置默认选中项并在中间显示文字
效果: 代码: var myChart = echarts.init(document.getElementById('quanshi-echarts-two')); option = { grid: ...
- echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下echarts的基本使用.head中引入js文件: <script src="/static/frame/echarts/echarts.min.j ...
- Qt+ECharts开发笔记(四):ECharts的饼图介绍、基础使用和Qt封装百分比图Demo
前言 前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt. 本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口. Demo演示 ...
- echarts标准饼图(二)——标题(title)配置
标题(title)配置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- ECharts之饼图和柱形图demo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- VisualStudio下如何编译和使用最新版本的OpenCV(修正版)
OpenCV是托管于GitHub的开源项目,本文具体解决一个问题,就是“获取最新版本的OpenCV,并且在自己的项目中使用起来" 最新版本 2017年3月31日 BY:jsxyhelu ...
- 如何退出minicom【学习笔记】
一.先按ctr+a进入设置模式 二.在按x退出
- Zoom Me FAQ
Q: How to config custom shortcuts? A: Enter the preferences setting window from menu bar "Prefe ...
- MySQL—记录的增删改查操作
1.插入记录: 方法一:INSERT [INTO] tbl_name [(col_name,···)] {VALUES|VALUE} ({expr |DEFAULT},···),(···),··· 例 ...
- Elasticsearch之中文分词器
前提 什么是倒排索引? Elasticsearch之分词器的作用 Elasticsearch之分词器的工作流程 Elasticsearch之停用词 Elasticsearch的中文分词器 1.单字分词 ...
- BZOJ 3192: [JLOI2013]删除物品 奇淫技巧&树状数组
点我看题 这题十分奇淫技巧...QAQ因为知道是树状数组的题QAQ刚开始以为维护两个数组的树状数组然后模拟从大到小,然后发现不会打QAQ 于是悄悄咪咪翻开题解了. 实际上两个数组可以看做一个数组 如 ...
- .net 获取当前电脑账户
string domainAndName = User.Identity.Name; ] { '\\' }, StringSplitOptions.RemoveEmptyEntries); strin ...
- eclipse及tomcat web站點
eclipse环境下如何配置tomcat https://www.cnblogs.com/Leo_wl/p/4769760.htmleclipse环境下如何配置tomcat,并且把项目部署到Tomca ...
- 二十四 Python分布式爬虫打造搜索引擎Scrapy精讲—爬虫和反爬的对抗过程以及策略—scrapy架构源码分析图
1.基本概念 2.反爬虫的目的 3.爬虫和反爬的对抗过程以及策略 scrapy架构源码分析图
- B-Tree和B+Tree
目前大部分数据库系统及文件系统都采用B-Tree或其变种B+Tree作为索引结构,在本文的下一节会结合存储器原理及计算机存取原理讨论为什么B-Tree和B+Tree在被如此广泛用于索引,这一节先单纯从 ...