在使用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. 007面试题__==和equals的区别

    常见面试题03: 问:==和equals的区别 1)对于基本类型而言,比较的是数值是否相等 对于引用类型而言,比较的是内存地址是否相等 2)equals:比较的是两个对象的内容是否相等

  2. 跟我读论文丨Multi-Model Text Recognition Network

    摘要:语言模型往往被用于文字识别的后处理阶段,本文将语言模型的先验信息和文字的视觉特征进行交互和增强,从而进一步提升文字识别的性能. 本文分享自华为云社区<Multi-Model Text Re ...

  3. BootStrap详解

    1. bootstrap的安装和使用 官网: https://getbootstrap.com/ 中文网: https://www.bootcss.com/ 菜鸟驿站教程网: https://www. ...

  4. Linux —用户和组

    Linux 用户和组 1.用户和组的概念 用户的作用: Authentication:认证 Authorization:授权 Accouting:审计 用户存在的最终目的: 为了实现资源的分派 组的作 ...

  5. vue.js及H5常见跨域问题解决方案

    一.原生H5跨域问题解决方案 1.live-server 代理解决 首先在有node.js环境下,打开命令行工具,输入 npm install live-server -g 全局安装全局安装 live ...

  6. 解决:Uncaught TypeError: $ is not a function

    本来好好的,突然就出现的错误,不过这并不是什么难解决的错误: 我的问题是:在js文件里我定义了一个var $;变量,只要把这个去掉就没问题了. 出现这种错误的解决方法: 1,先看看你的jq文件是否已经 ...

  7. 【深度学习】DNN房价预测

    前言 我们使用深度学习网络实现波士顿房价预测,深度学习的目的就是寻找一个合适的函数输出我们想要的结果.深度学习实际上是机器学习领域中一个研究方向,深度学习的目标是让机器能够像人一样具有分析学习的能力, ...

  8. 【Django】DRF开发中的一些技巧记录

    问题记录 问题1:信号没有按预期触发 描述 编写了信号函数后,并没有如预期一般在必要时候触发,函数如下: @receiver(signals.post_save, sender=Prometheus) ...

  9. Manacher算法讲解——字符串最长回文子串

    引 入 引入 引入 Manachar算法主要是处理字符串中关于回文串的问题的,这没什么好说的. M a n a c h e r 算 法 Manacher算法 Manacher算法 朴素 求一个字符串中 ...

  10. 随机视频API

    首先打开服务器创建一个html文件也可以不创建 代码如下 点击查看代码 <!DOCTYPE html> <html lang="zh-CN"> <he ...