vue Echarts饼图指定颜色与数据对应

news2024/11/24 0:08:02

在这里插入图片描述
需求:一般自定义颜色是按照数据的顺序依次对应,现在想要指定字段对应某个颜色

因为是直接在返回数据中做操作,所以直接写这部分的代码

数据格式

 cdata: {
        xData: ["水文", "森林", "气象", "地质",  "其他"],
        seriesData: [
          { value: 35, name: "水文" ,itemStyle: {color:"#9fe6b8"}},//需要添加color字段
          { value: 15, name: "森林" },//原来的数据格式
          { value: 15, name: "气象" },
          { value: 25, name: "地质" },
          { value: 40, name: "其他" }
        ]
      },

添加字段指定颜色

coloritem:{
        "森林":"#9fe6b8",
        "气象":"#0099ff",
        "水文":"#32c5e9",
        "地质":"#e7bcf3",
        "其他":"#fb7293"
      }

在方法中

 methods: {
    getBar(){
      this.$axios.post('******').then((res)=>{
        let items=res.data //接收到的数据
        this.cdata.seriesData=this.getData(items) //变成想要的数据格式方法
        console.log(this.cdata.seriesData)
      })
    },
    getData(data) {
      let that=this
      return data.map(function (item) {
        return {
          value: item.value,
          name: item.name,
          itemStyle: {
            color: that.coloritem[item.name] // 使用颜色映射表中对应的颜色
          }
       };
     });
    }
 }

然后再把数据传入饼图中,入最上面的图所示,即使数据顺序不同颜色也能对应上了

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

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

相关文章

学习笔记|外部中断|INT0|中断列表|STC32G单片机视频开发教程(冲哥)|第十五集:中断系统和外部中断

文章目录 1.中断和中断系统1.1什么是中断?1.2什么是中断系统1.3中断系统的优点1.4 中断系统包含哪些中断源1.5.中断次序 2.什么是外部中断3.外部中断的用法4.外部中断的用法完整代码 总结课后练习: 上节课我们学完了GPIO的矩阵按键,已经把这个GPIO的一个外设全都已…

最小二乘法的实现与线性回归的应用

1. 简介 简单线性回归中,您有一个因变量y和一个自变量X。该模型可以表示为: y m x b ymxb ymxb 其中 x x x: 自变量 y y y: 因变量 m m m: 斜率 b b b: 截距 最小二乘法是回归分析中用于估计线性回归模型参数的标准方法。它可以最小化误差的平方和&…

SpringBoot课堂笔记20230913

本篇文章为SpringBoot学习笔记,方便自己再复习。 Maven:jar包管理工具 注解: Controller:处理http请求,返回的视图 RestController: 相当于ResponseBody和Controller一起用,返回的是json ResponseBody:返回响应内容 …

客户关系管理的定义及三种常见的CRM系统

CRM旨在加强企业与客户的关系,建立以客户为中心的经营策略。随着技术的迅速发展,CRM的实施变得更加普遍,不仅能帮助企业与客户建立紧密联系,还能实现客户细分开展个性化的营销活动。客户关系管理是什么,CRM怎么分&…

【MySQL】数据库的操作

目录 前言 创建数据库 编码集和校验集 不同校验集的区别 删除数据库 确认当前数据库 查看数据库属性 修改数据库属性 备份与还原 数据库和表的备份 还原 创建表 查看列结构 查看表属性 修改表的列 修改表名称 修改列名称 删除表 前言 在上一篇文章中&#…

什么是生成对抗网络 (GAN)?

什么是生成对抗网络 (GAN)? 钦吉兹赛义德贝利 一、说明 GAN(Generative Adversarial Network)网络是一种深度学习模型,由两个神经网络——生成器和判别器组成。生成器负责生成虚假的数据,而判别…

Spring Boot 下载文件(word/excel等)文件名中文乱码问题|构建打包不存在模版文件(templates等)

Spring Boot 下载文件(word/excel等)文件名中文乱码问题|构建打包不存在模版文件(templates等) 准备文件,这里我放在resource下的templates路径 在pom中配置构建打包的资源,更新maven 如果使用了assembly打包插件这样配置可能仍不生效&#…

Windows+Pycharm 如何创建虚拟环境

