echarts学习:调色盘

前言

在之前的几篇文章中,我试图复现下面的这张图表。

目前复现的效果如下:

今天我想要实现的效果是让y轴与对应的折线显示同样的颜色。

1.调色盘介绍

我早就听说echarts存在一个调色盘的概念,如今终于是好好的了解了一下。调色盘就是配置项中的color属性,它的值是一个颜色数组,它的作用是给系列设置颜色(如果系列本身没有设置颜色的话)

例如我设置了调色盘后效果如下:

{
  color:[
    'Aqua',
    'BurlyWood'
  ],
} 

之后通过调色盘我就可以方便的将我的图表设置为示例图中一样的颜色。

不过不得不说,调色盘与我想象中的效果差别很大,我没想到它只能应用与系列,我本以为也可以在轴线中使用调色盘中的颜色的。

2.给y轴设置颜色

最后发现只能使用最笨的方法一个个的给y轴添加颜色。我这里使用了代码来添加:

const option = ref({
  color: ["#F30502", "#FBA603", "#067E05", "#0000EB", "#82007A", "#FCB9CB"],
  tooltip: {
    trigger: "axis",
  },
  legend: {},
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    left: "20%",
    right: "20%",
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLine: {},
  },
  yAxis: [
    {
      type: "value",
      name: "水位(m)",
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
    },
    {
      type: "value",
      name: "流量(m³/s)",
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
    },
    {
      type: "value",
      name: "指标参数三",
      position: "right",
      offset: 60,
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
    },
    {
      type: "value",
      name: "指标参数四",
      position: "right",
      offset: 120,
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
    },
    {
      type: "value",
      name: "指标参数五",
      position: "left",
      offset: 60,
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
    },
    {
      type: "value",
      name: "指标参数六",
      position: "left",
      offset: 120,
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
    },
  ],
  series: [
    {
      name: "xxx水位",
      type: "line",
      yAxisIndex: 0,
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "xxx流量",
      type: "line",
      yAxisIndex: 1,
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: "series3",
      type: "line",
      yAxisIndex: 2,
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: "series4",
      type: "line",
      yAxisIndex: 3,
      data: [320, 332, 301, 334, 390, 330, 320],
    },
    {
      name: "series5",
      type: "line",
      yAxisIndex: 4,
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
    {
      name: "series6",
      type: "line",
      yAxisIndex: 5,
      data: [582, 570, 543, 599, 610, 550, 560],
    },
  ],
});

option.value.yAxis.forEach((axis, i) => {
  axis.axisLine.lineStyle = { color: option.value.color[i] };
});

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

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

相关文章

JAVA反编译工具-CFR(class单个反编译、JAR包整体反编译)

环境说明 1、win10 2、JAVA8(环境变量要配置好) 3、cfr版本:C:\Users(xx)当前用户\cfr-0.152.jar 4、命令行操作路径:C:\Users(xx)当前用户 5、示例反编译jar包:C:\Users(xx)当前用户\ruoyi-admin.jar CFR工具相关参…

【Unity】加速Unity编辑器模式启动时间

Unity每次Play之后都会Reload Script Assemblies(重新加载脚本程序集)。 如果我们没有使用很多Assem,则并不需要在播放前重新编译。 可以在设置中将此事的重新编译关闭。 在Edit > Project Settings > Editor 面板中 找到Enter Play…

Linux项目自动化构建工具

一.背景 会不会写makefile,从侧面说明了一个人是否具备完成大型工程的能力。 一个工程中的源文件不计其数,按照类型,功能,模块分别放在若干个目录中,makefile定义了一系列的规则来指定,哪些文件需要先编译…

django学生信息管理系统-计算机毕业设计源码95780

摘要 从20年代开始,计算机疯狂的出现在人们的生活以及工作当中,成为人们生活、工作的好帮手,计算机深入到每家每户当中,网络办公,网络教学更是替换了传统手工记录管理的方式,使用计算机办公可以不必局限于固…

【SSM】医疗健康平台-项目开发准备

知识目标 了解架构,能够说出常用的架构及其优缺点 熟悉项目的技术栈,能够说出每个技术栈的用途 了解项目的功能结构,能够说出医疗健康项目的功能组成 掌握医疗健康项目的环境搭建,能够根据系统模块的划分搭建医疗健康项目中的父…

五、LVS原理

目录 5.1 LVS 相关原理 5.1.1 LVS集群的体系结构以及特点 5.1.1.1 LVS简介 5.1.1.2 LVS体系结构 5.1.1.3 LVS相关术语 5.1.1.4 LVS工作模式 5.1.1.5 LVS调度算法 5.1.2 LVS-DR集群介绍 5.1.2.1 LVS-DR模式工作原理 5.1.2.2 LVS-DR模式应用特点 5.1.2.3 LVS-DR模式ARP抑制 5.1…

解决layui框架自带的excel导出长数据变科学计数法(使用\t和不使用\t的方法)

