uniapp基于u-grid-item九宫格实现uCharts秋云图表展示

news2025/9/17 6:44:14

uniapp基于uView的UI组件u-grid-item九宫格实现uCharts秋云可视化图表展示

这里使用uView的u-grid-item九宫格组件去显示图标排列

在这里插入图片描述

九宫格可以做成多列，移动设备上可以通过左右滑动进行展示

在这里插入图片描述

<template>
	<div>
		<div style="text-align: center;font-size: 20px;padding: 40px 0px;">可视化图表</div>
		<swiper class="swiper">
			<swiper-item>
				<u-grid :col="3" @click="toEchartsInfo()" hover-class="hover-class">
					<u-grid-item v-for="(item, index) in listIcon" :index="index" :key="index">
						<img :src="item.img" class="iconImg"></img>
						<text class="grid-text">{{item.name}}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
			<swiper-item>
				<u-grid :col="3" @click="toEchartsItem()">
					<u-grid-item v-for="(item, index) in listList" :index="index" :key="index">
						<img :src="item.img"  class="iconImg"></img>
						<text class="grid-text">{{item.name}}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
		</swiper>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				listIcon: [
					{name:'进度条',img:'../../static/echartsicon/arcbar.jpeg'},
					{name:'区域图',img:'../../static/echartsicon/area.jpeg'},
					{name:'条状图',img:'../../static/echartsicon/bar.jpeg'},
					{name:'气泡图',img:'../../static/echartsicon/bubble.jpeg'},
					{name:'K线图',img:'../../static/echartsicon/candle.jpeg'},
					{name:'柱状图',img:'../../static/echartsicon/column.jpeg'},
					{name:'漏斗图',img:'../../static/echartsicon/funnel.jpeg'},
					{name:'仪表盘',img:'../../static/echartsicon/gauge.jpeg'},
					{name:'折线图',img:'../../static/echartsicon/line.jpeg'},
				],
				listList: [
					{name:'地图',img:'../../static/echartsicon/map.jpeg'},
				    {name:'混合图',img:'../../static/echartsicon/mix.jpeg'},
				    {name:'山峰图',img:'../../static/echartsicon/mount.jpeg'},
					{name:'饼状图',img:'../../static/echartsicon/pie.jpeg'},
					{name:'雷达图',img:'../../static/echartsicon/radar.jpeg'},
					{name:'圆环图',img:'../../static/echartsicon/ring.jpeg'},
					{name:'玫瑰图',img:'../../static/echartsicon/rose.jpeg'},
					{name:'散点图',img:'../../static/echartsicon/scatter.jpeg'},
					{name:'云词图',img:'../../static/echartsicon/word.jpeg'},
				],
			};
		},
		methods: {
			toEchartsInfo(index){
				if(index==0){
					this.$u.route('/pages/echartsShow/echartsArcbar')
				}else if(index==1){
					this.$u.route('/pages/echartsShow/echartsArea')
				}else if(index==2){
					this.$u.route('/pages/echartsShow/echartsBar')
				}else if(index==3){
					this.$u.route('/pages/echartsShow/echartsBubble')
				}else if(index==4){
					this.$u.route('/pages/echartsShow/echartsCandle')
				}else if(index==5){
					this.$u.route('/pages/echartsShow/echartsColumn')
				}else if(index==6){
					this.$u.route('/pages/echartsShow/echartsFunnel')
				}else if(index==7){
					this.$u.route('/pages/echartsShow/echartsGauge')
				}else if(index==8){
					this.$u.route('/pages/echartsShow/echartsLine')
				}
			},
			toEchartsItem(index){
				if(index==0){
					this.$u.route('/pages/echartsShow/echartsMap')
				}else if(index==1){
					this.$u.route('/pages/echartsShow/echartsMix')
				}else if(index==2){
					this.$u.route('/pages/echartsShow/echartsMount')
				}else if(index==3){
					this.$u.route('/pages/echartsShow/echartsPie')
				}else if(index==4){
					this.$u.route('/pages/echartsShow/echartsRadar')
				}else if(index==5){
					this.$u.route('/pages/echartsShow/echartsRing')
				}else if(index==6){
					this.$u.route('/pages/echartsShow/echartsRose')
				}else if(index==7){
					this.$u.route('/pages/echartsShow/echartsScatter')
				}else if(index==8){
					this.$u.route('/pages/echartsShow/echartsWord')
				}
			}
		}
	};
