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 ...
随机推荐
- linux安装日志切割程序
====linux安装日志切割程序==== 安装 gcc(1) yum insatll gcc (2)# cd cronolog-1.6.2 4.运行安装 # ./configure# make# m ...
- Linux配置和管理设备映射多路径multipath
(一)多路径管理软件的由来 在企业中,服务器与存储通常是分开放置的,服务器上的硬盘通常用来安装操作系统和应用软件,业务数据则是存储在单独的存储设备上,那么,服务器与存储是如何连接的呢?根据存储协议,经 ...
- 美区Apple ID账号共享
前言 前几天我已经分享了日区的账号,今天我来分享一下美区的账号.说到这个美区的账号,满满的记忆呀!这是我第一个公众号时创建的外服账号,里面的软件比较多,原本想整理一下自己购买了哪些软件的,乍一看,已购 ...
- 对精致码农大佬的 [理解 volatile 关键字] 文章结论的思考和寻找真相
一:背景 1. 讲故事 昨天在园里的编辑头条看到 精致码农大佬 写的一篇题为:[C#.NET 拾遗补漏]10:理解 volatile 关键字 (https://www.cnblogs.com/will ...
- Excel基础—为什么学习Excel
吾生也有涯,而知也无涯 点赞再看,养成习惯 自从个人计算机开始普及以后,Excel就得到了广泛的传播,工作学习生活中不处不存在Excel的影子,不论是考勤,工资还是其他的统计等等,都离不开Excel. ...
- 请教:Effective Java 第120页,代码运行未重现报错
在阅读<Effective Java 第二版>时,尝试编写重现第120页问题,发现未重现报错信息,可以正常运行并输出结果.有知道原因的请在评论中留言指导一下,谢谢!!! 问题如下
- 手把手教你使用容器服务 TKE 集群审计排查问题
概述 有时候,集群资源莫名被删除或修改,有可能是人为误操作,也有可能是某个应用的 bug 或恶意程序调用 apiserver 接口导致,需要找出 "真凶".这时候,我们需要为集群开 ...
- c#反转
string[] arr = Console.ReadLine().Split(' '); string result = string.Empty; for (int i = arr.Count() ...
- python爬虫00什么是爬虫
用一个自动化的程序把网站背后的程序爬取下来. 在互联网上许许多多的网站,他们都是托管在服务器上的,这些服务器24小时运行着,刻刻 等待着别人的请求.所以,爬虫首先会模拟请求,就好像你在浏览器输入网址, ...
- .NET操作Excel
一.读取Excel数据,并显示 1.配置文件 <configuration> <system.web> <compilation debug="true&quo ...