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/ ...
随机推荐
- js 判断是ie浏览器
if (!+[1,]) { //IE window.event.returnValue = false; } else { return false; }
- LabVIEW之Vision基础 (一)之软件
一.软件准备 NI LabVIEW软件视觉开发必备软件 1.开发平台:LabVIEW 2015Chinese 32位中文版 链接:http://pan.baidu.com/s/1eRGmFVc 2.N ...
- Caffe学习笔记(二):Caffe前传与反传、损失函数、调优
Caffe学习笔记(二):Caffe前传与反传.损失函数.调优 在caffe框架中,前传/反传(forward and backward)是一个网络中最重要的计算过程:损失函数(loss)是学习的驱动 ...
- Ubuntu16.04怎么安装virtualenv虚拟环境
最近安装virtualenv的python虚拟环境,在网上找了很多,尝试了很多,都有各种问题,最终搞定后,给大家分享下我的过程,希望大家少走弯路. 本次安装是基于Ubuntu16.04Linux版本安 ...
- PyTorch源码解读之torch.utils.data.DataLoader(转)
原文链接 https://blog.csdn.net/u014380165/article/details/79058479 写得特别好!最近正好在学习pytorch,学习一下! PyTorch中数据 ...
- PostgreSQL pg_hba.conf 文件简析
作者:高张远瞩(HiLoveS) 博客:http://www.cnblogs.com/hiloves/ 转载请保留该信息 最近试用PostgreSQL 9.04,将pg_hba.conf配置的一些心得 ...
- php http post发送失败的问题
//params 是json对象private function HttpPost($url, $params){$data = http_build_query($params); //写 ...
- Vue 及框架响应式系统原理
个人bolg地址 全局概览 Vue运行内部运行机制 总览图: 初始化及挂载 在 new Vue()之后. Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周期. ...
- HDU-4355-三分
Party All the Time Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- 收集的几个好用的maven mirror
<mirrors> <mirror> <id>jboss-public-repository-group</id> <mirrorOf>ce ...