在使用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. 使用OnPush和immutable.js来提升angular的性能

    angular里面变化检测是非常频繁的发生的,如果你像下面这样写代码 <div> {{hello()}} </div> 则每次变化检测都会执行hello函数,如果hello函数 ...

  2. go-zero单体服务使用泛型简化注册Handler路由

    一.Golang环境安装及配置Go Module https://go-zero.dev/cn/docs/prepare/golang-install mac OS安装Go# 下载并安装Go for ...

  3. Modbus转BACnet IP网关

    BACnet是楼宇自动化和控制网络数据通信协议的缩写.它是为楼宇自动化网络开发的数据通信协议   根据1999年底互联网上楼宇自动化网络的信息,全球已有数百家国际知名制造商支持BACnet,包括楼宇自 ...

  4. Python3.7+Django2.0.4配合Mongodb打造高性能高扩展标签云存储方案

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_141 书接上回,之前有一篇文章提到了标签云系统的构建:Python3.7+jieba(结巴分词)配合Wordcloud2.js来构 ...

  5. Mybatis的使用(4)

    1:解决实体类成员变量和数据库表中字段名称不一致的问题: 方法1:在写sql语句时,给表中的列名起别名,名字和实体类名称一样 方法2:使用resultMap来解决: 例如:实体类中成员变量为id,na ...

  6. 在VMD上可视化hdf5格式的分子轨迹文件

    技术背景 在处理分子动力学模拟的数据时,不可避免的会遇到众多的大轨迹文件.因此以什么样的格式来存储这些庞大的轨迹数据,也是一个在分子动力学模拟软件设计初期就应该妥善考虑的问题.现有的比较常见的方式,大 ...

  7. Java连接数据库从入门到入土

    Java连接数据库 一.最原始的连接数据库 是没有导入任何数据源的:只导入了一个数据库驱动:mysql-connector-java-8.0.27.jar 首先是编写db.proterties文件 d ...

  8. Docker Compose安装部署Jenkins

    流水线可以让项目发布流程更加清晰,docker可以大大减少Jenkins配置. 1.前言 数据卷挂载到 /var 磁盘目录下,因为该磁盘空间较大,后面需要挂载容器数据卷,以防内存吃紧. 为了可以留存启 ...

  9. Docker 04 容器命令

    参考源 https://www.bilibili.com/video/BV1og4y1q7M4?spm_id_from=333.999.0.0 https://www.bilibili.com/vid ...

  10. java学习第一天.day03

    运行程序数据存储 ASCII Unicode(万国码) A在码表的顺序是65,a在码表的顺序是97,1代表49 变量 定义一个变量声明数据类型是开辟一个空间存储数据,java对数据的定义比较严格,比如 ...