前言:项目中需要导出excel时,如果是大项目、要求高,当然使用第三方插件,或者后台导出是必要的,但是如果是一些小型项目,并且对导出excel样式要求不是很严格的,而且前端框架用的是layui的,layui框架自带的excel导出就成了我们最方便快捷的选择,但是在导出数据时会遇到一…

[CUDA编程] cuda graph优化心得

CUDA Graph 1. cuda graph的使用场景 cuda graph在一个kernel要多次执行,且每次只更改kernel 参数或者不更改参数时使用效果更加;但是如果将graph替换已有的kernel组合,且没有重复执行,感觉效率不是很高反而低于原始的kernel调用…

2024年6月份实时获取地图边界数据方法,省市区县街道多级联动【附实时geoJson数据下载】

首先,来看下效果图 在线体验地址:https://geojson.hxkj.vip,并提供实时geoJson数据文件下载 可下载的数据包含省级geojson行政边界数据、市级geojson行政边界数据、区/县级geojson行政边界数据、省市区县街道行政编码四级联动数据&#xff0…

根据mooc 数据库旧代码 实现剥离数据库链接单独成类,并进行测试

数据源详情链接,SQLserver 2019 代码复制粘贴可产生数据 数据库JDBC 查询sqlserver 2019 利用模板实现输入查询-CSDN博客 效果如下 剥离的链接模块 Slinkv2.java package SQLadd;import java.sql.Connection; import java.sql.DriverManager; import java.sql.Re…

在ensp上配置动态路由协议实验设计

动态路由协议是用来在网络中自动更新路由信息的一种技术,它可以让网络设备(如路由器)根据当前网络的状态调整数据的传输路径。这种协议特别适用于大型复杂的网络环境,可以有效地处理网络配置的变化,如链接的添加、删除…

flutter报错You are currently using Java 1.8

flutter报错Could not run phased build action using connection to Gradle distribution ‘https://services.gradle.org/distributions/gradle-7.6.3-all.zip’.\r\norg.gradle.api.ProjectConfigurationException: A problem occurred configuring root project ‘android’…

Android RelativeLayout Rtl布局下的bug:paddingStart会同时作用于左右内边距

问题现象 如上图,只是设置了paddingStart,在RTL布局下,左右都产生了10dp的间距。其他布局如LinearLayout,FrameLayout则没有这个问题。 private void positionAtEdge(View child, LayoutParams params, int myWidth) {if (isLayou…

问题:一般在管理工作复杂、面广且管理分工比较细致的单位,常采用()组织形式。 #媒体#媒体

问题:一般在管理工作复杂、面广且管理分工比较细致的单位,常采用()组织形式。 A.直线式 B.职能式 C.矩阵式 D.团队式 参考答案如图所示

使用易备数据备份软件,简单快速地备份 Oracle 数据库

易备数据备份软件能够以简单高效的方式,实现对 Oracle 数据库的保护。 易备数据备份软件数据库备份功能的关键特性 自动保护网站数据库及应用程序实时备份,不需要任何中断或数据库锁定基于日期和时间的备份任务计划可恢复到一个已存在的数据库或创建一…

Web前端大作业:基于html+css+js的仿淘宝首页前端项目(内附源码)

文章目录 一、项目介绍二、项目展示三、源码展示四、源码获取 一、项目介绍 这个项目是一个Web前端大作业,目的是让学生们通过实践仿设计淘宝官网的前端页面,来全面锻炼他们的HTML、CSS和JavaScript编程能力,以及产品需求分析、界面设计、交互设计等软实力。 淘宝作为国内最大…

TMCM-BB1是单轴板驱动器

TMCM-BB4 简介 TMCM-BB1和TMCM-BB4是Trinamic插槽式模块的基板。TMCM-BB1是单轴板,提供对一个MCU模块和一个驱动器模块的访问。TMCM-BB4是一个4轴板,提供对41模块插槽的访问。TMCM-0930模块采用单36针PCI插座,整个系统采用主MCU(…

【精品方案推荐】大数据治理平台建设解决方案(66页PPT)

随着企业数据量的迅速增长和复杂化,如何有效管理、分析和利用这些数据成为企业面临的重要挑战。大数据治理平台作为解决这一问题的关键工具,旨在为企业提供全面、高效的数据管理、安全保障和业务支持。 问题1:上大数据平台要废弃已上线的传统…

BitMEX 联合创始人 Arthur Hayes 加入 Covalent 担任战略顾问

Arthur Hayes 加入 Covalent Network(CQT),成为其战略顾问。 Hayes 认为 Covalent 与其竞争对手如 The Graph 相比,Covalent Network 的 CQT 代币一直被相对低估,他希望帮助 Covalent Network(CQT&#x…

【深度学习】数竹签演示软件系统

往期文章列表: 【YOLO深度学习系列】图像分类、物体检测、实例分割、物体追踪、姿态估计、定向边框检测演示系统【含源码】 【深度学习】物体检测/实例分割/物体追踪/姿态估计/定向边框/图像分类检测演示系统【含源码】 【深度学习】YOLOV8数据标注及模型训练方法整…