</script>

<style>
	/* 下方这些scss变量为uView内置变量，详见开发  组件-指南-内置样式 */

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
	
	.swiper {
		height: 100vh;
	}
	
	.indicator-dots {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.indicator-dots-item {
		background-color: $u-tips-color;
		height: 6px;
		width: 6px;
		border-radius: 10px;
		margin: 0 3px;
	}
	
	.indicator-dots-active {
		background-color: $u-type-primary;
	}
	.iconImg{
		width: 90px;
		height: 80px;
	}
</style>

进度条详情展示

在这里插入图片描述

这里需要注意一下uCharts的组件使用，需要先安装组件插件或者自己去插件社区下载一个插件包，然后放到这个目录下就可以使用了，在页面里面使用标签通过设置type属性值区分图表类别，opts设置图表基本设置属性，chartData设置图表数据。

在这里插入图片描述

<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="arcbar"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: undefined,
        title: {
          name: "指标",
          fontSize: 35,
          color: "#1890ff"
        },
        subtitle: {
          name: "默认标题",
          fontSize: 15,
          color: "#666666"
        },
        extra: {
          arcbar: {
            type: "circle",
            width: 12,
            backgroundColor: "#E9E9E9",
            startAngle: 1.5,
            endAngle: 0.25,
            gap: 2
          }
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            series: [
              {
                name: "一班",
                data: 0.8
              },
              {
                name: "二班",
                data: 0.6
              },
              {
                name: "三班",
                data: 0.45
              },
              {
                name: "四班",
                data: 0.3
              },
              {
                name: "五班",
                data: 0.15
              }
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
	margin-top: 25%;
    width: 100%;
    height: 300px;
  }
</style>

柱状图详情展示

在这里插入图片描述

<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="bar"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,30,0,5],
        enableScroll: false,
        legend: {},
        xAxis: {
          boundaryGap: "justify",
          disableGrid: false,
          min: 0,
          axisLine: false,
          max: 40
        },
        yAxis: {},
        extra: {
          bar: {
            type: "group",
            width: 30,
            meterBorde: 1,
            meterFillColor: "#FFFFFF",
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            linearType: "custom",
            barBorderCircle: true,
            seriesGap: 2,
            categoryGap: 2
          }
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2018","2019","2020","2021","2022","2023"],
            series: [
              {
                name: "目标值",
                data: [35,36,31,33,13,34]
              },
              {
                name: "完成量",
                data: [18,27,21,24,6,28]
              }
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
	margin-top: 25%;
    width: 100%;
    height: 300px;
  }
</style>

下面就是选取几种图形展示详情效果就不一一介绍代码了，详细的用法大家可以去秋云uCharts官网https://www.ucharts.cn/v2/#/demo/index

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

msvcp110.dll文件丢失修复教程

msvcp110.dll文件丢失修复教程

本文将详细介绍找不到msvcp110.dll的五个解决方法&#xff0c;并解释msvcp110.dll丢失的原因和其对电脑的作用。 首先&#xff0c;让我们来了解一下msvcp110.dll丢失的原因。msvcp110.dll是Microsoft Visual C 2012 Redistributable Package的一部分&#xff0c;它是用于支持C…
阅读更多...
1.qml-3D入门讲解介绍

1.qml-3D入门讲解介绍

本章我们来学习QML 3D教程&#xff0c;QML 3D能够支持windows linux等多平台跨平台并且显示效果大部分一致&#xff0c;非常方便&#xff0c;学习的qt版本最低为qt6.5。 要使用qml 3D类&#xff0c;需要导入QtQuick3D模块。 这是使用空间渲染器和场景图的 QML 前端。目前&…
阅读更多...
在Linux上优化HTTP服务器的性能

在Linux上优化HTTP服务器的性能

在Linux上优化HTTP服务器的性能是一个涉及多个方面的任务&#xff0c;包括服务器硬件、网络设置、软件配置和内容优化。以下是一些关键的优化建议&#xff1a; 选择合适的HTTP服务器软件 Linux上有多种HTTP服务器软件&#xff0c;如Apache、Nginx、Lighttpd等。选择适合您需求…
阅读更多...
做外贸会遇到的一些误区

做外贸会遇到的一些误区

很多时候&#xff0c;我们喜欢用大多数的情况去给客户提前下某种定义&#xff0c;当我们内心已经种下某种想法的时候&#xff0c;我们在对待事情的时候就会明显的不同。 但是事实上&#xff0c;其实每一个客户都是一个独特的存在&#xff0c;都是一个新的客户&#xff0c; 新的…
阅读更多...
npm私有源构建项目下载依赖报错

npm私有源构建项目下载依赖报错

Jenkins构建项目报错&#xff0c;依赖找不到 Error: Couldnt find any versions for "babel/helper-module-imports" that matches "^7.22.15"at MessageError.ExtendableBuiltin (/data1/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/…
阅读更多...
关于清理系统错误内存转储文件的相关知识，看这篇文章就够了

关于清理系统错误内存转储文件的相关知识，看这篇文章就够了

当你的电脑崩溃，遇到类似蓝屏死机（BSOD）的情况时，Windows操作系统会将内存转储到硬盘上的某个位置。你可以删除这些系统错误内存转储文件以释放磁盘空间。 如何使用磁盘清理删除系统错误内存转储文件 如果内存转储文件随着时间的推移而增长，请删除该文件以恢复硬盘空间。…
阅读更多...
文件下载保存接口的创建_FastAPI

文件下载保存接口的创建_FastAPI

文件下载保存接口的创建 功能描述实现代码功能演示 功能描述 在网页上对数据进行下载保存处理。例如点击网页上的保存按钮&#xff0c;会把文件下载到本地。下面就是对下载保存功能的实现。 实现代码 gpt_router.get("/export_data") async def export_data():# 需…
阅读更多...
感觉到自己思想扭曲了

感觉到自己思想扭曲了

突然觉得自己思想有点扭曲。 ​起因是近期备婚&#xff0c;需要给男方家人买衣服。问男朋友妹妹衣服预算多少&#xff0c;说是500内&#xff0c;然后想想自己这个新娘子&#xff0c;那一身衣服绞尽脑汁凑满减不到300。再联想到装饰新房&#xff0c;新房买家具&#xff0c;为了省…
阅读更多...
【性能测试】LR录制回放事务检查点

【性能测试】LR录制回放事务检查点

前言 上一次推文我们分享了性能测试分类和应用领域&#xff0c;今天带大家学习性能测试工作原理、事务、检查点&#xff01;后续文章都会系统分享干货&#xff0c;带大家从0到1学会性能测试&#xff0c;另外还有教程等同步资料&#xff0c;文末免费获取~ 01、LR工作原理 ​通…
阅读更多...
CentOS或RHEL安装code-server(vscode-web)

CentOS或RHEL安装code-server(vscode-web)

下载rpm安装包 网络下载或者下载到本地再上传到服务器&#xff0c;点击访问国内下载地址&#xff0c;不需要积分curl -fOL https://github.com/coder/code-server/releases/download/v4.19.1/code-server-4.19.1-amd64.rpm安装 rpm -i code-server-4.19.1-amd64.rpm关闭和禁用…
阅读更多...
配电房一体化环境监控系统

配电房一体化环境监控系统

配电房一体化环境监控系统是一种综合运用多种传感器、物联网、云计算、大数据等技术的智能化监控系统&#xff0c;依托电易云-智慧电力物联网&#xff0c;实现对配电房内环境、设备运行状态等信息的实时监测和预警&#xff0c;提高配电房的安全性和可靠性。以下是配电房一体化环…
阅读更多...
C //例10.1 从键盘输入一些字符，逐个把它们送到磁盘上去，直到用户输入一个“#”为止。

C //例10.1 从键盘输入一些字符，逐个把它们送到磁盘上去，直到用户输入一个“#”为止。

C程序设计 &#xff08;第四版&#xff09; 谭浩强 例10.1 例10.1 从键盘输入一些字符&#xff0c;逐个把它们送到磁盘上去&#xff0c;直到用户输入一个“#”为止。 IDE工具&#xff1a;VS2010 Note: 使用不同的IDE工具可能有部分差异。 代码块 方法&#xff1a;使用指针&…
阅读更多...
CUDA简介, 配置和运行第一个CUDA程序（Windows和Linux）

CUDA简介, 配置和运行第一个CUDA程序（Windows和Linux）

CUDA简介 CUDA&#xff08;Compute Unified Device Architecture&#xff09;是由NVIDIA开发的一种通用并行计算架构。CUDA允许程序员利用NVIDIA GPU的并行计算能力&#xff0c;加速各种计算密集型应用程序。 CUDA技术基于GPU的并行计算原理。传统的CPU处理器拥有少量的核心&…
阅读更多...
Zabbix自定义监控内容

Zabbix自定义监控内容

自定义监控客户端服务器登录的人数 需求&#xff1a;限制登录人数不超过 3 个&#xff0c;超过 3 个就发出报警信息 1.在客户端创建自定义key //明确需要执行的 linux 命令 who | wc -l//创建 zabbix 的监控项配置文件&#xff0c;用于自定义 key vim /etc/zabbix/zabbix_ag…
阅读更多...
零基础入坑Python爬虫的全面学习指南

零基础入坑Python爬虫的全面学习指南

文章目录 首先爬虫是什么&#xff1f;1. Python学习2.Python urllib和urllib2 库的用法3.Python 正则表达式4.爬虫框架Scrapy爬虫基本原理关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工…
阅读更多...
Shopee买家通系统自动下单更方便

Shopee买家通系统自动下单更方便

Shopee购物平台的买家通系统为用户提供了一种便捷的自动下单方式&#xff0c;通过这一系统&#xff0c;用户可以轻松实现在虾皮平台购买商品的自动化操作。下面将介绍具体的操作流程&#xff0c;确保用户可以顺利完成整个购物流程。 首先&#xff0c;用户需要准备一个可用的虾皮…
阅读更多...
（2/2）敏捷实践指南 Agile Practice Guide （[美] Project Management institute 著）

（2/2）敏捷实践指南 Agile Practice Guide （[美] Project Management institute 著）

附录 A1 - 《PMBOK指南》映射 表A1显示了第六版《PMBOK指南》中定义的项目管理过程组与知识领域之间的对应关系 本附录说明了如何利用混合和敏捷方法处理《PMBOK指南》知识领域&#xff08;请参见表A1-2&#xff09;中所述的属性&#xff0c;其中涵盖了相同和不同的属性&…
阅读更多...
Apollo新版本Beta技术沙龙参会感受：未来的自动驾驶之旅

Apollo新版本Beta技术沙龙参会感受：未来的自动驾驶之旅

Apollo新版本Beta技术沙龙参会感受&#xff1a;未来的自动驾驶之旅 &#x1f697;&#x1f4a1; 文章目录 Apollo新版本Beta技术沙龙参会感受&#xff1a;未来的自动驾驶之旅 &#x1f697;&#x1f4a1;摘要引言正文&#x1f4cd; 参会流程介绍&#x1f31f; 参会收获&#x1…
阅读更多...
力扣 790. 多米诺和托米诺平铺（一维dp）

力扣 790. 多米诺和托米诺平铺（一维dp）

题目描述&#xff1a; 有两种形状的瓷砖&#xff1a;一种是 2 x 1 的多米诺形&#xff0c;另一种是形如 "L" 的托米诺形。两种形状都可以旋转。 给定整数 n &#xff0c;返回可以平铺 2 x n 的面板的方法的数量。返回对 109 7 取模 的值。 平铺指的是每个正方形都…
阅读更多...
并行流（Parallel Streams）

并行流（Parallel Streams）

并行流&#xff08;Parallel Streams&#xff09;是Java 8引入的一种并行处理集合数据的机制&#xff0c;它允许将操作并行化以提高处理速度。然而&#xff0c;并行流可能存在一些安全问题&#xff0c;特别是在多线程环境下。 以下是一些与并行流相关的安全问题&#xff1a; 共…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023