echarts柱状图显示百分比
1.没有百分比的源码:
<!DOCTYPE html>
<html style="height: 100%"><head><meta charset="utf-8"></head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script><script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '堆叠条形图';option = {tooltip : {trigger: 'axis',axisPointer : { // 坐标轴指示器,坐标轴触发有效type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'}},legend: {data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value'},yAxis: {type: 'category',data: ['周一','周二','周三','周四','周五']},series: [{name: '直接访问',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'insideRight'}},data: [1, 20, 3, 30, 40]},{name: '邮件营销',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'insideRight'}},data: [99, 80, 97, 70, 60]}]
};;
if (option && typeof option === "object") {myChart.setOption(option, true);
}myChart.on('click', function (params) {console.log(params);
});</script></body>
</html>
注意如果上面的js失效了。自己改下啊。或者用本地的,或者用其他cdn的。
可以看到并没有百分比,如下图:
2.修改format带百分比:
1.柱状图里面的format,关键代码如下:
{name: '直接访问',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'insideRight',formatter: '{c}%'}},data: [1, 20, 3, 30, 40]},{name: '邮件营销',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'insideRight',formatter: '{c}%'}},data: [99, 80, 97, 70, 60]}
其实就是增加了两行 formatter: '{c}%',
看下,柱状图就会显示百分比了:
但是可以看到,弹框里面“直接访问:30” 依然不是百分比。所以这个也要改下。
3.修改tooltip下面的format,实现百分比,核心代码如下:
tooltip : {trigger: 'axis',axisPointer : { // 坐标轴指示器,坐标轴触发有效type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'},formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'},
其实就是增加了:formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'
看下效果
可以看到有百分比了。
那么上面format中的a,b,c什么意思呢,参考官方文档:
模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:
折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。
上面用的“字符串模板”方式。
还可以使用“回调函数”方式,具体如下
tooltip : {trigger: 'axis',axisPointer : { // 坐标轴指示器,坐标轴触发有效type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'},formatter: function (datas) {var res = datas[0].name + '<br/>'for (var i = 0, length = datas.length; i < length; i++) {res +=datas[i].componentType + ' ';res +=datas[i].seriesType + ' ';res +=datas[i].seriesIndex + ' ';res +=datas[i].seriesName + ' ';res +=datas[i].dataIndex + ' ';res +=datas[i].data + '% ';res +=datas[i].value + '% ';res +=datas[i].color + '<br/>'; }return res}},
效果如下:
可以看到值依然可以百分比显示,当然多了很多不需要的内容,你们可以自行调整,我是为全一点,让你看到每个字段的意思。
具体这些字段的意思,其实官方也有说明:
{componentType: 'series',// 系列类型seriesType: string,// 系列在传入的 option.series 中的 indexseriesIndex: number,// 系列名称seriesName: string,// 数据名,类目名name: string,// 数据在传入的 data 数组中的 indexdataIndex: number,// 传入的原始数据项data: Object,// 传入的数据值value: number|Array,// 数据图形的颜色color: string,}
参考官方api地址:
https://echarts.baidu.com/option.html#tooltip.formatter
echarts柱状图显示百分比相关推荐
- echarts柱状图显示百分比_Echarts 饼状图显示信息,内容,值,百分比都显示的代码 更改图例等问题汇总...
增加了显示比例,显示内容 显示比例代码显示完整代码: series: [{name:'访问来源',type:'pie',radius: ['50%', '70%'],avoidLabelOverlap ...
- 解决echarts饼图显示百分比,和显示内容字体及大小,如何给eCharts饼图区域指定颜色
解决echarts饼图显示百分比,和显示内容字体及大小 // 基于准备好的dom,初始化echarts实例 var pieEchart = echarts.init(document. ...
- echarts饼图显示百分比,和显示内容字体及大小
// 基于准备好的dom,初始化echarts实例var pieEchart = echarts.init(document.getElementById('pieEchart'));// 指定图表的 ...
- echarts年龄饼图_解决echarts饼图显示百分比,和显示内容字体及大小
//基于准备好的dom,初始化echarts实例 var pieEchart = echarts.init(document.getElementById('pieEchart'));//指定图表的配 ...
- python饼图显示百分比_解决echarts饼图显示百分比,和显示内容字体及大小
//基于准备好的dom,初始化echarts实例 var pieEchart = echarts.init(document.getElementById('pieEchart'));//指定图表的配 ...
- echarts饼图显示百分比和显示内容字体及大小属性设置
源码 let circularGraph= {title: "标题",head: false,tuglie: ["微信","支付宝",&qu ...
- Echarts-之显示百分比
对于使用echarts要显示百分比,要改两个地方,第一个地方时坐标轴显示为百分比的格式,第二个是让值以百分比的形式显示,如50,在图上面显示为50%. yAxis: [ { type: 'value' ...
- echarts柱状图值为0时不显示以及柱状图百分比展示
echarts柱状图值为0时不显示以及柱状图百分比展示 1.效果展示 2.代码 <template><div id="container"><div ...
- Echarts柱状图(顶部和内部的数值显示)/(内部数值的百分比计算)/(顶部显示多行数据)/(柱体圆角)
先看效果: 如何实现顶部和内部的数值显示并且计算出两个柱状图的百分比: 首先是全部源码: <div ref="country" id="country" ...
- R语言ggplot2可视化百分比显示实战:纵轴显示为百分比、在柱状图上显示百分比、按照因子变量绘制分组子图(纵轴显示为百分比)、可视化图中显示数据百分比
R语言ggplot2可视化百分比显示实战:纵轴显示为百分比.在柱状图上显示百分比.按照因子变量绘制分组子图(纵轴显示为百分比).可视化图中显示数据百分比 目录
最新文章
- 内核-程序员的顶级梦寐
- shell echo 换行 不换行 打印换行
- .NET下安装卸载WindowsService批处理脚本
- 数据库存在即更新的并发处理 - 转
- mock java_JAVA的mock工具mockito简介
- 用jOOQ用Java编写SQL
- 毕业生该不该做软件开发这一行?
- 通俗的解释交叉熵与相对熵
- sybase:SQL Exception and Warning Messages大全
- carrot2聚类的不同聚类算法 选用方法
- win10 AD15 安装步骤
- Mac卸载creative cloud
- 获取B站SESSDATA及解决403
- 测试的阿萨德萨达阿萨德
- java bitmap api,RoaringBitmap的使用
- MPEG-TS封装格式
- 小额信贷管理系统解决方案
- 手机端Alook浏览器手动抓取京东Cookie教程
- Hadoop的完全分布式搭建
- 数据可视化——R语言为ggplot图形添加P值和显著性水平
热门文章
- 克隆加密狗和原加密狗_遥控钥匙和加密狗有什么区别?
- 共享指定文件给指定电脑
- MFC使用SaveAs函数保存Excel文件时,弹出“文件已存在”问题
- JSEclipse安装后无法打开js文件_详解使用Pandoc与Reveal.js制作幻灯片
- 人工智能应用开发全流程的成本分析
- 实现h5链接打开Android app
- 计算机表格函数最大值操作,excel表格的各函数的基本操作
- wago edz 下载_用电子枪制造的WeakAuras Wago.io桥
- 运动目标检测MATLAB实现
- 最新综述!NLP中的Transformer预训练模型