Echarts 配置项 series 中的 data 是多维度

news/2024/4/21 14:19:03/文章来源:https://blog.csdn.net/qq_53810245/article/details/136496280

文章目录

    • 需求
    • 分析

需求

如下图数据格式所示,现要求按照该格式进行绘制折线图
在这里插入图片描述

在这里插入图片描述

分析

在绘制折线图时,通常我们的 series 中的 data 数据是这样的格式

option = {title: {text: 'Stacked Area Chart'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Email',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',stack: 'Total',label: {show: true,position: 'top'},areaStyle: {},emphasis: {focus: 'series'},data: [820, 932, 901, 934, 1290, 1330, 1320]}]
};

但是给定的格式是如下的这种,我们就需要进行一些变换

  1. 首先是 Y 轴的格式需要改变,之前是value,但value会导致数据变为这种情况
    在这里插入图片描述
    因此需要将Y轴格式改为如下,效果就出来了
    在这里插入图片描述
    在这里插入图片描述

  2. X 轴需要变换

xAxis: {type: 'category',boundaryGap: false,data: []},
  1. series 中 data 的数据需要变换
 series: [{data: [// xAxis    yAxis[  0,        0,    2  ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。[  '星期四',  2,    1  ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。[  2,       'p',   2  ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。[  3,        3,    5  ]]}] 

格式处理如下:

for (let index = 0; index < res.series.length; index++) {const item = res.series[index];const obj = {name: item.name,type: 'line',data: item.data,stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},}option.value.series.push(obj)}option.value.xAxis.data = res.xAxisData
  1. 源码
<template><div ref="echartsRef" class="content"> </div>
</template><script lang="ts" setup>
import {ref,reactive,watch,watchEffect,toRefs,defineProps,onMounted,
} from 'vue';
import * as echarts from 'echarts';
import { getInfoAQJCApi } from '@/api/dashboard'/*** @description : 安全监测模块* @author : 'Hukang'* @param : '' * @date : 2024-03-05 14:59:56
*/
const props = defineProps({//子组件接收父组件传递过来的值InfoAQJ: Object,
})
//使用父组件传递过来的值
const { InfoAQJ } = toRefs(props)const echartsData = reactive({option: {title: {text: ''},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: [],right: "5%",top: "5%",textStyle: {fontSize: 12, //字体大小color: "#ffffff" //字体颜色}},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: "category",boundaryGap: false,data: [],axisLine: {lineStyle: {color: "rgba(255, 255, 255, 0.20)"}},axisTick: {show: false},nameTextStyle: {color: "#ffffff",fontSize: 12},axisLabel: {textStyle: {color: "#ffffff",fontSize: 12},formatter: (value, index) => {return value.replace(/(\d{4})-(\d{1,2})-(\d{1,2}).*/, "$1-$2-$3").slice(5);}}},yAxis: [{name: '',type: "value",axisTick: {show: false},nameTextStyle: {color: "#ffffff",fontSize: 12},axisLine: {show: false,lineStyle: {color: "#ffffff"}},axisLabel: {textStyle: {color: "#ffffff",fontSize: 12}},splitLine: {lineStyle: {type: "dashed", //虚线color: "rgba(255,255,255,0.2)"},show: true //隐藏},min(v) {return v.min}}],series: []}
});const { option } = toRefs(echartsData);
const echartsRef = ref<string>();
let echartInstance;
let series = [];
function getAreaStyle(index) {let areaStyle = null;if (index == 0) {areaStyle = {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#FDBD35"},{offset: 0.8,color: "rgba(253, 189, 53, 0.1)"}])};} else if (index == 1) {areaStyle = {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#32D7FF"},{offset: 0.8,color: "rgba(0,254,243,0.1)"}])};} else {areaStyle = {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#20D661"},{offset: 0.8,color: "rgba(32,214,97,0.06)"}])};}return areaStyle;
}
watchEffect(() => {if (InfoAQJ.value) {const res = InfoAQJ.valueoption.value.legend.data = res.legendoption.value.yAxis[0].name = res.yMain[0]option.value.xAxis.data = res.xAxisDatares.series.forEach((item, index) => {let obj = {name: item.name,type: "line",data: item.data,smooth: true,areaStyle: getAreaStyle(index)};series.push(obj);option.value.series.push(obj)});}
})
onMounted(() => {echartInstance = echarts.init(echartsRef.value, 'macarons');echartInstance.setOption(option.value);
});
</script><style scoped lang="less">
@import '@/assets/style/leftright.less';.content {width: 100%;height: 100%;
}
</style>

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

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

相关文章

阿里云配置服务器详细指南_2024新版CPU内存带宽系统盘选择

阿里云服务器配置怎么选择&#xff1f;CPU内存、公网带宽和系统盘怎么选择&#xff1f;个人开发者或中小企业选择轻量应用服务器、ECS经济型e实例&#xff0c;企业用户选择ECS通用算力型u1云服务器、ECS计算型c7、通用型g7云服务器&#xff0c;阿里云服务器网aliyunfuwuqi.com整…

微前端之实现微前端的几种模式

微前端是什么 实现微前端的几种模式 基于路由分发&#xff1a;Web Components 或 Custom Elements&#xff1a;iframe集成&#xff1a;动态加载/懒加载微前端&#xff1a;容器化方案&#xff1a;single-spa 与 无界的区别 使用无界 准备工作 安装nvm安装pnpm 微前端是什么 微…

网康科技 NS-ASG 应用安全网关 SQL注入漏洞复现(CVE-2024-2022)

0x01 产品简介 网康科技的NS-ASG应用安全网关是一款软硬件一体化的产品,集成了SSL和IPSec,旨在保障业务访问的安全性,适配所有移动终端,提供多种链路均衡和选择技术,支持多种认证方式灵活组合,以及内置短信认证、LDAP令牌、USB KEY等多达13种认证方式。 0x02 漏洞概述 …

挑战杯 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

Redis实战—商户查询缓存

本博客为个人学习笔记&#xff0c;学习网站&#xff1a;黑马程序员Redis入门到实战 实战篇之商户查询缓存 目录 什么是缓存 添加Redis缓存 缓存更新策略 数据库缓存不一致解决方案 案例&#xff1a;给查询商铺的缓存添加超时剔除和主动更新策略 缓存穿透 案例&#xff1…

Linux之cd、pwd、mkdir 命令

cd命令&#xff0c;切换目录 1&#xff09;当Linux终端&#xff08;命令行&#xff09;打开的时候&#xff0c;会默认以用户的HOME目录作为当前的工作目录。 2&#xff09;我们可以通过cd命令&#xff0c;更改当前所在的工作目录。 3&#xff09;cd命令来自英文&#xff1a;C…

Python 开发图形界面程序

用 Python 语言开发图形界面的程序&#xff0c;有2种选择&#xff1a; Tkinter 基于Tk的Python库&#xff0c;这是Python官方采用的标准库&#xff0c;优点是作为Python标准库、稳定、发布程序较小&#xff0c;缺点是控件相对较少。 PySide2/PySide6 基于Qt 的Python库&#x…

2024.03.02蓝桥云课笔记

1.scanf与printf取消分隔符的限制方法 示例代码&#xff1a; int main() { char s[10];scanf("%d[^\n]",s);printf("%s",s);return 0; } 运行&#xff1a; 输入&#xff1a;Hello World 输出&#xff1a;Hello World 注&#xff1a;其中[]中是一个正则…

飞书云文档API操作详细介绍

1.场景分析 公司内部很多文档都是由多人进行维护的&#xff0c;随时发生变更&#xff0c;因此在利用这些数据的时候就需要直接读取云文档的数据&#xff0c;从而执行下一步动作。团队云文档api执行权限一般需要管理员审核才能使用。如果你就是管理员&#xff0c;那么恭喜你&am…

Python(NetOps)前传-网络设备开局配置

背景 我们知道用Python在cli配置网络设备的前提是&#xff1a; 网络设备与Python主机网络可达网络设备已开启并完成ssh相关配置 目标 本文已华为S5720S-52P-LI-AC交换机为例&#xff0c;完成&#xff1a; 完成网络设备开局配置&#xff1b;用Python脚本验证ssh登录 配置 …

html css 导航栏 2

鼠标划过会向上移动改变颜色 html文件 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>导航栏</title><link rel"stylesheet" href"css/dhl1.css" /></head><body><div …

Marin说PCB之POC电路layout设计仿真案例---01

最近娃哈哈饮料突然爆火&#xff0c;看新闻后才知道春晚的的时候宗老已经病的很严重了&#xff0c;现在也已经离我们而去了&#xff0c;宗老是一个值得我们尊敬爱戴的伟大企业家。于是乎小编我立马去他们的直播间买了一箱娃哈哈AD钙奶支持一下我们的国货。 中午午休的时候&…

LeetCode_25_困难_K个一组翻转链表

文章目录 1. 题目2. 思路及代码实现&#xff08;Python&#xff09;2.1 模拟 1. 题目 给你链表的头节点 h e a d head head &#xff0c;每 k k k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k k k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节…

【HarmonyOS】鸿蒙开发之Stage模型-UIAbility的启动模式——第4.4章

UIAbility的启动模式简介 一共有四种:singleton,standard,specified,multion。在项目目录的:src/main/module.json5。默认开启模式为singleton(单例模式)。如下图 singleton&#xff08;单实例模式&#xff09;启动模式 每个UIAbility只存在唯一实例。任务列表中只会存在一…

网络编程(3/4)

广播 ​ #include<myhead.h>int main(int argc, const char *argv[]) {//1、创建套接字int sfd socket(AF_INET, SOCK_DGRAM, 0);if(sfd -1){perror("socket error");return -1;}//2、将套接字设置成允许广播int broadcast 1;if(setsockopt(sfd, SOL_SOC…

重装显卡驱动记录

重装显卡驱动记录 任务记录现状描述执行情况 任务 晚上回来&#xff0c;开电脑&#xff0c;发现总是进不去系统&#xff08;这个情况我经常见&#xff09;&#xff0c;但偶尔进系统&#xff0c;识别不了我的外接屏&#xff08;这个第一次见&#xff09;。来来回回重启了1h多了…

Igraph入门指南 2

3、图的基本要素——边(Edge|Arc) 图的最本质的内容是一种二元关系&#xff0c;如果给这种二元关系赋予一个方向&#xff0c;就产生了有向图和无向图的分类&#xff0c;在教材中&#xff0c;无向的边叫Edge&#xff0c;有向的边叫Arc&#xff0c;另外&#xff0c;根据两个顶点…

redis IO多路复用模型详解

一、IO 1.1、IO模型 我们常说的IO&#xff0c;指的是文件的输入和输出 &#xff0c;但是在操作系统层面是如何定义IO的呢&#xff1f;到底什么样的过程可以叫做是一次IO呢&#xff1f; 拿一次磁盘文件读取为例&#xff0c;我们要读取的文件是存储在磁盘上的&#xff0c;我们的…

异步编程实战:使用C#实现FTP文件下载及超时控制

博客标题: 异步编程实战&#xff1a;使用C#实现FTP文件下载及超时控制 如果你的函数不是async&#xff0c;你仍然可以实现相同的超时功能&#xff0c;但你将不得不依赖更多的同步代码或使用.Result或.GetAwaiter().GetResult()来阻塞等待任务完成&#xff0c;这可能导致死锁的风…

1.初识python

1.初识python 编程语言是用来定义计算机程序的语言&#xff0c;用来向计算机发出指令。 1.python语言是一种面向对象的解释型高级编程语言。 解释型语言&#xff1a;使用专门的解释器对源码程序逐行解释成特定平台的机器并立即执行&#xff0c;是代码在执行时才被解释器一行行…