Avue-data数据大屏显示饼图(附Demo)

目录

  • 前言
  • [1. Sql查询](#1. Sql查询)
  • [2. 颜色细节](#2. 颜色细节)

前言

对于这部分知识,原先有过柱状图实战:Avue-data数据大屏显示柱状图(附Demo讲解)

以下直奔主题,以Sql数据库数据为主

1. Sql查询

以饼图为例,需要返回的形式如下:

sql 复制代码
[
    {
        "name": "周口",
        "value": 55
    },
    {
        "name": "南阳",
        "value": 120
    },
    {
        "name": "西峡",
        "value": 78
    },
    {
        "name": "驻马店",
        "value": 66
    }
]

对应响应的数据需要接收name以及value

对应查询出来的数据如下:

饼图多数以单值的形式进行存储

对应需要配置成我们需要返回的响应数据

其过滤器规则如下:(根据自身的规则去除不需要的字段值)

js 复制代码
(data) => {
   const { ID, GDate, etltime, ...rest } = data[0]; // 解构去除不需要的字段
   return Object.entries(rest).map(([name, value]) => ({
       name,
       value
   }));
};

截图如下:

最终的成效图如下:(按照设定的时间进行动态跳转)

2. 颜色细节

对于更改颜色等细节变化

不可直接在过滤器中修改,无法生效

下述Demo错误:

javascript 复制代码
(data) => {
    const colorMap = {
        "A": "red",
        "B": "green",
        "C": "blue",
        "D": "orange",
        "E": "purple",
        "F": "cyan",
        "G": "magenta"
    };

    // 解构去除不需要的字段
    const { ID, GDate, etltime, ...rest } = data[0]; 

    // 创建数据项数组
    const formattedData = Object.entries(rest).map(([name, value]) => ({
        name,
        value
    }));

    // 创建颜色数组
    const colors = Object.keys(rest).map(name => colorMap[name] || "defaultColor");

    return {
        data: formattedData,
        color: colors,
        unit: '单位'
    };
};

此处的过滤器只有data数值,不应该返回任何颜色的属性

保持原先代码:

javascript 复制代码
(data) => {
   const { ID, GDate, etltime, ...rest } = data[0]; // 解构去除不需要的字段
   return Object.entries(rest).map(([name, value]) => ({
       name,
       value
   }));
};

修改颜色的配置位于此处:

对应的颜色配置如下:

javascript 复制代码
(data)=>{
  return {
    config:{
      radius: '40%',
      activeRadius: '45%',
      data: data,
      color : [
        '#e062ae', // 粉红色
        '#fb7293', // 玫瑰红
        '#e690d1', // 浅粉色
        '#32c5e9', // 天蓝色
        '#96bfff', // 浅蓝色
        '#9e62ae', // 紫红色
        '#7f62ae'  // 紫色
      ],
      digitalFlopStyle: {
        fontSize: 20
      },
      showOriginValue: true
    }
  }
}

结果如下:

相关推荐
悟能不能悟2 小时前
redis的红锁
数据库·redis·缓存
安当加密4 小时前
MySQL数据库透明加密(TDE)解决方案:基于国密SM4的合规与性能优化实践
数据库·mysql·性能优化
JH30735 小时前
第七篇:Buffer Pool 与 InnoDB 其他组件的协作
java·数据库·mysql·oracle
板凳坐着晒太阳5 小时前
ClickHouse 配置优化与问题解决
数据库·clickhouse
数据库生产实战5 小时前
解析Oracle 19C中并行INSERT SELECT的工作原理
数据库·oracle
AAA修煤气灶刘哥6 小时前
服务器指标多到“洪水泛滥”?试试InfluxDB?
数据库·后端·面试
阿沁QWQ7 小时前
MySQL服务器配置与管理
服务器·数据库·mysql
程序新视界8 小时前
MySQL“索引失效”的隐形杀手:隐式类型转换,你了解多少?
数据库·mysql·dba
Logintern098 小时前
windows如何设置mongodb的副本集
数据库·windows·mongodb
RestCloud10 小时前
在制造业数字化转型浪潮中,数据已成为核心生产要素。然而,系统割裂、数据滞后、开发运维成本高等问题,却像顽固的 “数据枷锁”,阻碍着企业发展。ETLCloud与
数据库·postgresql