当前位置: 首页 > news >正文

ECharts图表动态修改series显示隐藏

文章目录

  • 1、前言
  • 2、思路
  • 3、实现

1、前言

ECharts

最近做的大数据平台,里面很多部分用到了ECharts,其中有个功能,要求将图表分组,根据用户选择的组,来确定ECharts要显示那些线条和柱子,也就是动态的显示option.series。

2、思路

找了一下EChart的文档,发现可以通过控制option.legend.selected,来动态设置,无论饼图、折线图、还是柱状图,都可以通过这个来控制显示哪些,只需要把数据变化set到ECharts实例上就可以了。

3、实现

EChart的legend.selected属性是一个对象,可以把series的每一个系列的name作为键名,值为Boolean,来控制是否显示。然后setOption实例化后的EChart对象,就可以实现动态更改显示。

  • 曲线图数据:体验地址
option = {tooltip: {trigger: 'axis'},legend: {selected: {AAA: false}},xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: 'AAA',type: 'line',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'BBB',type: 'line',data: [220, 182, 191, 234, 290, 330, 310]},{name: 'CCC',type: 'line',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'DDD',type: 'line',data: [320, 332, 301, 334, 390, 330, 320]}]
};
  • 柱状图数据:体验地址
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},legend: {selected: {AAA: false}},tooltip: {trigger: 'item'},yAxis: {type: 'value'},series: [{name: 'AAA',type: 'bar',data: [10,20,30,40,50,60,70],},{name: 'BBB',type: 'bar',data: [20,30,40,50,60,70,80],},{name: 'CCC',type: 'bar',data: [30,40,50,60,70,80,90],},{name: 'DDD',type: 'bar',data: [40,50,60,70,80,90,100],},{name: 'EEE',type: 'bar',data: [50,60,70,80,90,100,110],}]
};
  • 饼图数据:体验地址
option = {tooltip: {trigger: 'item'},legend: {selected: {AAA: false}},series: [{name: 'Pie',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'AAA' },{ value: 735, name: 'BBB' },{ value: 580, name: 'CCC' },{ value: 484, name: 'DDD' },{ value: 300, name: 'EEE' }]}]
};

打开体验地址,将数据粘贴上去,就可以查看效果。


本次分享就到这儿啦,我是鹏多多,如果您看了觉得有帮助,欢迎评论,关注,点赞,转发,我们下次见~

往期文章

  • Vue2全家桶+Element搭建的PC端在线音乐网站
  • vue3+element-plus配置cdn
  • 助你上手Vue3全家桶之Vue3教程
  • 助你上手Vue3全家桶之VueX4教程
  • 助你上手Vue3全家桶之Vue-Router4教程
  • 超详细!Vue的九种通信方式
  • 超详细!Vuex手把手教程
  • 使用nvm管理node.js版本以及更换npm淘宝镜像源
  • vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
  • 超详细!Vue-Router手把手教程

个人主页

  • CSDN
  • GitHub
  • 简书
  • 博客园
  • 掘金

相关文章:

ECharts图表动态修改series显示隐藏

文章目录 1、前言2、思路3、实现 1、前言 最近做的大数据平台,里面很多部分用到了ECharts,其中有个功能,要求将图表分组,根据用户选择的组,来确定ECharts要显示那些线条和柱子,也就是动态的显示option.seri…...

云服务器(Centos7系统)配置JAVA+mysql+tomcat 环境

文章主要内容来源云服务器(Centos7系统)部署javaweb项目(二)配置JAVAmysqltomcat 环境_man_zuo的博客-CSDN博客 模仿途中遇到的问题 连接无效 有时连接无法下载,可能是过期了,将其更换为官网给的下载连接即…...

【计算机视觉 | 目标检测】目标检测常用数据集及其介绍(四)

文章目录 一、JTA (Joint Track Auto)二、AVD (Active Vision Dataset)三、ExDark (Exclusively Dark Image Dataset)四、InteriorNet五、ScanRefer Dataset六、FlickrLogos-32七、SIXray八、Clear Weather (DENSE)九、DVQA (Data Visualizations via Question Answering)十、M…...

Dockerfile制作镜像与搭建LAMP环境

