web前端之vue和echarts的堆叠柱状图顶部显示总数、鼠标悬浮工具提示、设置图例的显示与隐藏、label、legend、tooltip

MENU

  • 效果图
  • html
  • JavaScrip
  • style
  • 解析


效果图

stackedColumnChart1


html

<template><div><div><div id="idStackedColumnChart" style="width: 100%; height: 680px"></div></div></div>
</template>

JavaScrip

export default {name: "stackedColumnChart",mounted() {this.$nextTick(() => {this.handleStackedColumnChart();});},methods: {/*** 纵向数组求和* @param {Array} list*/verticalArraySummation(list) {let sumArray = [];for (let i = 0; i < list[0].data.length; i++) {let sum = 0;for (let j = 0; j < list.length; j++) sum += list[j].data[i];sumArray.push(sum);}return sumArray;},/*** 初始化图表*/handleStackedColumnChart() {let series = [{name: "示例1",color: "#ff0000",data: [120, 132, 101, 134, 90, 230, 210],},{name: "示例2",color: "#00ff00",data: [220, 182, 191, 234, 290, 330, 310],},{name: "示例3",color: "#0000ff",data: [150, 232, 201, 154, 190, 330, 410],},],len = series.length,zonghe = this.verticalArraySummation(series);series = series.map((item) => {return {name: item.name,itemStyle: {color: item.color,},data: item.data,};});let lenItem = {...series[len - 1],label: {normal: {show: true,position: "top",// 先把所有项的总和算出来,按照顺序放到zonghe数组中// 然后在方法中用下标对应上总和方法// return出来就是label文字的现实// formatter(params) {//   return zonghe[params.dataIndex];// },formatter: (params) => zonghe[params.dataIndex],},},};series[len - 1] = lenItem;this.$beInMotionEcharts("idStackedColumnChart", "stackedColumnChart", {title: {text: "堆叠柱形图",},xAxis: [{data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},],legend: {// 设置show为false,即隐藏所有图例show: true,data: ["示例1", "示例2", "示例3"],},series,// 鼠标悬浮工具提示tooltip: {trigger: "axis",axisPointer: {type: "shadow",},formatter(params) {let res = `<div style="font-weight: 700;">${params[0].name}</div>`,sum = 0;for (let i = 0; i < params.length; i++) {let item = params[i],items = series[item.seriesIndex];if (items.name !== null) {sum += item.data;res += `<div><span class="tooltip" style="background: ${item.color};"></span>${item.seriesName}: ${item.data}</div>`;}}res += `<div><span class="tooltip" style="background: transparent;"></span>总计: ${sum}</div>`;return res;},},});},},
};

style

.tooltip {display: inline-block;margin-right: 5px;border-radius: 50%;width: 10px;height: 10px;
}

解析

网上好多文章用的都是echarts中的barGap: '-100%'让两个系列的柱子重叠,从而实现顶部显示总数。
但是这种方法只适合X轴只有一个堆叠柱状图。
现在的需求是一个X轴项,有两个或两个以上堆叠柱状图,这种方法并不适用该需求。
这种方法的思路是单独再造一个柱状图,然后移动该柱状图的位置,从而实现重叠显示。
既然这种思路不适用该需求,转变思路,直接改变柱状图的lable显示即可。


方式一(不推荐的方式)



方式二
概述

label提供了formatter方法来对显示的文字进行处理,只需要在堆叠柱状图的最后一个数据项上添加以下代码即可。
这样基本完事,后面的第二个柱状图也是这样。只要放到zonghe这个数组中的数据跟你显示的数据能一一对应上,数据就不会错,鼠标悬浮上显示的tooltip数据也不会错。


顶部显示

label: {normal: {show: true,position: "top",// formatter(params) {//   return zonghe[params.dataIndex];// },formatter: (params) => zonghe[params.dataIndex],},
}

鼠标悬浮工具提示

tooltip: {trigger: "axis",axisPointer: {type: "shadow",},formatter(params) {let res = `<div style="font-weight: 700;">${params[0].name}</div>`,sum = 0;for (let i = 0; i < params.length; i++) {let item = params[i],items = series[item.seriesIndex];if (items.name !== null) {sum += item.data;res += `<div><span class="tooltip" style="background: ${item.color};"></span>${item.seriesName}: ${item.data}</div>`;}}res += `<div><span class="tooltip" style="background: transparent;"></span>总计: ${sum}</div>`;return res;},
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/172260.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python-opencv轮廓检测(外轮廓检测和全部轮廓检测,计算轮廓面积和周长)

python-opencv轮廓检测&#xff08;外轮廓检测和全部轮廓检测&#xff0c;计算轮廓面积和周长&#xff09; 通过cv2.findContours&#xff0c;我们可以进行轮廓检测&#xff0c;当然也有很多检测模式&#xff0c;我们可以通过选择检测模式&#xff0c;进行外轮廓检测&#xff…

通过ros系统中websocket中发送sensor_msgs::Image数据给web端显示(二)

通过ros系统中websocket中发送sensor_msgs::Image数据给web端显示(二) mp4媒体流数据 #include <ros/ros.h> #include <signal.h> #include <sensor_msgs/Image.h> #include <message_filters/subscriber.h> #include <message_filters/synchroniz…

从零开始学习管道:管道程序的优化和文件描述符继承问题

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容管道后续的完善&#xff0c;以及解决管道继承多个文件描…

精进Beautiful Soup 小技巧(三)---综合提供效率(缓存/error/多线程/异步)

前言: 提高抓取和解析效率的根本还是在于发送请求;如何从这个方面进行效率提升呢? 深入使用requests.Session() 深入使用requests.Session() 1.持久连接&#xff1a; 当使用 requests.Session() 时&#xff0c;连接会话中所有的请求将优先使用一个TCP连接&#xff0c;即“…

点击url如何唤起nativescript应用程序?

1、低于ios 9.0的版本 可以使用 nativescript-urlhandler&#xff0c;通过在app.component.ts中添加handleOpenURL来实现。 2、高于ios 9.0的版本 可以使用 nativescript-community/universal-links来实现 https://github.com/nativescript-community/universal-links 安装&a…

【Amazon】基于Amazon提供的托管式EKS通过eksctl命令部署Kubernetes集群

文章目录 一、使用CloudFormation创建堡垒机二、安装AWS CLI命令行工具三、安装eksctl命令行工具四、创建集群角色4.1 集群服务角色创建4.2 集群节点组角色创建 五、创建 EKS集群六、登录EKS控制台七、参考链接 一、使用CloudFormation创建堡垒机 导航至CloudFormation&#xf…

Kafka(二)在WSL搭建Schema Registry

目录 1 Avro与Schema Registry2 搭建Schema Registry2.1 下载Confluent并解压2.2 设置环境变量2.3 修改配置2.4 启动服务 3 API列表 1 Avro与Schema Registry Apache Avro 是一种高效的数据序列化系统&#xff0c;用于在不同的应用程序和平台之间传输和存储数据。它提供了一种…

AI智能客服搭建教程附带免费源码

*名称* *版本要求* 服务器 CPU 2核心 ↑运存 4G ↑宽带 5M ↑ 服务器操作系统 Linux Centos7 运行环境 Nginx 1.18 PHP 7.3 MYSQL 5.6 服务器配置及环境要求 PHP设置 一、安装PHP扩展插件:fileinfo、redis、 sg11 二、删除PHP对应版本中的 pcntl_signal 、pcntl_signal_dis…

python类和对象

1.使用对象组织数据 class Student:nameNone #记录名字 stu1Student() #创建对象 stu1.name"abc" #为对象属性赋值2.类的定义和使用 2.1成员方法的定义语法 传参的时候self是透明的&#xff0c;不用管 class Stu:nameNonedef sayHi(self):print(f"你好&#x…

【数据中台】开源项目(1)-LarkMidTable

LarkMidTable 是一站式开源的数据中台&#xff0c;实现中台的 基础建设&#xff0c;数据治理&#xff0c;数据开发&#xff0c;监控告警&#xff0c;数据服务&#xff0c;数据的可视化&#xff0c;实现高效赋能数据前台并提供数据服务的产品。 系统演示地址 &#xff1a; www.l…

Windows 7隐藏用户测试

请注意Window 7是在虚拟机上安装的&#xff0c;ip是192.168.0.108。 下边都是在虚拟机Window 7上操作&#xff0c;直到最后远程连接才在自己本机Windows 11上操作。 需要同时按下Windowsr,然后输入cmd&#xff0c;再点击确定。 在命令上里边输入net user可以显示一下用户。 …

C语言学习笔记之函数篇

与数学意义上的函数不同&#xff0c;C语言中的函数又称为过程&#xff0c;接口&#xff0c;具有极其重要的作用。教科书上将其定义为&#xff1a;程序中的子程序。 在计算机科学中&#xff0c;子程序&#xff08;英语&#xff1a;Subroutine, procedure, function, routine, me…

React 入门使用 (官方文档向 Part2)

文章目录 用 State 响应输入声明式地考虑 UI步骤 1&#xff1a;定位组件中不同的视图状态步骤 2&#xff1a;确定是什么触发了这些状态的改变步骤 3&#xff1a;通过 useState 表示内存中的 state步骤 4&#xff1a;删除任何不必要的 state 变量步骤 5&#xff1a;连接事件处理…

TypeScript 中的type与interface

TypeScript 中的type与interface 对于 TypeScript&#xff0c;有两种定义类型的方法&#xff1a;type与interface。 人们常常想知道该使用哪一种&#xff0c;而答案并不是一刀切的。这确实取决于具体情况。有时&#xff0c;其中一种比另一种更好&#xff0c;但在许多情况下&a…

059-第三代软件开发-巧用工控板LED指示灯引脚

第三代软件开发-巧用工控板LED指示灯引脚 文章目录 第三代软件开发-巧用工控板LED指示灯引脚项目介绍巧用工控板LED指示灯引脚第一种方式第二种方式 总结 关键字&#xff1a; Qt、 Qml、 Power、 继电器、 IO 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项…

video标签在h5中被劫持问题

将video的视频链接转为blob export const encryptionVideo (options: URL) > {return new Promise((resolve, reject) > {window.URL window.URL || window.webkitURL;var xhr new XMLHttpRequest();xhr.open(GET, options.url, true);xhr.responseType blob;xhr.onl…

题解(讲题时备用):CF1896-D. Ones and Twos

题解(讲题时备用)&#xff1a;CF1896-D. Ones and Twos 题目链接 Problem - D - Codeforces。 思路简述 我们不难得出只要询问中s&#xff08;s>2&#xff09;行&#xff0c;s-2就也行。&#xff08;通过区间内的左端点和右端点上面的数可以得出&#xff09; 之后维护偶…

圆通速递单号查询入口,以表格的形式导出详细物流信息

批量查询圆通速递单号的物流信息&#xff0c;并以表格的形式导出单号的详细物流信息。 所需工具&#xff1a; 一个【快递批量查询高手】软件 圆通速递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;第一次使用的伙伴记得先注册&…

C++初识类和对象

前言 上一期我们介绍了一些C入门的基础知识&#xff0c;本期我们来介绍面向对象。初步认识一下面向对象和面向过程、类、以及封装&#xff01; 本期内容介绍 面向过程和面向对象 类的引入 类的定义 类的访问限定符和封装 类的作用域 类的实例化 类对象模型 this指针 一、面向…

基本数据结构二叉树(1)

目录 1.树概念及结构 1.1树的概念 1.2 树的相关概念 1.3 树的表示 1.4 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 2.二叉树概念及结构 2.1概念 2.2现实中的二叉树&#xff1a; 2.3 特殊的二叉树&#xff1a; 2.5 二叉树的存储结构 2. 链式存…