echarts 条形图(柱状图)多个图例按钮默认高亮一个,且只能高亮一个

核心:给图例按钮添加点击事件

myChart.on("legendselectchanged", function (params) {
        let selected = {
          功率柜: true,
          母线柜: false,
          充电桩终端: false,
          网络柜: false,
        };
        for (let key in selected) {
          if (key !== params.name) {
            myChart.setOption({
              legend: { selected: { [key]: false } },
            });
          } else {
            myChart.setOption({
              legend: { selected: { [params.name]: true } },
            });
          }
        }
      });

demo

<template>
  <div>
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {};
  },
  mounted() {
    this.aa();
  },
  methods: {
    aa() {
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis",
        },

        legend: {
          data: ["功率柜", "母线柜", "充电桩终端", "网络柜"],
          selected: {
            功率柜: true,
            母线柜: false,
            充电桩终端: false,
            网络柜: false,
          },
        },
        xAxis: {
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          type: "category",
        },
        yAxis: {},
        series: [
          {
            name: "功率柜",
            type: "bar",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "母线柜",
            type: "bar",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "充电桩终端",
            type: "bar",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "网络柜",
            type: "bar",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.on("legendselectchanged", function (params) {
        let selected = {
          功率柜: true,
          母线柜: false,
          充电桩终端: false,
          网络柜: false,
        };
        for (let key in selected) {
          if (key !== params.name) {
            myChart.setOption({
              legend: { selected: { [key]: false } },
            });
          } else {
            myChart.setOption({
              legend: { selected: { [params.name]: true } },
            });
          }
        }
      });

    },
  },
};
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue3使用jsQR解析二维码

1.了解jsQR jsQR是一个纯javascript脚本实现的二维码识别库,不仅可以在浏览器端使用,而且支持后端node.js环境。jsQR使用较为简单,有着不错的识别率。 2.效果图 3.二维码 4.下载jsqr包 npm i -d jsqr5.代码 <script setup> import {ref } from vue import jsQR fr…

视频图像的两种表示方式YUV与RGB(1)

了解过计算机图形图像学的该知道&#xff0c;可用RGB和YUV两种方式表示图像像素&#xff0c;视频由一帧一帧的图像组成&#xff0c;每一张图片是一个一个的像素点组成&#xff0c;既然有两种表示像素的方法&#xff0c;那就一起解一下两种表示方式的异同及优缺点。 RGB像素 这…

【PPT技巧】如何取消PPT的密码保护?

PPT文件有两种密码&#xff0c;一种是打开密码、一种是修改权限。今天分享这两种密码如何取消。 首先需要告知大家的是&#xff0c;密码的取消需要输入正确的密码。 打开密码的取消&#xff0c;我们需要先输入密码&#xff0c;打开文件&#xff0c;然后点击文件 – 信息 – 保…

os.listdir()bug总结

今天测试出一个神奇的bug&#xff0c;算是教训吧&#xff0c;找了两天不知道问题在哪&#xff0c;最后才发现问题出现在这 原始文件夹显示 os.listdir()结果乱序 import os base_path "./file/"files os.listdir(base_path)print(files)问题原因 解决办法(排序) …

YOLOv8全网独家改进: 小目标 |新颖的多尺度前馈网络(MSFN) | 2024年4月最新成果

💡💡💡本文独家改进:多尺度前馈网络(MSFN),通过提取不同尺度的特征来增强特征提取能力,2024年最新的改进思路 💡💡💡创新点:多尺度前馈网络创新十足,抢先使用 💡💡💡如何跟YOLOv8结合:1)放在backbone后增强对全局和局部特征的提取能力;2)放在detect…

解密项目管理专业术语:十大名词背后的实战技巧

项目管理是一门综合学科&#xff0c;涵盖了一系列方法、技能和工具。今天为大家带来项目管理的十大专业术语&#xff0c;它们分别是项目范围、利益相关者管理、工作分解结构&#xff08;WBS&#xff09;、里程碑、风险管理、资源分配、关键路径法&#xff08;CPM&#xff09;、…

漏洞挖掘 | 从信息收集到登录后台

通过信息收集进网站后台 记录一次通过简单的信息收集获取账号信息后进入后台的经过。打开思路&#xff0c;利用我们所有能够捕获的信息并串联起来。 0X0 开始&#xff1a; 打开网站发现是一个登录网站 随便输入账号密码&#xff0c;发现有用户名枚举&#xff1a; 0X1 获取ic…

SuperMap GIS基础产品FAQ集锦(202403)

一、SuperMap GIS基础产品桌面GIS-FAQ集锦 问题1&#xff1a;【iDesktop】安装了idesktop 11i&#xff0c;现想进行插件开发&#xff0c;根据安装指南安装SuperMap.Tools.RegisterTemplate.exe&#xff0c;运行多次均失败 【问题原因】该脚本是之前老版本针对VS2010写的&…