一.编写Dockerfile制作Web应用系统nginx镜像,生成镜像nginx:v1.1,并推送其到私有仓库。具体要求如下: (1)基于centos基础镜像; (2)指定作者信息; (3&#xff…...

Linux系统中查看端口的方法

一、使用netstat命令 netstat命令是一种非常实用的命令,可以用来显示网络连接、路由表、网络接口和网络统计信息等。它还可以用来显示系统中正在监听的端口。要查看端口,只需在终端中输入以下命令: netstat -tuln 这个命令的意思是列出所有…...

java mysql传入string数组返回string数组的简单写法

一、前言 最近有个需求,需要一个传入string数组返回string数组的sql逻辑。 懒得封装成javabean了,于是就写了一个简单的样例,总结下。 二、代码 1.mapper.java,可以这样写: public interface MyMapper {String[] …...

【PHP】PHP基本语法

1、PHP标记 当解析一个文件时&#xff0c;PHP 会寻找起始和结束标记&#xff0c;也就是 <?php 和 ?>&#xff0c;告诉 PHP 开始和停止解析二者之间的代码。此种解析方式使得 PHP 可以被嵌入到各种不同的文档中去&#xff0c;而任何起始和结束标记之外的部分都会被 PHP…...

SystemVerilog interface详细介绍

1. Interface概念 System Verilog中引入了接口定义&#xff0c;接口与module 等价的定义&#xff0c;是要在其他的接口、module中直接定义&#xff0c;不能写在块语句中&#xff0c;跟class是不同的。接口是将一组线捆绑起来&#xff0c;可以将接口传递给module。 2. 接口的优…...

计网第四章(网络层)(三)

IPV4地址的应用规划&#xff1a; 定长的子网掩码FLSM&#xff1a; 使用同一个子网掩码划分子网&#xff0c;每个子网所分配的IP地址数量相同&#xff0c;造成IP地址的浪费。 变长的子网掩码VLSM&#xff1a; 使用不同的子网掩码划分子网&#xff0c;每个子网所分配的IP地址…...

python学习1之安装

前言 目前&#xff0c;Python有两个版本&#xff0c;一个是2.x版&#xff0c;一个是3.x版&#xff0c;这两个版本是不兼容的。由于3.x版越来越普及&#xff0c;我们的教程将以最新的Python 3.9版本为基础。 1、下载 官网地址 https://www.python.org/downloads/ 2、安装 点击…...

Autofac在WebApi,Winform中应用

安装注意事项 使用AOP的时候需要安装Autofac.Extras.DynamicProxy,如果发现VS老是提示报错,需要把VS重启下才可以识别。 WebApi 注意事项:WebApi中多一个ApiController中构造注入功能。 注入和AOP拦截 var siteNameList ClassHelper.GetConstants(typeof(SiteName));//创建…...

uview ui 查看版号

版本查询2种方式 有两种方式可以查询到正在使用的uView的版本&#xff1a; // 通过console.log打印的形式 console.log(uni.$u.config.v);// 可以查阅uView的配置文件得知当前版本号&#xff0c;具体位置为&#xff1a; /uview-ui/libs/config/config.js...

Python 爬虫网页图片下载到本地

您可以使用Python的requests库来获取网页的源码&#xff0c;使用BeautifulSoup库来解析HTML&#xff0c;并使用urllib库来下载图片到本地。下面是一个示例代码&#xff1a; import requests from bs4 import BeautifulSoup import urllib # 获取网页源码 url https://examp…...

PyQt open3d 加载 显示点云

PyQt加载 显示点云&#xff0c;已经有三种方式&#xff0c;使用 open3d; 使用 vtk; 使用 pcl; 下面是使用 open3d: import sys import open3d as o3d import numpy as np import pyqtgraph.opengl as gl from PyQt5.QtWidgets import QApplication, QVBoxLayout, QWidget, QFi…...

Linux搭建SSLVpn

安装http、ssl服务 编辑http配置文件 修改http的136行&#xff0c;276行以及990行 1、136行将监听端口注释 2、276行和990行修改为自己的域名和要访问的端口 修改http文档最后那部分 新添ssl配置信息&#xff0c;将端口修改为443&#xff08;截图错了server.key应该放在/etc/…...

Qt5升级到Qt6分步迁移教程

Qt框架的一个新的长期支持版本6.5最近发布。它为以前的版本引入了许多修复、改进和新功能。有些可能对您的应用程序有用&#xff08;如果不是现在&#xff0c;可能会在将来&#xff09;&#xff0c;因此最好将应用程序迁移到最新版本的框架。 仍然有许多应用程序仍在使用Qt 5&…...

多线程学习之线程池

线程状态 线程状态具体含义NEW一个尚未启动的线程的状态。也称之为初始、开始状态。线程刚被创建&#xff0c;但是并未启动。还没调用start方法。MyThread t new MyThread()只有线程对象&#xff0c;没有线程特征。RUNNABLE当我们调用线程对象的start方法&#xff0c;那么此时…...

Elasticsearch基础

1、简介 Elasticsearch是实时的分布式搜索分析引擎&#xff0c;内部使用Lucene做索引与搜索。 何谓实时&#xff1f;新增到 ES 中的数据在1秒后就可以被检索到&#xff0c;这种新增数据对搜索的可见性称为“准实时搜索”。分布式意味着可以动态调整集群规模&#xff0c;弹性扩…...

论文阅读:Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks

前言 要弄清MAML怎么做&#xff0c;为什么这么做&#xff0c;就要看懂这两张图。先说MAML**在做什么&#xff1f;**它是打着Mate-Learing的旗号干的是few-shot multi-task Learning的事情。具体而言就是想训练一个模型能够使用很少的新样本&#xff0c;快速适应新的任务。 定…...

基于Web的旅游推荐网站设计与实现(论文+源码)_kaic

【摘 要】 当前&#xff0c;众所周知的旅游产业已慢慢成为全世界经济领域中最具代表影响力和最大领域的产业之一&#xff0c;互联网的蓬勃发展也为旅游业带来了新的机遇。并且旅游网站已经逐渐成为管理旅游信息的主要模式。因此&#xff0c;开发一个稳定性良好、可用性强的旅游…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...