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. 20145331《Java程序设计》第5周学习总结

    20145331<Java程序设计>第5周学习总结 教材学习内容总结 第八章 概述 Java异常机制主要依赖于try.catch.finally.throw.throws五个关键字. 语法 ...

  2. git介绍及常用命令

    Git简介 linus 用C语言编写 2005年诞生 分布式版本管理系统 速度快,适合大规模,跨地区多人协同开发 分布式管理 Git 生态 Git 分布式版本管理系统 Gitlab git私库解决方案 ...

  3. Servlet3.0整合Springmvc(注解版)

    在创建maven的web工程时候,如果报错缺少web.xml 则在pom添加如下配置 : <build> <plugins> <plugin> <groupI ...

  4. Task作为返回值以及Task<TResult>作为返回值

    async await return Task https://stackoverflow.com/questions/25191512/async-await-return-task Can som ...

  5. random模块中最常用的几个函数

    转自:http://www.cnblogs.com/yd1227/archive/2011/03/18/1988015.html 随机整数:>>> import random> ...

  6. GridView绑定数据源 绑定DataReader /DataSet /DataTable

    有一个GridView1 <asp:GridView ID="GridView1" runat="server"></asp:GridView ...

  7. HDFS读写流程learning

    有许多对流程进行描述的博客,但是感觉还是应当学习一遍代码,不然总感觉怪怪的,https://blog.csdn.net/popsuper1982/article/details/51615285,首先 ...

  8. 如何查看一个进程打开哪些fd及对应的文件或套接字操作

  9. NNCRF之NNSegmentation, NNPostagging, NNNameEntity

    这里主要介绍NNSegmentation 介绍: NNSegmentation是一个基于LibN3L的利用神经网络来进行分词的工具. 他可以通过不同的模型(NN, RNN, GatedNN, LSTM ...

  10. GTID主从 与 传统主从复制

    一.主从复制 1.)普通主从复制: 普通主从复制主要是基于二进制日志文件位置的复制,因此主必须启动二进制日志记录并建立唯一的服务器ID,复制组中的每个服务器都必须配置唯一的服务器ID.如果您省略ser ...