echarts柱状图接口提供的数据是数值,要在顶部展示百分比
查阅echarts配置文档,柱状图并没有类似于饼图的直接展示百分比的参数,所以需要自己配置。


window.onload = function () {
var list1=[25.02,19.76, 14.71, 14.11, 14.65];
var list2= [69.04,71.66,76.76,75.78,73.51];
var option = {
color:['#4e8df6','#d3e8f9','#feb870','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD','#D7504B','#C6E579','#F4E001'],
legend: {
left: 'center',
top: 'bottom',
},
tooltip: {
formatter: '{a}:{c}%',
},
xAxis:[ {
type: 'category',
splitLine: {
show: true
},
data: ['2000年', '2005年', '2010年', '2015年', '2020年']
}],
yAxis: {
type: 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value}%'
},
splitLine: {
show: true
},
splitArea: {
show: true,
areaStyle:{
color:['#f5f8ff','#fbfbfb']
}
},
show: true
},
series: [
{
name: '甲数据',
type: 'bar',
label: {
show: true,
position: 'top',
formatter: function(v) {
var val = v.data;
var total=list1[v.dataIndex]+list2[v.dataIndex]+list3[v.dataIndex];
return (val/total*100).toFixed(2) +'%';
},
textStyle : {
fontWeight : 'normal',
fontSize : 12,
color:'#205291'
}
},
data: list1
},
{
name: '乙数据',
type: 'bar',
label: {
show: true,
position: 'top',
formatter: function(v) {
var val = v.data;
var total=list1[v.dataIndex]+list2[v.dataIndex]+list3[v.dataIndex];
return (val/total*100).toFixed(2) +'%';
},
textStyle : {
fontWeight : 'normal',
fontSize : 12,
color:'#205291'
}
},
data: list2
}
]
};
var myChart = echarts.init(document.getElementById('myecharts0'));
myChart.setOption(option);
}
效果

echarts柱状图接口提供的数据是数值,要在顶部展示百分比的更多相关文章
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小 大] | ...
- 简述在ADO中使用接口的抽象数据提供程序以及ADO.NET数据提供程序工厂模型
如何在ADO中使用接口的抽象数据提供程序 在cofig中 appSettings下,配置数据连接类型 <appSettings> <!--这个键值映射到枚举值中的某个值--> ...
- Flask插件wtforms、Flask文件上传和Echarts柱状图
一.wtforms 类比Django的Form组件Form组件的主要应用是帮助我们自动生成HTML代码和做一些表单数据的验证 flask的wtforms用法跟Form组件大同小异参考文章:https: ...
- 关于Echarts柱状图实现的细节
echarts柱状图显示数值[1] echarts2: itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...
- JDBC中Statement接口提供的execute、executeQuery和executeUpdate之间的区别
Statement 接口提供了三种执行 SQL 语句的方法:executeQuery.executeUpdate 和 execute.使用哪一个方法由 SQL 语句所产生的内容决定. 方法execut ...
- Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...
- JDBCTM中Statement接口提供的execute、executeQuery和executeUpdate之间的区别
Statement 接口提供了三种执行 SQL 语句的方法:executeQuery.executeUpdate 和 execute.使用哪一个方法由 SQL 语句所产生的内容决定. 方法execut ...
- Jquery Mobile实例--利用优酷JSON接口读取视频数据
本文将介绍,如何利用JqueryMobile调用优酷API JSON接口显示视频数据. (1)注册用户接口. 首页,到 http://open.youku.com 注册一个账户,并通过验证.然后找到A ...
随机推荐
- ElasticSearch研究
前言 ES相关技术文档,很久之前看的,一门技术时间长不去研究就会容易忘了,应有些小伙伴的要求希望我做一期ES技术专栏,我就把以前看过的相关文档整理整理,给大家分享下. 1 ElasticSearc ...
- 吐槽一下Abp的用户和租户管理模块
1. 背景 ASP.NET Core 基于声明的访问控制到底是什么鬼? 聊到基于声明的身份认证将 身份和签发机构分离,应用程序信任签发机构,故认可签发的身份信息. -- --- --- --- Cla ...
- 09 Servlet中间服务 连接前段和后端
import 导入 在当前类中使用外包中的类时使用 cookies 缓存 Alt + enter 提示快捷键 Servlet 服务 (连接前段和后端) Servlet本质就是Java类 Ja ...
- python中使用with操作文件,为什么不需要手动关闭?
python中的with关键字,它是用来启动一个对象的上下文管理器的.它的原理是,当我们使用with去通过open打开文件的时候,它会触发文件对象的上下文管理器, 当with中的代码结束完成之后,去自 ...
- Git系列:常用命令
一.背景 作为一名程序员,怎么能不懂Git那些常用命令呢?于是花费一点时间来总结Git命令.关于安装的话,就不讲了. 二.常用命令 1.配置全局的用户名称和用户邮箱 git config --glob ...
- Java学习的第四十七天
1.用类函数来写时间类 import java.util.Scanner; public class Cjava { public static void main(String[]args) { T ...
- 正式班D20
2020.11.02星期五 正式班D20 目录 11 软件包管理 11.1 软件包介绍 11.1.1 编程语言分类 11.1.2 三种安装包 11.2 rpm包管理 11.2.1 rpm包简介 11. ...
- Linux 系统编程 学习:07-基于socket的网络编程2:基于 UDP 的通信
Linux 系统编程 学习:07-基于socket的网络编程2:基于 UDP 的通信 背景 上一讲我们介绍了网络编程的一些概念.socket的网络编程的有关概念 这一讲我们来看UDP 通信. 知识 U ...
- 5、Django之模板层
一 模板简介 在刚刚介绍完的视图层中我们提到,浏览器发送的请求信息会转发给视图函数进行处理,而视图函数在经过一系列处理后必须要有返回信息给浏览器.如果我们要返回html标签.css等数据给浏览器进行渲 ...
- css移动端适配 1px边框的解决方案
.border{ width: 100px; height: 100px; position: relative; } //加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是 ...