给echarts图表线条、数据点和区域设置颜色

news2024/12/22 15:32:20

 let myChart = echarts.init(document.getElementById("chartmainCop"));
        // 获取当前干部的各项评分

        const allIndicators = Object.keys(this.dialogEacherTable[0])
          .filter(key => key !== "CadreID" && key !== "xm")
          .map(key => ({
            name: key,
            max: 100
          }));
        const colors = ["#D1351B", "#7DA5F0", "#90C66C"]; //边框色
        const areaColors = [
          "rgba(241,176,166,0.5)",
          "rgba(229,243,253,0.5)",
          "rgba(234,245,226,0.5)"
        ]; //覆盖色
        const seriesData = this.dialogEacherTable.map((item, index) => {
          const color = colors[index % colors.length];
          const areaColor = areaColors[index % areaColors.length];
          return {
            value: Object.keys(item)
              .filter(key => key !== "CadreID" && key !== "xm")
              .map(key => item[key]),
            name: item.xm,
            lineStyle: {
              color: color
            },
            itemStyle: {
              color: color
            },
            areaStyle: {
              color: areaColor
            }
          };
        });
        const option = {
          tooltip: { },
          legend: {
            data: seriesData.map(item => item.name),
            bottom: 10
          },
          radar: {
            name: {
              textStyle: {
                color: "#000",
                borderRadius: 1,
                padding: [1, 1]
              }
            },
            indicator: allIndicators,
            radius: "60%",
            fontSize: 14
          },
          series: [
            {
              name: "各项能力",
              type: "radar",
              data: seriesData
            }
          ]
        };
        myChart.setOption(option);

配置项解析:

  • tooltip:原本有自定义格式化函数,但被注释掉了,用于显示鼠标悬停时的提示信息。
  • legend:定义了图例的位置和数据,数据来源于seriesData的干部名字。
  • radar:配置雷达图的指标、半径比例和字体大小。
  • series:定义了数据系列,包括系列的名字、类型(雷达图)和数据来源。

这里主要使用到了3个边框色和三个覆盖色,因为我的业务里面最多只需要三种颜色就可以。并把颜色值赋值给lineStyle、itemStyle、areaStyle

 

lineStyle

lineStyle用于配置线条的样式,它通常用在折线图、雷达图等图表中。主要属性包括:

  • color:线条的颜色。
  • width:线条的宽度。
  • type:线条的类型,如'solid'(实线)、'dashed'(虚线)或'dotted'(点线)。
  • shadowBlurshadowColorshadowOffsetXshadowOffsetY:阴影效果的配置。

例如:

lineStyle: {
  color: '#ff0000',
  width: 2,
  type: 'dashed'
}
itemStyle

itemStyle用于配置图表中单个数据项的样式,适用于多种图表类型,如折线图的数据点、柱状图的柱子、饼图的扇区等。主要属性包括:

  • color:数据项的颜色。
  • borderColor:边框颜色。
  • borderWidth:边框宽度。
  • borderType:边框类型。
  • shadowBlurshadowColorshadowOffsetXshadowOffsetY:阴影效果的配置。
itemStyle: {
  color: '#00ff00',
  borderColor: '#000000',
  borderWidth: 1
}

areaStyle

areaStyle用于配置图表中区域填充的样式,常用于折线图的区域填充。主要属性包括:

  • color:填充颜色,可以是纯色,也可以是渐变色。
  • opacity:透明度,取值范围是0~1。
areaStyle: {
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {offset: 0, color: 'rgba(0,0,255,0.3)'},
    {offset: 1, color: 'rgba(0,0,255,0)'}
  ])
}

lineStyleitemStyleareaStyle分别被用来配置线条颜色、数据点颜色和区域填充颜色。这样可以使得图表的视觉效果更加丰富和美观。

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

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

相关文章

window电脑上使用python将pdf转换为word文档

1、电脑上安装Python运行环境 一、python官网下载链接 二、下载到电脑后,直接运行安装 三、安装完成后按:winR键进入window命令控制窗口,输入 python --version2、设置python依赖包国内镜像源 pip config set global.index-url https://mirr…

国家发改委区域司韩振海副司长一行莅临麒麟信安调研

7月31日,国家发改委区域司韩振海副司长一行莅临麒麟信安调研。湖南省发改委区域处处长孙健军,长沙市发改委党组成员、市长株潭一体化发展事务中心主任邹犇淼等相关领导陪同调研。麒麟信安总裁刘文清热情接待。 在麒麟信安展厅,韩振海副司长一…

在MANET中的TCP增强

本文内容节选自一篇系统性文献综述(Systematic Literature Review, SLR),标题为“TCP Performance Enhancement in IoT and MANET”,由 Sultana Parween 和 Syed Zeeshan Hussain 撰写,发表在《International Journal …

Windows下Rust OpenCV环境配置

