Echarts柱状图百分比显示
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柱状图百分比显示的更多相关文章
- echarts柱状图标签显示不完全的问题
echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...
- ECharts 柱状图顶部显示百分比
1.引入jquery.js和echarts.js <script src="../jquery-1.8.3.min.js" type="text/javascrip ...
- Echarts 不能百分比显示或显示有问题
1,设折线图宽为100%(如:容器div的class=“RiBarBot”宽为880px),刚初始化时隐藏折线图(或后期刷新.隐藏与显示折线图时),当点击显示折线图时,获取到的宽只有100px,并不是 ...
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- echarts柱状图个数多,横坐标名称过长显示不全解决方法
当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...
- echarts 柱状图
效果: 图一:Y轴显示百分比 柱状图定点显示数量个数 图二:x轴 相同日期对应的每个柱子显示不同类型的数量 代码: 容器: <div id="badQuaAnalyze" ...
- vue Echarts 柱状图点击事件
drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...
- Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...
- 关于Echarts柱状图实现的细节
echarts柱状图显示数值[1] echarts2: itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...
随机推荐
- 给1~3年iOS开发 经验朋友们的一些建议(附BAT面试题)
前言 由于笔者是做 iOS 开发的,因此本文也仅对做 iOS 的同行们有针对性,其他方向仅供参考. 1,如果你: 1~3年左右工作经验,本科,非计算机相关科班出生,学校又比较一般. 实习企业不理想没有 ...
- 通过超链接启动App
问题:微信里分享一个链接给你,你点击这个链接,一.如果你安装了这个钱包,那就直接打开钱包.二.如果没有安装钱包就跳转到下载钱包的地方 要点:首先要让浏览器知道 app 是谁,然后再让浏览器调用app ...
- git merge 的过程及冲突处理演示
master分支上有一个1.txt文件,进行修改后提交 $ cat 1.txt 1 11 12 $ echo 13 >> 1.txt $ git commit -a -m "mo ...
- -webkit-CSS属性拾遗
-webkit-input-placeholder 这个伪类用于设置输入框placeholder文字的样式,基本可以设置例子如下: input::-webkit-input-placeholder { ...
- mpvue使用scroll-view实现图片横向滑动
html代码 <div class="swiper-home"> <scroll-view scroll-x="true" style=&qu ...
- JAVA中 XML与数据库互转 学习笔记三
要求 必备知识 JAVA基础知识,XML基础知识,数据库的基本操作. 开发环境 MyEclipse10/MySql5.5 资料下载 源码下载 数据库在数据查询,修改,保存,安全等方面与其他数据处理 ...
- 高可用Hadoop平台-实战
1.概述 今天继续<高可用的Hadoop平台>系列,今天开始进行小规模的实战下,前面的准备工作完成后,基本用于统计数据的平台都拥有了,关于导出统计结果的文章留到后面赘述.今天要和大家分享的 ...
- Solidity的delete操作
Solidity中有个特殊的操作符delete用于释放空间,因为区块链技术做为一种公用资源,为避免大家滥用.且鼓励主动对空间的回收,释放空间将会返还一些gas. delete关键字的作用是对某个类型值 ...
- Spring @ResponseStatus
@ResponseStatus这个注解确实是个令我头疼的注解. 先记录下@ResponseStatus注解的定义. 记录几个得到的信息:@ResponseStatus声明在方法.类上, Spring3 ...
- 基于opencv将视频转化为字符串Java版
基于opencv将视频转化为字符串Java版 opencv java 先上一个效果图吧 首先,弄清一下原理 我们要将视频转化为字符画,那么就需要获取画面的每一帧,也就是每一张图片,然后将图片进行转化 ...