option = {

     tooltip: {
trigger: 'item',
formatter:'{c}%'    //这是关键,在需要的地方加上就行了
},
grid: {
borderWidth: 0,
y: 80,
y2: 60
},
xAxis: [
{
type: 'category',
show: false,
data: ['Line', 'Bar', 'Scatter', 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel']
}
],
yAxis: [
{
type: 'value',
show: false
}
],
series: [
{
name: 'ECharts例子个数统计',
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}%'    //这是关键,在需要的地方加上就行了
}
}
},
data: [12,21,10,4,12,5,6,5,25,23,7],
}
]
};

结果如下:

    

附上官网链接:http://echarts.baidu.com/echarts2/doc/example/bar14.html

Echarts柱状图百分比显示的更多相关文章

  1. echarts柱状图标签显示不完全的问题

    echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...

  2. ECharts 柱状图顶部显示百分比

    1.引入jquery.js和echarts.js <script src="../jquery-1.8.3.min.js" type="text/javascrip ...

  3. Echarts 不能百分比显示或显示有问题

    1,设折线图宽为100%(如:容器div的class=“RiBarBot”宽为880px),刚初始化时隐藏折线图(或后期刷新.隐藏与显示折线图时),当点击显示折线图时,获取到的宽只有100px,并不是 ...

  4. echarts柱状图坐标文字显示不完整解决方式

    echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...

  5. echarts柱状图个数多,横坐标名称过长显示不全解决方法

    当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...

  6. echarts 柱状图

    效果: 图一:Y轴显示百分比  柱状图定点显示数量个数 图二:x轴  相同日期对应的每个柱子显示不同类型的数量 代码: 容器: <div id="badQuaAnalyze" ...

  7. vue Echarts 柱状图点击事件

    drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...

  8. Echarts柱状图实现不同颜色渐变色

    第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...

  9. 关于Echarts柱状图实现的细节

    echarts柱状图显示数值[1] echarts2:  itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...

随机推荐

  1. Python 多进程 多线程 协程 I/O多路复用

    引言 在学习Python多进程.多线程之前,先脑补一下如下场景: 说有这么一道题:小红烧水需要10分钟,拖地需要5分钟,洗菜需要5分钟,如果一样一样去干,就是简单的加法,全部做完,需要20分钟:但是, ...

  2. (转)X-Frame-Options响应头缺失漏洞

    原文:https://blog.csdn.net/ljl890705/article/details/78071601 x-frame-options响应头缺失漏洞. 故名思意,就是返回的响应头信息中 ...

  3. C++ 各种继承

    博客园首页博问闪存新随笔联系订阅 管理随笔- 文章- 评论- C++继承:公有,私有,保护 公有继承(public).私有继承(private).保护继承(protected)是常用的三种继承方式. ...

  4. mac 上位Idea 配置Project SDK

    问题 刚开始没有Project SDK 方法 添加SDK: /Library/Java/JavaVirtualMachines/jdkXYZ_VERSION.jdk/Contents/Home/jre ...

  5. Navicat备份、还原mysql数据库

    注:本文为原创,转载请附带链接:https://www.cnblogs.com/stm32stm32

  6. maven官方教程

    What is Maven? At first glance Maven can appear to be many things, but in a nutshell Maven is an att ...

  7. zoj 2724 Windows Message Queue(使用priority_queue容器模拟消息队列)

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2724 题目描述: Message queue is the b ...

  8. C# Azure-让http自动跳转到https链接

    在项目的web.config下面加上下面的配置: <rewrite> <rules> <clear /> <rule name="Redirect ...

  9. [转]Winform开发框架的重要特性总结

    本文转自:https://www.cnblogs.com/wuhuacong/p/3199829.html 从事Winform开发框架的研究和推广,也做了有几个年头了,从最初的项目雏形到目前各种重要特 ...

  10. 简明log4j配置教程

    先准备好log4j需要对应的开发包: apache-log4j-extras-1.2.17.jar slf4j-api-1.6.1.jar slf4j-log4j12-1.6.1.jar 然后就是在项 ...