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

文章目录

    • 需求
    • 分析

需求

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

在这里插入图片描述

分析

在绘制折线图时,通常我们的 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.mzph.cn/news/725802.shtml

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

相关文章

C语言大小写字母互换

C语言中大小写字母的互换可以使用ASCII码进行操作。ASCII码中&#xff0c;大写字母的范围是65到90&#xff0c;小写字母的范围是97到122。可以通过判断字符的ASCII码来进行大小写字母的互换。 以下是一个示例代码&#xff1a; #include <stdio.h>int main() {char ch;p…

uniapp+vue3+vites使用lime-echart问题记录

问题记录 1.vue3使用echarts,H5和微信小程序兼容问题 1.vue3使用echarts,H5和微信小程序兼容问题 问题描述&#xff0c;正常使用echarts&#xff0c;H5正常&#xff0c;小程序报错 报错信息如下 解决方案&#xff1a; 注意要点一&#xff1a;vue3需要使用esm文件 地址&#x…

TOMCAT多实例及调优

一、JVM相关理论 &#xff08;一&#xff09;JVM组成 1.JVM组成部分 类加载子系统: 使用Java语言编写.java Source Code文件&#xff0c;通过javac编译成.class Byte Code文件。class loader类加载器将所需所有类加载到内存&#xff0c;必要时将类实例化成实例 运行时数据区…

streamlit学习-如何播放HLS视频(streamlit嵌入html)

