在使用echarts的堆叠图时,我们鼠标悬停的浮窗里的信息可能并不是我们想要的信息,这个时候需要我们配置一下,因为堆叠图的trigger的类型是坐标轴触发的,数据是多组数据,所以我们需要遍历一下数据,进行编辑


tooltip: {
trigger: 'axis', //这里用的是坐标轴触发,多个数据
formatter: function (params) {
console.log(params); //这里是在同一坐标轴的数据
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if (params[i].seriesType === "bar") {
let value
if(params[i].value){
value = params[i].value
}else {
value = 0
}
relVal += '<br/>' + params[i].seriesName + ' : ' + value + "%";
}
}
return relVal;
},
}

echarts BAR堆叠图显示百分比的更多相关文章

  1. 转:C# 中 MSCHART 饼状图显示百分比

    转自:http://blog.sina.com.cn/s/blog_51beaf0e0100yffo.html 1)显示百分比 Chart1.Series["Series1"].L ...

  2. 06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图

    1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsiz ...

  3. Echarts-之显示百分比

    对于使用echarts要显示百分比,要改两个地方,第一个地方时坐标轴显示为百分比的格式,第二个是让值以百分比的形式显示,如50,在图上面显示为50%. yAxis: [ { type: 'value' ...

  4. echarts —— tooltip 鼠标悬浮显示提示框属性

    最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...

  5. openlayers-统计图显示(中国区域高亮)

    openlayers版本: v3.19.1-dist 统计图效果:         案例下载地址:https://gitee.com/kawhileonardfans/openlayers-examp ...

  6. 数据可视化基础专题(十二):Matplotlib 基础(四)常用图表(二)气泡图、堆叠图、雷达图、饼图、

    1 气泡图 气泡图和上面的散点图非常类似,只是点的大小不一样,而且是通过参数 s 来进行控制的,多的不说,还是看个示例: 例子一: import matplotlib.pyplot as plt im ...

  7. python数据可视化-matplotlib入门(5)-饼图和堆叠图

    饼图常用于统计学模块,画饼图用到的方法为:pie( ) 一.pie()函数用来绘制饼图 pie(x, explode=None, labels=None, colors=None, autopct=N ...

  8. WPF仿百度Echarts人口迁移图

    GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...

  9. [置顶] echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

随机推荐

  1. java------常见的进制、不同进制在代码中的表现形式、进制之间的转化、分辨率、三原色、计算机的存储规则

    常见的进制: 常见的进制:二进制.八进制.十进制.十六进制 不同进制在代码中的表现形式: 进制之间的转化: 二进制转十进制: 普通方法: 快捷方法: 八进制转十进制: 十六进制转十进制: 总结: 分辨 ...

  2. 别再用 System.currentTimeMillis 统计耗时了,太 Low,试试 Spring Boot 源码在用的 StopWatch吧,够优雅!

    大家好,我是二哥呀! 昨天,一位球友问我能不能给他解释一下 @SpringBootApplication 注解是什么意思,还有 Spring Boot 的运行原理,于是我就带着他扒拉了一下这个注解的源 ...

  3. ExcelPatternTool: Excel表格-数据库互导工具

    ExcelPatternTool Excel表格-数据库互导工具 介绍: 指定Pattern文件-一个规则描述的json文档,基于此规则实现Excel表格与数据库之间的导入导出,校验等功能. 特点: ...

  4. Less混合结合:nth-child()选择器的高级玩法

    1.先看效果图 上图中比较麻烦的是每块的底色处理,下面看怎么处理 2.:nth-child(n) 选择器 匹配属于其父元素的第 N 个子元素,不论元素的类型. n 可以是数字.关键词或公式. 数字:最 ...

  5. Python 工匠: 异常处理的三个好习惯

    前言 这是 "Python 工匠"系列的第 6 篇文章.(点击原文链接,可查看系列其他文章) 如果你用 Python 编程,那么你就无法避开异常,因为异常在这门语言里无处不在.打个 ...

  6. Spring源码 16 IOC refresh方法11

    参考源 https://www.bilibili.com/video/BV1tR4y1F75R?spm_id_from=333.337.search-card.all.click https://ww ...

  7. Maven 配置文件如何读取pom.xml的内容

    编写配置文件 配置文件读取pom文件内容用@@的方式 logging: level: cn.sail: @logging.level@ org.springframework: warn config ...

  8. SvelteUI:运用svelte3构建的网页版UI组件库(升级版)

    距离上次分享的svelte-ui 1.0已经一月有余,这次带来全新升级完整版svelte-ui 2.0. 这次优化并新增15+个组件.在开发之初借鉴了element-ui组件库,所以在组件结构及语法上 ...

  9. 项目一共30个模块,你叫我maven版本一个个手动改?

    大家好呀,我是铂赛东,一个乱入公众号博主的开源作者.今天分享一个maven小技巧,希望帮助到大家. 之前有个群友私聊问我,如何快速统一去更改项目中所有的maven版本号,他说之前都是手动一个个去修改, ...

  10. net::ERR_BLOCKED_BY_CLIENT 错误导致页面加载不出来

    AdBlock 禁止广告的插件屏蔽你的网络请求,屏蔽了一些重要的文件,导致页面加载不出来. 解决方案: 1.修改资源文件的名称,把ad替换成其他字符: 2.关闭广告拦截器: 3.广告拦截器设置白名单.