手动实现legend 与 echarts图交互 通过元素和js事件实现图标某项的高亮 显示与隐藏

通过html实现legend的样式 提供调用echarts的api实现与echarts图表交互的效果

实现饼图element实现类似于legend与echartstu表交互效果

效果图

在这里插入图片描述

配置代码

<template><div style="height: 400px; width: 500px;background-color: #CCC;"><v-chart:option="options"autoresizestyle="width: 100%; height: 100%"ref="chart"/><div style="display: flex; margin-right: 20px"><divv-for="item in dataList":key="item.name"style="display: flex;align-items: center; margin-top: 10px; margin-right: 20px;cursor: pointer"@mouseenter="handleMouseenter(item)"@mouseleave="handleMouseleave(item)"@click="handleClick(item)"><i :style="{'background-color': item.isShow ? item.itemStyle.color: '#CCC'}" style="width: 10px;height:10px;border-radius: 50%;margin-right: 5px"></i><span style="margin-right:10px;">{{item.name}}</span><span>{{item.value}}</span></div></div></div>
</template><script>export default {name: 'AboutView',data() {return{dataList: [{ value: 1048, name: 'Search Engine',isShow: true,itemStyle: {color: '#006699'} },{ value: 735, name: 'Direct',isShow: true,itemStyle: {color: '#009966'}  },{ value: 580, name: 'Email',isShow: true,itemStyle: {color: '#FFCC00'}  },]}},computed: {options() {return {tooltip: {trigger: 'item'},legend:{show: false},series: [{name: 'Access From',type: 'pie',radius: ['45%', '50%'],center: ['50%', '38.5%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},labelLine: {show: false},data: this.dataList}]}}},methods: {handleMouseenter(item){this.$refs.chart.dispatchAction({type: 'highlight',name: item.name,// seriesIndex: 1// dataIndex: 1// // 用 index 或 id 或 name 来指定系列。// // 可以使用数组指定多个系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项// dataIndex?: number | number[],// // 可选，数据项名称，在有 dataIndex 的时候忽略// name?: string | string[],})},handleMouseleave(item){this.$refs.chart.dispatchAction({type: 'downplay',name: item.name,// seriesIndex: 1// dataIndex: 1// // 用 index 或 id 或 name 来指定系列。// // 可以使用数组指定多个系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项// dataIndex?: number | number[],// // 可选，数据项名称，在有 dataIndex 的时候忽略// name?: string | string[],})},handleClick(item){item.isShow = !item.isShowthis.$refs.chart.dispatchAction({type: 'legendToggleSelect',name: item.name,// // 用 index 或 id 或 name 来指定系列。// // 可以使用数组指定多个系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项// dataIndex?: number | number[],// // 可选，数据项名称，在有 dataIndex 的时候忽略// name?: string | string[],})}}}
</script><style lang="scss" scoped></style>

通过js实现柱形图同一组数据时 隐藏某一个柱子

效果图

在这里插入图片描述

配置代码

<template><div style="height: 400px; width: 500px;background-color: #CCC;"><v-chart:option="options"autoresizestyle="width: 100%; height: 100%"ref="chart"/><div style="display: flex; margin-right: 20px"><divv-for="item in dataList":key="item.name"style="display: flex;align-items: center; margin-top: 10px; margin-right: 20px;cursor: pointer"@click="handleClick(item)"@mouseenter="handleMouseenter(item)"@mouseleave="handleMouseleave(item)"><i :style="{'background-color': item.isShow ? item.itemStyle.color: '#CCC'}" style="width: 10px;height:10px;border-radius: 50%;margin-right: 5px"></i><span style="margin-right:10px;">{{item.name}}</span><span>{{item.value}}</span></div></div></div>
</template><script>export default {name: 'AboutView',data() {return{dataList: [{ value: 1048, name: 'Search Engine',isShow: true,itemStyle: {color: '#006699'} },{ value: 735, name: 'Direct',isShow: true,itemStyle: {color: '#009966'}  },{ value: 580, name: 'Email',isShow: true,itemStyle: {color: '#FFCC00'}  },]}},computed: {options() {return {tooltip: {trigger: 'item'},legend:{show: false},xAxis: {type: 'category',data: this.computedSeriesData.map(item => item.name)},yAxis: {type: 'value'},series: [{name: 'Access From',type: 'bar',radius: ['45%', '50%'],center: ['50%', '38.5%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},labelLine: {show: false},data: this.computedSeriesData}]}},computedSeriesData() {return this.dataList.filter(item => item.isShow)}},methods: {handleClick(item){item.isShow = !item.isShow},handleMouseenter(item){this.$refs.chart.dispatchAction({type: 'highlight',name: item.name,// seriesIndex: 1// dataIndex: 1// // 用 index 或 id 或 name 来指定系列。// // 可以使用数组指定多个系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项// dataIndex?: number | number[],// // 可选，数据项名称，在有 dataIndex 的时候忽略// name?: string | string[],})},handleMouseleave(item){this.$refs.chart.dispatchAction({type: 'downplay',name: item.name,// seriesIndex: 1// dataIndex: 1// // 用 index 或 id 或 name 来指定系列。// // 可以使用数组指定多个系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项// dataIndex?: number | number[],// // 可选，数据项名称，在有 dataIndex 的时候忽略// name?: string | string[],})},}}
</script><style lang="scss" scoped></style>

通过js实现柱形图一组数据的显示隐藏 达到legend的效果

效果图

在这里插入图片描述
在这里插入图片描述

配置代码

<template><div style="height: 400px; width: 500px;background-color: #CCC;"><v-chart:option="options"autoresizestyle="width: 100%; height: 100%"ref="chart"/><div style="display: flex; margin-right: 20px"><divv-for="item in legendList":key="item.name"style="display: flex;align-items: center; margin-top: 10px; margin-right: 20px;cursor: pointer"@click="handleClick(item)"@mouseenter="handleMouseenter(item)"@mouseleave="handleMouseleave(item)"><i :style="{'background-color': item.isShow ? item.color: '#CCC'}" style="width: 10px;height:10px;border-radius: 50%;margin-right: 5px"></i><span style="margin-right:10px;">{{item.name}}</span><span>{{item.value}}</span></div></div></div>
</template><script>export default {name: 'AboutView',data() {return{legendList: [{ name: '测试1', isShow: true, color: '#00BFFF' },{ name: '测试2', isShow: true, color: '#FFD700'},],dataList1: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct'},{ value: 580, name: 'Email'},],dataList2: [{ value: 800, name: 'Search Engine' },{ value: 335, name: 'Direct'},{ value: 1580, name: 'Email'},]}},computed: {options() {return {tooltip: {trigger: 'item'},legend:{show: false},xAxis: {type: 'category',data: this.dataList1.map(item => item.name)},yAxis: {type: 'value'},series: [{name: '测试1',type: 'bar',radius: ['45%', '50%'],center: ['50%', '38.5%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},labelLine: {show: false},itemStyle:{color: '#00BFFF'},data: this.dataList1},{name: '测试2',type: 'bar',radius: ['45%', '50%'],center: ['50%', '38.5%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},labelLine: {show: false},itemStyle:{color: '#FFD700'},data: this.dataList2}]}},},methods: {handleClick(item){item.isShow = !item.isShowthis.$refs.chart.dispatchAction({type: 'legendToggleSelect',// 图例名称name: item.name,// // 下列参数自 v5.6.0 起开始支持// // 图例组件ID// legendId: string,// // 图例组件索引// legendIndex: number,// // 图例组件名称// legendName: string})},handleMouseenter(item){this.$refs.chart.dispatchAction({type: 'highlight',seriesName: item.name// seriesIndex: 1// dataIndex: 1// // 用 index 或 id 或 name 来指定系列。// // 可以使用数组指定多个系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项// dataIndex?: number | number[],// // 可选，数据项名称，在有 dataIndex 的时候忽略// name?: string | string[],})},handleMouseleave(item){this.$refs.chart.dispatchAction({type: 'downplay',seriesName: item.name// seriesIndex: 1// dataIndex: 1// // 用 index 或 id 或 name 来指定系列。// // 可以使用数组指定多个系列。// seriesIndex?: number | number[],// seriesId?: string | string[],// seriesName?: string | string[],// // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项// dataIndex?: number | number[],// // 可选，数据项名称，在有 dataIndex 的时候忽略// name?: string | string[],})},}}
</script><style lang="scss" scoped></style>

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

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

相关文章

SpringBoot与BookKeeper整合，实现金融级别的日志存储系统

SpringBoot与BookKeeper整合，实现金融级别的日志存储系统

BookKeeper的优势 高吞吐量和低延迟 分布式架构: Apache BookKeeper采用分布式的架构设计&#xff0c;能够支持高并发的写入和读取操作。 批量写入: 支持批量写入日志条目&#xff0c;显著提高写入效率。 异步I/O: 使用异步I/O操作&#xff0c;减少等待时间&#xff0c;提升…
阅读更多...
【Bug】 [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed

【Bug】 [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed

当你在进行深度学习相关操作时&#xff0c;若因缺少本地的 CA 证书而无法下载资源&#xff0c;下面为你介绍几种解决办法&#xff1a; 方法一&#xff1a;更新 CA 证书 在大多数 Linux 发行版中&#xff0c;你可以使用包管理器来更新 CA 证书。例如&#xff0c;在基于 Debian…
阅读更多...
Vue3中AbortController取消请求的用法详解

Vue3中AbortController取消请求的用法详解

在 Vue3 中&#xff0c;AbortController 用于取消 fetch 请求&#xff0c;避免组件卸载后仍执行异步操作导致的潜在问题&#xff08;如内存泄漏或更新已销毁组件的状态&#xff09;。以下是详细用法和最佳实践&#xff1a; 一、基本用法 创建 AbortController 实例 在组件 setu…
阅读更多...
【刷题Day26】Linux命令、分段分页和中断（浅）

【刷题Day26】Linux命令、分段分页和中断（浅）

说下你常用的 Linux 命令&#xff1f; 文件与目录操作&#xff1a; ls&#xff1a;列出当前目录的文件和子目录&#xff0c;常用参数如-l&#xff08;详细信息&#xff09;、-a&#xff08;包括隐藏文件&#xff09;cd&#xff1a;切换目录&#xff0c;用于在文件系统中导航m…
阅读更多...
Spring Boot 参考文档导航手册

Spring Boot 参考文档导航手册

&#x1f4da; Spring Boot 参考文档导航手册 &#x1f5fa;️ ✨ 新手入门 &#x1f476; 1️⃣ &#x1f4d6; 基础入门&#xff1a;概述文档 | 环境要求 | 安装指南 2️⃣ &#x1f527; 实操教程&#xff1a;上篇 | 下篇 3️⃣ &#x1f680; 示例运行&#xff1a;基础篇 …
阅读更多...
卷积神经网络（CNN）详细教程

卷积神经网络（CNN）详细教程

卷积神经网络&#xff08;CNN&#xff09;详细教程 一、引言 卷积神经网络&#xff08;Convolutional Neural Networks, CNN&#xff09;是一种深度学习模型&#xff0c;广泛应用于图像识别、视频分析、自然语言处理等领域。CNN通过模拟人类视觉系统的层次结构&#xff0c;能够…
阅读更多...
解决SSLError: [SSL: DECRYPTION_FAILED_OR_BAD_RECORD_MAC] decryption faile的问题

解决SSLError: [SSL: DECRYPTION_FAILED_OR_BAD_RECORD_MAC] decryption faile的问题

问题描述&#xff1a; 在pip安装第三方库时&#xff0c;出现SSL的问题。 传输层安全性协议&#xff08;TLS&#xff09;及其前身安全套接层&#xff08;SSL&#xff09;是现在的 HTTPS 协议中的一种安全协议&#xff0c;目的是为互联网通信提供安全及数据完整性保障。而较新版…
阅读更多...
SpringBoot程序的创建以及特点，配置文件，LogBack记录日志，配置过滤器、拦截器、全局异常

SpringBoot程序的创建以及特点，配置文件，LogBack记录日志，配置过滤器、拦截器、全局异常

目录 一、创建一个SpringBoot程序 二、SpringBoot的特点 ①主要特点 ②其他特点 ③热部署 启动热部署 关闭热部署 三、SpringBoot的配置文件 ①SpringBoot三种配置文件的格式&#xff08;以设置端口号为例&#xff09;&#xff1a; ②配置文件的优先级 ③常见配置项 1…
阅读更多...
i18n-ai-translate开源程序，可以使用DeepSeek等模型将您的 i18nJSON翻译成任何语言

i18n-ai-translate开源程序，可以使用DeepSeek等模型将您的 i18nJSON翻译成任何语言

一、软件介绍 文末提供程序和源码下载 i18n-ai-translate开源程序使用 DeepSeek等模型可以将您的 i18n JSON 翻译成任何语言。 无缝翻译本地化文件。支持嵌套翻译文件的目录。需要i18next样式的JSON 文件&#xff08;文末一并提供下载&#xff09;。 二、模式 CSV 模式 三个…
阅读更多...
Flask + ajax上传文件（一）--单文件上传

Flask + ajax上传文件（一）--单文件上传

一、概述 本教程将教你如何使用Flask后端和AJAX前端实现文件上传功能，包含完整的代码实现和详细解释。 二、环境准备 1. 所需工具和库 Python 3.xFlask框架jQuery库Bootstrap（可选，用于美化界面）2. 安装Flask pip install flask三、项目结构 upload_project/ ├── a…
阅读更多...
如何在 Postman 中，自动获取 Token 并将其赋值到环境变量

如何在 Postman 中，自动获取 Token 并将其赋值到环境变量

在 Postman 中&#xff0c;你可以通过 预请求脚本&#xff08;Pre-request Script&#xff09; 和 测试脚本&#xff08;Tests&#xff09; 实现自动获取 Token 并将其赋值到环境变量&#xff0c;下面是完整的操作步骤&#xff1a; ✅ 一、创建获取 Token 的请求 通常这个请求…
阅读更多...
北斗导航 ｜ 基于Transformer+LSTM+激光雷达的接收机自主完好性监测算法研究

北斗导航 ｜ 基于Transformer+LSTM+激光雷达的接收机自主完好性监测算法研究

基于Transformer+LSTM+激光雷达的接收机自主完好性监测算法研究 接收机自主完好性监测（RAIM）是保障全球导航卫星系统（GNSS）定位可靠性的核心技术。传统RAIM算法依赖最小二乘残差法，存在故障漏检、对复杂环境适应性差等问题。结合Transformer、LSTM与激光雷达的多模态融合…
阅读更多...
基于Python爬虫的豆瓣电影信息爬取（可以根据选择电影编号得到需要的电影信息）

基于Python爬虫的豆瓣电影信息爬取（可以根据选择电影编号得到需要的电影信息）

# 豆瓣电影信息爬虫（展示效果如下图所示：） 这是一个功能强大的豆瓣电影信息爬虫程序，可以获取豆瓣电影 Top 250 的详细信息。 ## 功能特点 - 自动爬取豆瓣电影 Top 250 的所有电影信息 - 支持分页获取，每页 25 部电影，共 10 页 - 获取每部电影的详细信息，包括： - 标题…
阅读更多...
Ubuntu22.04/24.04 P104-100 安装驱动和 CUDA Toolkit

Ubuntu22.04/24.04 P104-100 安装驱动和 CUDA Toolkit

硬件环境 使用一块技嘉 B85m-DS3H 安装 P104-100, CPU是带集成显卡的i5-4690. 先在BIOS中设置好显示设备优先使用集成显卡(IGX). 然后安装P104-100开机. 登入Ubuntu 后查看硬件信息, 检查P104-100是否已经被检测到 # PCI设备 lspci -v | grep -i nvidia lspci | grep NVIDIA …
阅读更多...
东南亚与中东小游戏市场出海调研报告

东南亚与中东小游戏市场出海调研报告

东南亚与中东小游戏市场出海调研报告 目标市场筛选与概况 (The Gaming Market in Southeast Asia (SEA) | Allcorrect)图：2018–2027年东南亚主要国家游戏市场收入（亿美元）趋势。到2024年东南亚游戏市场规模预计将接近300亿美元 (2024年东南亚手游市场怎么样？ - 快出海问…
阅读更多...
力扣4-最长公共前缀

力扣4-最长公共前缀

一.题目 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 ""。 示例 1&#xff1a; 输入&#xff1a;strs ["flower","flow","flight"] 输出&#xff1a;"fl"示例 2&…
阅读更多...
设计模式和单一原则笔记

设计模式和单一原则笔记

单一原则&#xff1a;方法 对象 策略模式&#xff1a;方法实现 // 策略接口&#xff08;单一职责&#xff1a;定义计算规范&#xff09; public interface PriceStrategy {boolean match(String type); // 职责1&#xff1a;判断是否适用该策略double calculate(double pric…
阅读更多...
常见正则表达式整理与Java使用正则表达式的例子

常见正则表达式整理与Java使用正则表达式的例子

一、常见正则表达式整理 1. 基础验证类 邮箱地址 ^[a-zA-Z0-9._%-][a-zA-Z0-9.-]\\.[a-zA-Z]{2,}$ &#xff08;匹配如 userexample.com&#xff09;手机号 ^1[3-9]\\\\d{9}$ &#xff08;匹配国内11位手机号&#xff0c;如 13812345678&#xff09;中文字符 ^[\u4e00-\u9fa5…
阅读更多...
vue2 项目的 vscode 插件整理

vue2 项目的 vscode 插件整理

Folder Selector 当项目文件很多时&#xff0c;查找一个文件&#xff0c;可能需要在资源管理器中不断的滚动再打开文件夹查找文件&#xff0c;很麻烦&#xff0c;这个可以增加一个面板通过右键文件夹选择 然后在面板中查看文件 Reveal Button 文件中跳转到另一个文件时&#…
阅读更多...
使用 Node、Express 和 MongoDB 构建一个项目工程

使用 Node、Express 和 MongoDB 构建一个项目工程

本文将详细介绍如何使用 Node.js Express MongoDB 构建一个完整的 RESTful API 后端项目&#xff0c;涵盖&#xff1a; 项目初始化 Express 服务器搭建 MongoDB 数据库连接 REST API 设计&#xff08;CRUD 操作&#xff09; 错误处理与中间件 源码结构与完整代码 部署建…
阅读更多...
最新文章

Copyright @ 2022~2023