vue3中使用echarts折线图初始化只显示一条数据,其余折线根据用户点击进行显示

news/2024/11/16 20:33:23/

echarts_0">vue3中使用echarts折线图初始化只显示一条折线,其余折线根据用户点击进行显示

1、主要是在图例属性中去配置selected属性,将刚开始需要展示的折线设置为true,其余设置为false

selected: {"云存储": false,"云胶片": false,"检查检验共享互认": false,"云质控": false,"运营平台": false,"云PACS": false,"云诊断": false,"影像底座": false,"总调用数量": true,
},

2、关键代码片段

let chart = null
const reqAppApiUseSevenDay = () => {getAppApiUse7Day().then((res) => {const {data: { xAxis, series }} = reschartObj.xAxis = xAxis.map((item) => item.split('-').slice(1).join('-'))chartObj.series = series.map((item, index) => {if (item.name === '总调用数量') {return { ...item, type: 'line' }}return {...item,type: 'line',legendIndex: index}})chartObj.legend = series.map((item) => item.name)setTimeout(() => {chart = echarts.init(chartContainer.value)let option = {tooltip: {trigger: 'axis'},legend: {data: chartObj.legend,bottom: 20,selected: {"云存储": false,"云胶片": false,"检查检验共享互认": false,"云质控": false,"运营平台": false,"云PACS": false,"云诊断": false,"影像底座": false,"总调用数量": true,},},grid: {top: '20px',left: '20px',right: '18px',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: chartObj.xAxis},yAxis: {type: 'value'},series: chartObj.series}option && chart.setOption(option)// 监听窗口大小变化,重新设置ECharts的尺寸window.addEventListener('resize', resizeHandler)}, 100)})
}function resizeHandler() {chart && chart.resize()
}

http://www.ppmy.cn/news/1531360.html

相关文章

Windows系统上安装JDK

在Windows系统上安装JDK(Java Development Kit)的步骤如下: 下载JDK: 访问Oracle官方网站或其他JDK提供商(如AdoptOpenJDK、Amazon Corretto等)的网站。选择适合你需求的JDK版本(例如&#xff0…

使用Fiddler Classic抓包工具批量下载音频资料

1. 通过F12开发者工具,下载音频文件 浏览器打开音频列表->F12快捷键->网络->媒体,播放一个音频文件,右边媒体下生成一个音频文件,右击“在新标签页中打开”,可以下载这个音频文件。 2.通过Fiddler Classic抓…

养猫久了才发现,宠物空气净化器才是真正除猫毛的神器

相信每个打工人都在期待这个国庆小长假吧,终于等到了!这次我要把属于我的都夺回来!刚好工资到手、小长假我有,只想往家里一躺什么也不想,唯一最想做的就是要在这个节假日里好好的陪一下我家猫咪,还有就是买…

如何在 Three.js 场景中创建可点击展开的标签

在复杂的可视化场景中,经常需要为 3D 对象添加可交互的标签,以便用户点击时可以查看详细信息。这篇文章将通过一个简单的案例展示,如何在 Three.js 中为对象创建可点击的标签,点击标签可以展开详细信息,再次点击可以关…

用户态缓存:环形缓冲区(Ring Buffer)

目录 环形缓冲区(Ring Buffer)简介 为什么选择环形缓冲区? 代码解析 1. 头文件与类型定义 1.1 头文件保护符 1.2 包含必要的标准库 1.3 类型定义 2. 环形缓冲区结构体 2.1 结构体成员解释 3. 辅助宏与内联函数 3.1 min 宏 3.2 is…

企微SOP:构建标准化运营流程,驱动企业高效增长

在当今竞争激烈的市场环境中,企业微信的(简称“企微”)运用已成为企业与客户沟通、服务及营销的重要渠道。为了确保企微运营的高效性、一致性和可复制性,企业亟需建立一套标准化的运营流程(Standard Operating Procedu…

MyBatis 中#{} 和 ${} 的区别

在 MyBatis 中,#{} 和 ${} 都是用来在 SQL 语句中插入动态参数的,但是它们之间存在重要的区别: #{} 的特点: 预编译处理:当使用 #{} 时,MyBatis 会将 SQL 语句中的参数占位符转换为预编译语句 (PreparedSt…

STL05——手写一个简单版本的红黑树(500+行代码)

STL05——手写一个简单版本的红黑树 题目描述 在STL中,红黑树是一个重要的底层数据结构,本题需要设计一个 RedBlackTree 类,实现如下功能: 1、基础功能 构造函数:初始化 RedBlackTree 实例析构函数:清理…