当我们开发一个别人的项目的时候,因为项目里有很多特有的包,比如 Pyqt5.我们不想破坏电脑上原来的包版本,这个时候,新建一个虚拟环境,专门针对这个项目就很有必要了. 简略步骤: 1.新建虚拟环境 1.打开 pycharm 终端(Terminal)安装虚拟环境工具: pip install virtualenv2.创…

基于FPGA的图像指数对比度增强算法实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1图像指数对比度增强概述 4.2基于FPGA的图像指数对比度增强 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 Vivado2019.2 matlab2022a 3.部分核心程序 timescale 1ns…

Redis——渐进式遍历和数据库管理命令

介绍 如果使用keys * 这样的操作,将Redis中所有的key都获取到,由于Redis是单线程工作,这个操作本身又要消耗很多时间,那么就会导致Redis服务器阻塞,后续的操作无法正常执行 而渐进式遍历,通过多次执行遍历…

虹科展会丨9月19号工博会启航:虹科五大团队携20+产品,双展台+两场演讲等您来!

2023年9月19-23日,第23届中国国际工业博览会即将在上海国家会展中心拉开帷幕。本届工博会以“碳循新工业、数聚新经济”为主题,展览面积30万平方米,吸引了来自全球27个国家和地区超2600家企业参展,共设置九大专业展区,…

电子游戏冷知识

电子游戏一直在试图用技术还原一个真实或虚幻的世界,并在其中演绎和倾诉人类种种的情感和欲望。 对信息技术发展的贡献 游戏推动了芯片、网络、VR/AR等领域的技术进步和创新。根据中科院的研究报告,游戏技术对芯片产业的科技进步贡献率是14.9%&#xff…

清华大学LightGrad-TTS,且流式实现

论文链接: https://arxiv.org/abs/2308.16569 代码地址: https://github.com/thuhcsi/LightGrad 数据支持: 针对BZNSYP和LJSpeech提供训练脚本 针对Grad-TTS提出两个问题: DPMs are not lightweight enough for resource-con…

真空腔体的设计要点

真空腔体是保持内部为真空状态的容器,真空腔体设计制作要考虑容积、材质和形状。 1、根据应用需求选择腔体形状。几种代表性的真空腔体包括垂直真空腔体、水平真空腔体、立方真空腔体和球形真空腔体。 2、根据获得真空度选择腔体材质。钛用于极高真空;…

轻松学习 Spring 事务

文章目录 一. Spring事务简介二. Spring事务使用1. 编程式事务2. 声明式事务 三. Transactional的使用1. 参数作用2. 事务失效的场景3. Transactional工作原理 四. Spring 事务的隔离级别五. Spring事务传播机制 一. Spring事务简介 在之前的博客已经介绍了在 Spring 环境中整…

《向量数据库指南》——Milvus Cloud是如何从 0 到 1 做一款向量数据库的?经过了哪些升级和迭代?

这实际上是一个颇具曲折性和难得性的故事。由于我自己是在公司中间加入的,从 2.0 版本开始参与了 Milvus 的构建,而我们公司在向量数据库领域已经有大约 5 年的历史了。 最初,我们看到了这个机会,并意识到有诸如 Faiss 等引擎在处…

文件属性操作函数

1.access函数 #include <unistd.h> int access(const char *pathname, int mode); 作用&#xff1a;判断某个文件是否有某个权限&#xff0c;或者判断文件是否存在 参数: -pathname:判断的文件路径 -mode: R_OK&#xff1a;判断是否有读权限 W_OK X_OK F_OK&#xff1a;…

vue实现鼠标拖拽div左右移动的功能

直接代码&#xff1a; <template><div class"demo"><div class"third-part" id"发展历程"><div class"title">发展历程</div><div class"content" id"nav" v-if"dataList…

马斯克回应盖茨;谷歌反垄断案开庭;苹果发布 3nm 芯片的 iPhone 15丨RTE开发者日报 Vol.48

开发者朋友们大家好&#xff1a; 这里是「RTE 开发者日报」&#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「…

液压切管机配套用液压泵站比例阀放大器

液压切管机配套用液压泵站是液压系统的动力源&#xff0c;可按机械设备工况需要提供一定压力、流量和清洁度的工作介质。它由泵组、油箱组件、控温组件、滤油器组件及蓄能器组件等组合而成&#xff0c;液压泵站主要服务于大型管道工程。