蓝桥杯-外卖店优先级

代码及其解析 #include<bits/stdc.h> using namespace std; const int N100010;int order[N]; //order[id] 第id号店上一次的订单,记录的是时间 int prior[N]; //prior[id] 第id号店的优先级 int flag[N]; //flag[id] 第id号店在不在优先缓存中struct node{int…

【RHEL】redhat yum 报错: not registered to Red Hat Subscription Management.

【RHEL】redhat yum 报错: not registered to Red Hat Subscription Management. 问题描述解决方法参考博客&#xff1a; 问题描述 使用redhat7用yum install -y dos2unix命令时出现这个错误 This system is not registered to Red Hat Subscription Management. You can use …

CAXA电子图版2020版 下载地址及安装教程

CAXA电子图板是一款由国内软件公司CAXA开发的专业CAD&#xff08;计算机辅助设计&#xff09;软件。它主要用于绘制和编辑各种类型的二维图纸和工程图纸&#xff0c;广泛应用于建筑、机械、电气和电子等行业。 CAXA电子图板具有以下主要功能和特点&#xff1a; 二维绘图&…

seo调优

SEO 网站地图&#xff1a;sitemap.xmlrobots.txtxxx.com/www.xxx.com 解析到服务器&#xff0c;xxx.com 301 到 www.xxx.comhttps百度站点管理标题描述关键词标签语义化内链外链死链链接html结尾友情链接前端架构 注意&#xff1a;已收录链接&#xff0c;禁止改变链接地址 ro…

C语言——文件管理

文件&#xff1a;即磁盘上的文件&#xff0c;使用文件可以将数据直接存放在电脑的硬盘上&#xff0c;做到数据持久化。 在程序设计中&#xff0c;按文件的功能划分&#xff0c;将文件分为程序文件与数据文件 程序文件 程序文件包括源文件&#xff08;.c&#xff09;&#xff0…

Ubuntu20.04连接不了无线网

1.首先查看网卡型号 lspci Network controller显示的就是网卡型号 也可以使用如下命令 lspci -nnk | grep 0280 -A3 2.找到对应的驱动并下载安装 我的电脑的网卡型号为Realtek Semiconductor Co., Ltd. Device b852&#xff0c;则采用如下命令安装&#xff1a; sudo ap…

vue3+Ts+Ant Design Vue +天地图组件封装

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来Vue3TsAntDesign-Vue组件天地图组件的封装 示例图 首先,在index.html引入天地图资源,vue3选择v4版本 <script src"http://api.tianditu.gov.cn/api?…

Python零基础从小白打怪升级中~~~~~~~流程控制语句

第三节&#xff1a;Python的流程控制语法 一、Python条件语句的语法 if 条件1:条件1成立执⾏的代码一条件1成⽴执⾏的代码二...... elif 条件2&#xff1a;条件2成立执⾏的代码三条件2成立执⾏的代码四...... ...... else:以上条件都不成⽴&#xff0c;执行的代码五以上条件都…

对OceanBase中的配置项与系统变量,合法性检查实践

在“OceanBase 配置项&系统变量实现及应用详解”的系列文章中&#xff0c;我们已经对配置项和系统变量的源码进行了解析。当涉及到新增配置项或系统变量时&#xff0c;通常会为其指定一个明确的取值范围或定义一个专门的合法性检查函数。本文将详细阐述在不同情境下&#x…

JMeter 压力测试入门指南!

什么是压力测试 软件测试中&#xff1a;压力测试&#xff08;Stress Test&#xff09;&#xff0c;也称为强度测试、负载测试。压力测试是模拟实际应用的软硬件环境及用户使用过程的系统负荷&#xff0c;长时间或超大负荷地运行测试软件&#xff0c;来测试被测系统的性能、可靠…

nginx配置实例-高可用主备模式

目录 什么是高可用&#xff1f; 解决的问题&#xff1f; 双机热备方案 keepalived是什么&#xff1f; 故障转移机制 环境准备 一、实现过程 1.1安装keepalived 安装好以后&#xff0c;将keepalived程序开启&#xff0c;并且加入到开机启动项中 1.2修改主机&#xff08;…

计算机网络-NSSA区域与Totally NSSA区域

前面我们已经学习了Stub区域和Totally Stub区域,是为了解决末端区域到达外部路由的方式以及减少LSA数量。但是OSPF规定Stub区域是不能引入外部路由的&#xff0c;这样可以避免大量外部路由引入造成设备资源消耗。 对于既需要引入外部路由又要避免外部路由带来的资源消耗的场景&…