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---饼图的更多相关文章

  1. echarts标准饼图(一)——基本配置demo

    echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title)配置 三.提示框(tooltip)配置 四.图例(legend)配置 五.系列列表(series )配置 下面是一 ...

  2. ECharts 环形饼图 动态获取json数据

    ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...

  3. echarts中饼图显示百分比

    通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法:     tooltip : {         trigger: ' ...

  4. echarts标准饼图解读(一)——提示框(tooltip)配置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Echarts 解决饼图文字过长重叠的问题

    之前在网上查找了很多关于解决饼图文字描述过长导致重叠的问题,找了很多一直没有一个合适的解决方案,最后自己只能花时间研究echarts文档,功夫不负有心人,终于解决了文字重叠展示不全等问题. 废话不多说 ...

  6. echarts圆饼图设置默认选中项并在中间显示文字

    效果: 代码: var myChart = echarts.init(document.getElementById('quanshi-echarts-two')); option = { grid: ...

  7. echarts实现饼图及横向柱状图的绘制

    项目中需要绘制饼图,因此简单学习了下echarts的基本使用.head中引入js文件: <script src="/static/frame/echarts/echarts.min.j ...

  8. Qt+ECharts开发笔记(四):ECharts的饼图介绍、基础使用和Qt封装百分比图Demo

    前言   前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt.  本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.   Demo演示 ...

  9. echarts标准饼图(二)——标题(title)配置

    标题(title)配置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  10. ECharts之饼图和柱形图demo

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 老话题之C#写邮件发送

    唉!近来特么QQ邮件也犯二,突然间以前写的代码邮件发不出去,各种报错,无奈之下,换成了@163.com,可是报错依然,该开通(POP3/SMTP/IMAP)的都开通了!我勒了个草,像是在玩哥一样,还好 ...

  2. C++实现最基本的LRUCache服务器缓存

    目录: 一.介绍: 二.数据结构: 三.主要的两个函数接口Put()和Get(): 四.C++代码实现: 后台开发必备知识,不过我不是搞这个的,只是因为很久以前就想写这些东西,事情多,拖到现在.写的过 ...

  3. c++ 使用WinHTTP实现文件下载功能

    因为要项目中要想要实现一个软件自动更新的功能,之前是使用socket直接下载.但切换下载源的时候很麻烦.所以换用http方式. 网上找了很多资料,基本上就是下面几种: 1.curllib //功能强大 ...

  4. Redis-与python交互

    安装包 到中文官网查找客户端代码 联网安装 sudo pip install redis 使用源码安装 unzip redis-py-master.zip cd redis-py-master sud ...

  5. makefile中的word函数作用是什么

    答:用来取单词的函数,示例如下: $(word 1,hello jello yello) 上面的语句执行后的结果为hello,意为取字符串的第一个单词

  6. Nginx解决post请求405问题

    和工商银行的一个合作项目,对方客户端需要请求我们的一个静态页面,但是客户端发送过来的请求方法用的post,日志显示405错误(请求方法错误),正常一个静态页面直接用get请求就可以了,工行那边说写死了 ...

  7. 安迪的第一本字典 - set--sstream

    #include <iostream> #include <string> #include <set> #include <sstream> usin ...

  8. exit()子程序终止函数与return()函数的差别

    在main函数中我们通常使用return (0);这样的方式返回一个值. 但这是限定在非void情况下的也就是void main()这样的形式. exit()通常是用在子程序中用来终结程序用的,使用后 ...

  9. javascript中的__proto__ 和prototype

    不错的一张图

  10. Linux常用插件

    文件传输 虚拟机用xshell连接时,拖拽传输插件 yum install lrzsz setup界面化工具 yum install setuptool yum install ntsysv    # ...