首发于Enaium的个人博客 安装Chocolatey 首先我们需要安装Chocolatey,Chocolatey是一个Windows的包管理器。 我们点击右上角的Install进入到Installing Chocolatey,选择Individual 复制命令 Set-ExecutionPolicy Bypass -Scope Process -Force; [Sys…

springboot餐饮管理系统-计算机毕业设计源码73168

摘要 随着科技的不断进步和互联网时代的深入发展,餐饮行业正面临着一场由传统向智能化、信息化转变的革命。传统的餐饮管理方式,如手工点餐、纸质菜单、人工结算等,已经无法满足现代餐饮企业对于效率、准确性和用户体验的高要求。因此&#x…

【Hot100】LeetCode—31. 下一个排列

目录 题目1- 思路2- 实现⭐31. 下一个排列——题解思路 3- ACM 实现 题目 原题连接:31. 下一个排列 1- 思路 技巧题,分为以下几个步骤 ① 寻找拐点: i 1 :出现 nums[i1] > nums[i] ,则 i 1 就是拐点 从右向左遍…

技术守护尊严||Chat GPT在抵抗性骚扰的作用分析

就在本周,中国人民大学女博士实名举报导师性骚扰的事情,引发全网关注! 性骚扰,无论在线上还是线下,无论在职场还是校园,都是对个人尊严与权益的严重侵犯。 幸运的是,随着人工智能技术的飞速发…

专题九_链表(1)

目录 题型总结 2. 两数相加 解析 题解 24. 两两交换链表中的节点 解析 题解 题型总结 2. 两数相加 2. 两数相加 解析 题解 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr)…

硬件开发笔记(二十九):TPS54331电源设计(二):12V转3.3V和12V转4V原理图设计

若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/140868749 长沙红胖子Qt(长沙创微智科)博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV…

一款功能强大且免费的跨平台图片批量处理工具

XnConvert是一款功能强大且免费的跨平台图片批量处理工具,广泛应用于个人用户、教育机构和非营利组织。它支持超过500种图片格式,包括常见的JPEG、PNG、TIFF、GIF、WebP、PSD、JPEG2000等,并能够导出为大约70种不同的文件格式。 该软件的主要…

【云原生】kubernetes弃用docker之后,containerd何以承载云原生?

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

Mac OS平台,利用 gifify 制作gif教程

一、前言 在很多时候都会用到视频的方式才能直观的表达想表达的东西, 但是视频的文件太大了,所以gif是一个很不错的选择,在网上找了很多免费的都不好用, 最理想的还是直接快捷键唤起,然后选择录制区域,保存…

[CR]厚云填补_GridDehazeNet

GridDehazeNet: Attention-Based Multi-Scale Network for Image Dehazing Abstract 我们提出了一个端到端的可训练卷积神经网络(CNN),命名为GridDehazeNet,用于单幅图像去雾。GridDehazeNet由预处理、主干网络和后处理三个模块组成。与手工选择的预处理…

Go语言---linux下安装golang protoc详细教程以及完整安装protoc-gen-go工具

在[分布式网络通讯框架]----Protobuf安装配置–附带每一步截图中,我们详细介绍了Protobuf是什么,为什么要使用Protobuf,以及在linux环境中,如何安装Protobuf。Protobuf 在 .proto 定义需要处理的结构化数据,可以通过 p…

Surya - OCR、布局分析、阅读顺序、语言检测

文章目录 一、关于 Surya功能特性例子训练托管API商业用途 二、安装手动安装 三、用法1、交互应用2、OCR(文本识别)来自 python编译 3、文本行检测From python 4、布局分析From python 5、阅读顺序From python 四、限制五、故障排除六、基准测试OCRGoogl…

react引入高德地图并初始化卫星地图

react引入高德地图并初始化卫星地图 1.安装依赖 yarn add react-amap amap/amap-jsapi-loader2.初始化地图 import AMapLoader from "amap/amap-jsapi-loader"; import { FC, useEffect, useRef, useState } from "react";const HomeRight () > {con…

高速总线概述(二):高速总线技术要点(比特流高速数据传输,编、解码、CRC校验及扰码结构,链路同步)

前言: 读 嵌入式高速串行总线技术 基于FPGA实现与应用_张峰 记 高速串行总线技术技术点 高速串行总线技术点 (1)采用串行比特流实现高速数据传输,数据以帧格式进行传输,以帧头(SOF)、…

串口调试可能遇见的常见问题和排查方法

串口UART作为嵌入式应用和通讯领域中最常用的接口之一,接口协议虽然简单,但在实际应 用中不同设备之间的通讯也会存在各种小问题,下面对使用中各种常见的问题做下总结和梳 理,可作为调试参考。 01串口通信常见问题 串口通信乱码…

嵌入式多线程

作业一&#xff1a; 使用两个线程完成两个文件的拷贝&#xff0c;分支线程1拷贝前一半&#xff0c;分支线程2拷贝后一半&#xff0c;主线程回收两个分支线程的资源 #include <myhead.h> #define BUF_SIZE 10 //定义缓冲区大小typedef struct{char* sfile;char* tfile…

springboot系列教程(三十一):springboot整合Nacos组件,环境搭建和入门案例详解

一、Nacos基础简介 1、概念简介 Nacos 是构建以“服务”为中心的现代应用架构&#xff0c;如微服务范式、云原生范式等服务基础设施。聚焦于发现、配置和管理微服务。Nacos提供一组简单易用的特性集&#xff0c;帮助开发者快速实现动态服务发现、服务配置、服务元数据及流量管…