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 ...
随机推荐
- D. Road to Post Office 解析(思維)
Codeforce 702 D. Road to Post Office 解析(思維) 今天我們來看看CF702D 題目連結 題目 略,請直接看原題. 前言 原本想說會不會也是要列式子解或者二分搜,沒 ...
- eclipse之SSH配置hibernate【三】
配置hibernate,没有和spring整合,可以看成独立的部分. 在src下创建hibernate配置文件,hibernate.cfg.xml.主要是sql连接相关配置. <?xml ver ...
- 【转】Setting up SDL 2 on MinGW
FROM: http://lazyfoo.net/tutorials/SDL/01_hello_SDL/windows/mingw/index.php Setting up SDL 2 on MinG ...
- HTTP协议(2)
HTTP协议主要是有HTTP请求报文和HTTP响应报文组成的. HTTP请求报文主要分为四个部分: 第一部分:请求行.独占一行,由请求方法.请求url以及协议/版本组成: 第二部分:请求头,第二行到第 ...
- P1526 [NOI2003]智破连环阵
目录 题意描述 算法分析 闲话 初步分析 具体思路 剪枝一 剪枝二 剪枝三 总结一下 代码实现 预处理 剪枝一 剪枝二 剪枝三 二分图匹配 代码综合 结语 又是被楼教主虐的体无完肤的一天 题意描述 在 ...
- 力扣 - 768. 最多能完成排序的块II
目录 题目 思路 代码实现 复杂度分析 题目 这个问题和"最多能完成排序的块"相似,但给定数组中的元素可以重复,输入数组最大长度为2000,其中的元素最大为10**8. arr是一 ...
- 解决windows下Chrome78以上跨域失效问题
1. 为什么需要解决chrome浏览器跨域的问题? 基于Hybird App的H5部分,可以直接打包进apk或者ipa包中,在开发过程中也不需要放置到临时搭建的服务器上,直接在本地打开html静态页面 ...
- leetcode76set-matrix-zeroes
题目描述 给定一个m*n的矩阵,如果有一个元素是0,就把该元素所在的行和列上的元素全置为0,要求使用原地算法. 拓展: 你的算法有使用额外的空间吗? 一种比较直接的算法是利用O(m,n)的空间,但是这 ...
- CORS与Django
前言 在前后端分离项目中,如何解决跨域请求是一个必须要面对的问题.因为前端和后端的数据交互会被浏览器的同源策略所挟持,在很早之前我在博客园发了一篇文章,大概就说了一下如何简单粗暴的解决跨域. 其实那种 ...
- Python基础教程分享,视频教程免费下载!
给大家分享一套我初学Python时看的一套基础教程,是视频教程,免费分享给大家,希望对正在学习Python或者打算学习Python的朋友有帮助哈~~ 废话不多说 为期92天的Python基础教程视频教 ...