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. QT开发环境搭建

    一.Qt发展史 1991年,由奇趣科技开发的跨平台C++图形用户界面应用程序开发框架: 2008年,Nokia从Trolltech公司收购Qt, 并增加LGPL的授权模式: 2011年,Digia从N ...

  2. django中url,静态文件,POST请求的配置 分类: Python 2015-06-01 17:00 789人阅读 评论(0) 收藏

    平时使用的是pycharm,所以这篇文章主要也是使用pycharm默认创建的django项目为基础进行讲解.项目目录如下图: 1.URL的配置 当创建好项目后,运行项目就可以看到django默认的页面 ...

  3. ASP.NET Core 与 .NET Core 演变与基础概述

    https://github.com/dotnet/corehttps://github.com/aspnet/home 今天看到 .NET Core 的改名计划,感觉跨平台的时代快要来了,从之前的 ...

  4. Semaphore 信号量

    一个计数信号量.从概念上讲,信号量维护了一个许可集.如有必要,在许可可用前会阻塞每一个 acquire(),然后再获取该许可.每个 release() 添加一个许可,从而可能释放一个正在阻塞的获取者. ...

  5. 各大APP注册时发送短信验证码是怎么实现的?

    第一步:获得验证码:1.找到相关的表.2.用什么发送,post,get ,ajax,当然ajax首选3.post之前要js先判断是手机号码11位,并且全部都是数字,或者用正则也行.4.用ajax发送数 ...

  6. 文档对象模型DOM(一)

    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 每加载一个标记 注释 或者属性,就将其当 ...

  7. logstash与kafka消息传输<一>

    1.版本: logstash6.1.2.kafka-0.11.kafka-0.8.2.java1.8 Note: Logstash requires Java 8. Java 9 is not sup ...

  8. mongodb备份策略

    概述 数据库的备份非常非常非常重要!!!否则出问题连哭的机会有没有(欲哭无泪)今天主要是做一个mongodb的数据库备份. 1.关于备份 备份其实很简单,这里选择的是对mongodb中的某个库进行全备 ...

  9. openerp7 时区问题解决--改成本地时区

    由于目前openerp的时区,读取的是UTC时间,而我国本地时间比UTC快8小时 问题就导致,写入数据库的时候时间相差8小时,以及Openerp日志输出时间格式也相差8小时和前端显示问题 1.更改op ...

  10. 小程序获取地址授权的修改 wx.openSetting需点击

    开发者可以通过 wx.openSetting 接口来打开小程序设置界面并返回用户的设置结果.在原来的 wx.openSetting 接口中,我们允许开发者直接调用此接口,但目前我们发现有不少开发者滥用 ...