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

news2024/11/22 14:37:40

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

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>

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

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

相关文章

数据结构之来链表——单链表

什么是单链表&#xff1a; 文字说明&#xff1a; 单链表顾名思义&#xff0c;就是指单项链表&#xff0c;即只有一个方向的链性线性表。 图解&#xff1a; 如下图所示&#xff0c;即为链表&#xff08;DATA为我们自己所定义的数据类型&#xff09;&#xff1a; 单链表的创建&am…

【jQuery】jQuery框架

目录 1.jQuery基本用法 1.1选择器 1.2jQuery对象 1.3事件绑定 1.4链式编程 1.5过滤方法 1.6样式操纵 1.6属性操纵 1.7操作value 1.8查找方法 1.9类名操纵 1.10事件进阶 1.11触发事件 1.12window事件绑定 2.节点操作与动画 2.1获取位置 2.2滚动距离 2.3显示/隐…

使用阿里云试用Elasticsearch学习:4. 聚合——1

在这之前&#xff0c;本书致力于搜索。 通过搜索&#xff0c;如果我们有一个查询并且希望找到匹配这个查询的文档集&#xff0c;就好比在大海捞针。 通过聚合&#xff0c;我们会得到一个数据的概览。我们需要的是分析和总结全套的数据而不是寻找单个文档&#xff1a; 在大海里…

ONERugged车载平板终端:提升港口运输水平

现代港口是国际贸易中至关重要的枢纽&#xff0c;而提高港口运输效率对于促进贸易流通和经济发展至关重要。近年来&#xff0c;车载平板技术的快速发展为港口运输行业带来了巨大的变革和机遇。车载平板的广泛应用不仅提高了港口的操作效率&#xff0c;还改善了货物跟踪、通信和…

【第七篇】使用BurpSuite进行主动、被动扫描和主动、被动爬虫

文章目录 前言主动扫描被动扫描主动爬虫被动爬虫前言 Burp Scanner 既可以用作全自动扫描仪,也可以用作增强手动测试工作流程的强大手段。 扫描网站涉及两个阶段: 抓取内容和功能: Burp Scanner 首先在目标站点周围导航,密切反映真实用户的行为。它对站点的结构和内容以及…

MATLAB Simulink仿真搭建及代码生成技术—01自定义新建模型模板

MATLAB Simulink仿真搭建及代码生成技术 目录 01-自定义新建模型模板点击运行&#xff1a;显示效果&#xff1a;查看模型设置&#xff1a; 01-自定义新建模型模板 新建模型代码如下&#xff1a; function new_model(modelname) %建立一个名为SmartAss的新的模型并打开 open_…

STM32-模数转化器

ADC(Analog-to-Digital Converter) 指模数转换器。是指将连续变化的模拟信号转换 为离散的数字信号的器件。 ADC相关参数说明&#xff1a; 分辨率&#xff1a; 分辨率以二进制&#xff08;或十进制&#xff09;数的位数来表示&#xff0c;一般有 8 位、10 位、12 位、16 位…

Linux登录访问限制

Linux系统下&#xff0c;用户密码的有效期可以通过编辑/etc/login.defs文件控制&#xff1b;密码复杂度规则设定需要通过/etc/pam.d/system-auth文件控制&#xff1b;登录失败次数限制通常由/etc/pam.d/login文件限制&#xff0c;可使用pam_tally2模块进行设置。 Linux系统下的…

uniapp小程序下载并导出excel