streamlit学习-如何播放HLS视频 一.效果二.直播环境搭建(仅供演示)1.生成m3u82.搭建http服务器(支持跨域)3.验证hls(VLC播放 http://localhost:8000/playlist.m3u8) 三.streamlit demo 本文演示了streamlit如何实现hls直播[streamlit中嵌入html] 一.效果 二.直播环境搭建(仅供演…

java 校验框架 - Bean Validation

目录 0. 引言1. 什么是 Bean Validation2. 验证注解3. Bean Validation 的实现4. 快速实战5. 总结 0. 引言 我们在写一些业务逻辑&#xff0c;经常需要写一些业务合法性校验&#xff0c;而这些校验是否可能是共用或者通用性的&#xff0c;那有没有想过有什么好的使用方式&#…

ipv6一致性测试-icmpv6测试步骤

ICMPv6测试步骤 测试配置 防火墙接口1地址 2017:28::6/64 防火墙接口1的MAC地址 00:0C:29:D9:AD:9E 测试主机1地址 2017:28::5/64 测试主机1的网关 2017:28::6 防火墙接口2地址 2017:29::5/64 防火墙接口2的MAC地址 00:0C:29:D9:AD:A8 测试主机2地址 2017:29::5/64 测试主机2的…

交叉编译搭建

1.安装ssh工具 sudo apt-get install openssh-server 2.下载教程编译器 Linaro GCC 编译器下载地址如下&#xff1a; https://releases.linaro.org/components/toolchain/binaries/latest-7/arm-linux-gnueabihf/ 最新版本 u-boot启动有问题&#xff0c;下载4.9版本的编译器&a…

Docker前后端项目部署

目录 一、搭建项目部署的局域网 二、redis安装 三、MySQL安装 四、若依后端项目搭建 4.1 使用Dockerfile自定义镜像 五、若依前端项目搭建 一、搭建项目部署的局域网 搭建net-ry局域网&#xff0c;用于部署若依项目 docker network create net-ry --subnet172.68.0.0/1…

VGW在 Windows 平台上局域网就绪的旁路由器程序

在查阅本篇文章之前可以查看下&#xff0c;本人前两年写的关于VGW软件路由器的文章 Linux 平台上面单网卡 TUN/TAP实现局域网其它设备上网_linux 物理网卡与tun同网段-CSDN博客 VGW软件路由器是一个工作IEEE以太网&#xff08;L2&#xff09;链路层的路由器程序&#xff0c;它…

C++进阶之路---继承(一)

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、继承的概念及定义 1.继承的概念 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0…

Vue教学13:组件的生命周期:掌握组件的每一个关键时刻

大家好&#xff0c;欢迎回到我们的Vue教学系列博客&#xff01;在前十二篇博客中&#xff0c;我们学习了Vue.js的基础知识、安装Node.js与npm、使用Vue Devtools进行调试、Vue实例与生命周期钩子、数据绑定&#xff08;单向与双向&#xff09;、计算属性与侦听器、条件渲染和列…

LeetCode 刷题 [C++] 第98题.验证二叉搜索树

题目描述 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 题目分析 由题…

二级水平导航菜单栏的实现

1. 这个是本人设计的一带一路的二级水平导航栏HTML代码&#xff1b; 这里最后实现的效果是鼠标悬停在导航栏上面&#xff0c;就会显示下面的4个部分页面&#xff0c;这里只是以评论热 点作为例子&#xff0c;其他的类似&#xff1b; 2.首先要设计DIV&#xff0c;然后利用无…

Android 消息恢复 - 如何在 Android 上检索已删除的短信

最新调查显示&#xff0c;手机每天发送和接收的短信数以亿计&#xff0c;尤其是Android智能手机。但与此同时&#xff0c;Android消息丢失也每天都在发生。因此&#xff0c;如何恢复Android手机上已删除的短信对于那些在设备中保存了一些重要信息的人来说似乎非常重要。 在这里…

手机中常用的传感器

文章目录 重力传感器 Gravity sensor三维坐标 加速度传感器 Accelerometer三维坐标 陀螺仪 Gyroscope三维坐标 磁力传感器 Magnetometer三维坐标 光线传感器 Light Sensor接近传感器 Proximity Sensor其他传感器协同工作相机自动调整 传感器有唤醒和非唤醒属性 关于重力传感器和…

前端开发报错:Cannot find module ‘@angular-devkit/schematics‘ Require stack:

1、背景 由于近期需要搭建angular ng-zorro-mobile ionic 框架集成项目&#xff0c;但是在开发过程中遇到了报错&#xff1a; Cannot find module angular-devkit/schematics Require stack 2、原因 这里产生的原因是因为我当时遇到另外一个问题&#xff0c;误导我以为是版…

综合对比各家云服务厂商

云服务厂商的综合对比可以从多个维度进行&#xff0c;包括稳定性、操作便捷性、生态、价格以及安全性等。以下是对几家主流云服务厂商的综合对比&#xff1a; 阿里云&#xff1a;阿里云在稳定性、安全性、性价比、产品功能与生态方面都处于较为领先的地位。其拥有全球领先的云…

数字经济的新篇章:Web3的全球影响

随着区块链技术的飞速发展&#xff0c;Web3作为其重要组成部分&#xff0c;正在成为数字经济的新篇章&#xff0c;并在全球范围内展现出巨大的影响力。本文将深入探讨Web3对全球经济的影响&#xff0c;以及它所带来的新机遇和挑战。 1. Web3的定义与特点 Web3是建立在区块链技…

MyBatis和MyBatis-Plus的差别和优缺点

MyBatis和MyBatis-Plus的主要差别在于功能和特性方面。MyBatis是一个优秀的持久层框架&#xff0c;它支持自定义SQL、存储过程以及高级映射。MyBatis避免了几乎所有的JDBC代码和手动设置参数以及获取结果集。MyBatis可以使用简单的XML或注解来配置和映射原生信息&#xff0c;将…

【前端】CSS

定义&#xff1a;层叠样式表 Cascading Style Sheets&#xff0c;控制页面的展示效果 1.基本语法规范 选择器 1/n条声明 选择器决定针对谁修改声明决定修改啥声明的属性是键值对&#xff0c;使用 ; 区分键值对&#xff0c;使用 : 区分键和值 2.格式 style标签可放在head标…