<button click"confirmExport">导出excel</button>confirmExport() {let header {"X-Access-Token": uni.getStorageSync(ACCESS_TOKEN), //自定义请求头信息} let url "http"/......"; // 后端API地址uni.request({url: ur…

【神经网络】生成对抗网络GAN

生成对抗网络GAN 欢迎访问Blog总目录&#xff01; 文章目录 生成对抗网络GAN1.学习链接2.GAN结构2.1.生成模型Generator2.2.判别模型Discrimintor2.3.伪代码 3.优缺点3.1.优势3.2.缺点 4.pytorch GAN4.1.API4.2.GAN的搭建4.2.1.结果4.2.2.代码 4.3.示意图:star: 1.学习链接 …

0.开篇:SSM+Spring Boot导学

1. 为什么要使用框架 Spring是一个轻量级Java开发框架&#xff0c;最早有Rod Johnson创建&#xff0c;目的是为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题。 几乎当下所有企业级JavaEE开发都离不开SSM&#xff08;Spring SpringMVC MyBatis&#xff09;Spring B…

计算机视觉——Python OpenCV BGR转HSV

这里将介绍如何使用 OpenCV 与 Python 来作彩色影像转HSV(RGB to HSV 或 BGR to HSV)&#xff0c;在写 Python 影像处理程序时常会用到 OpenCV cvtColor 作颜色空间转换的功能&#xff0c;接下来介绍怎么使用 Python 搭配 OpenCV 模块来进行 RGB/BGR 转 HSV 彩色转HSV空间。 H…

中科方德服务器操作系统安装zabbix5.0

原文链接&#xff1a;中科方德服务器操作系统安装zabbix5.0 Hello&#xff0c;大家好啊&#xff01;接着我们上一次的讨论&#xff0c;今天我要为大家介绍如何在已经安装好的中科方德服务器操作系统基础上&#xff0c;安装和配置Zabbix 5.0。Zabbix是一个开源的监控软件工具&am…

尝试在手机上运行google 最新开源的gpt模型 gemma

Gemma介绍 Gemma简介 Gemma是谷歌于2024年2月21日发布的一系列轻量级、最先进的开放语言模型&#xff0c;使用了与创建Gemini模型相同的研究和技术。由Google DeepMind和Google其他团队共同开发。 Gemma提供两种尺寸的模型权重&#xff1a;2B和7B。每种尺寸都带有经过预训练&a…

redis的三大模式的演化及集群模式思考和总结

redis的三大模式&#xff0c;也是循序渐进。 1、主从复制 比如一开始的读写分离的&#xff0c;主从复制。 一个master&#xff0c;多个slave。 master进行写和 增量同步&#xff0c;slave负责读&#xff0c;和接收增量同步的信息。 这样压力减轻。 2、哨兵模式 这个推出…

结构型模式--1.适配器模式【托尼托尼·乔巴】

1. 翻译家 在海贼王中&#xff0c;托尼托尼乔巴&#xff08;Tony Tony Chopper&#xff09;是草帽海贼团的船医&#xff0c;它本来是一头驯鹿&#xff0c;但是误食了动物系人人果实之后可以变成人的形态。 乔巴吃了恶魔果实之后的战斗力暂且抛开不谈&#xff0c;说说它掌握的第…

【数组】【最长距离】使循环数组所有元素相等的最少秒数

本文涉及知识点 数组 最长距离 LeetCode2808. 使循环数组所有元素相等的最少秒数 给你一个下标从 0 开始长度为 n 的数组 nums 。 每一秒&#xff0c;你可以对数组执行以下操作&#xff1a; 对于范围在 [0, n - 1] 内的每一个下标 i &#xff0c;将 nums[i] 替换成 nums[i] …

第一个Swift程序

要创建第一个Swift项目&#xff0c;请按照以下步骤操作&#xff1a; 打开Xcode。如果您没有安装Xcode&#xff0c;可以在App Store中下载并安装它。在Xcode的欢迎界面上&#xff0c;选择“Create a new Xcode project”&#xff08;创建新Xcode项目&#xff09;。在模板选择界…

电脑总是蓝屏怎么办,电脑总是蓝屏怎么办开不了机

工作离不开电脑&#xff0c;不过电脑经常会出现一些故障让我们崩溃不已&#xff0c;尤其类似电脑蓝屏开不了机这种&#xff0c;总是突然发生&#xff0c;让人猝不及防。那么面对这一情况&#xff0c;相信很多人都是不知道该如何处理的。这里提供两个方法&#xff0c;第一种方法…

Centos 下载地址

下载镜像地址&#xff1a; 1、官网地址&#xff1a;The CentOS Project 2、阿里镜像站&#xff1a;centos安装包下载_开源镜像站-阿里云 3、清华镜像源&#xff1a;Index of /centos/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 3.、CentOS搜狐镜像&#xff1…