当前位置: 首页 > news >正文

uniapp使用eatchs雷达图

引入插件

<template><view class="page"><view class="AllBox"><view class="topTit">标题</view><view class="leftTit">对比分析</view><view class="tableBox"><view class="leftBox"><view class="leftItem" v-for="(im,ii) in leftList" :key="ii">{{im}}</view></view><view class="rightBox"><view class="rightItem" v-for="(item,i) in rightList" :key="i"><view class="rItemTxt">{{item.name1}}</view><view class="rItemTxt">{{item.name2}}</view><view class="rItemTxt">{{item.name3}}</view><view class="rItemTxt">{{item.name4}}</view><view class="rItemTxt">{{item.name5}}</view><view class="rItemTxt">{{item.name6}}</view><view class="rItemTxt">{{item.name7}}</view><view class="rItemTxt">{{item.name8}}</view><view class="rItemTxt">{{item.name9}}</view></view></view></view><view class="leftTit">雷达图</view><view class="echartsBox"><view><l-echart ref="chart" @finished="init"></l-echart></view></view></view><view class="btnBox"><view class="button " @click="addBtn()">+ 添加</view></view></view>
</template><script>import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'export default {components: {},data() {return {// 列表数据rightList: [{name1: '张三',name2: 20,name3: 30,name4: 40,name5: 50,name6: 60,name7: 70,name8: 80,name9: 90,},{name1: '李四',name2: 12,name3: 13,name4: 14,name5: 15,name6: 16,name7: 17,name8: 18,name9: 19,},{name1: '王五',name2: 62,name3: 63,name4: 64,name5: 65,name6: 66,name7: 67,name8: 68,name9: 69,},{name1: '赵六',name2: 52,name3: 53,name4: 54,name5: 55,name6: 56,name7: 57,name8: 58,name9: 59,}],leftList: ['名字', '展示2', '展示3', '展示4', '展示5', '展示6', '展示7', '展示8', '展示9'],colorList: ['#1f77b4', '#9467bd', '#2ca02c', '#ff7f0e', '#1882f8', '#f9d158', '#c378ff', '#11BBEC','#fb3b3b', '#78be86'],}},mounted() {this.$refs.chart.init(echarts, chart => {chart.setOption(this.getOption1());});},methods: {addBtn() {uni.navigateTo({url: '/pages/addAnalysis/addAnalysis'})},async init() {// chart 图表实例不能存在data里const chart = await this.$refs.chart.init(echarts);},//图表配置getOption1() {let catNameS = this.rightList.map((item) => {return item.name1})let dataS = this.dataZHfun(this.rightList)// console.log(catNameS, dataS);// 雷达图var option = {legend: {data: catNameS,top: 0,x: 'center',},radar: {radius: 85, //雷达图大小缩放center: ['50%', '55%'], //位置nameGap: 8, // 图中工艺等字距离图的距离indicator: [{name: '展示2', max: 100,},{name: '展示3', max: 100,},{name: '展示4', max: 100,},{name: '展示5', max: 100,},{name: '展示6', max: 100,},{name: '展示7', max: 100,},{name: '展示8', max: 100,},{name: '展示9', max: 100,}]},series: [{type: 'radar',data: dataS,}]}return option},// 数据转换dataZHfun(list) {let newArr = []list.forEach((item, i) => {const arr = {name:'',value:[], itemStyle:{color:''}}arr.name = item.name1arr.value.push(item.name2)arr.value.push(item.name3)arr.value.push(item.name4)arr.value.push(item.name5)arr.value.push(item.name6)arr.value.push(item.name7)arr.value.push(item.name8)arr.value.push(item.name9)arr.itemStyle.color = this.colorList[i]// console.log('arr',arr);newArr.push(arr)})return newArr},},}
</script><style scoped lang="scss">.page {background-color: #ffffff;width: 100%;height: calc(100vh - 44px);.AllBox {height: calc(100vh - 124px) !important;flex: 1;overflow-y: auto;padding: 0 16px;.topTit {width: 100%;height: 30px;text-align: center;line-height: 30px;font-size: 16px;font-weight: 700;color: #333436;}.leftTit {margin-top: 16px;width: 100%;height: 18px;text-align: left;line-height: 18px;font-size: 16px;color: #2f3338;padding-left: 10px;border-left: 2px solid #1756ef;}.tableBox {width: 100%;height: 298px;margin-top: 12px;border-top: 1px solid #dfdfdf;border-left: 1px solid #dfdfdf;border-right: 1px solid #dfdfdf;display: flex;.leftBox {width: 100px;.leftItem {width: 100%;height: 33px;text-align: center;line-height: 33px;font-size: 13px;color: #333436;background-color: #f9f9fa;border-right: 1px solid #dfdfdf;border-bottom: 1px solid #dfdfdf;}}.rightBox {width: calc(100% - 100px);overflow-x: auto;overflow-y: hidden;display: flex;border-bottom: 1px solid #dfdfdf;.rightItem {flex: 1;min-width: 70px;.rItemTxt {width: 100%;height: 33px;text-align: center;line-height: 33px;font-size: 13px;color: #333436;border-right: 1px solid #dfdfdf;border-bottom: 1px solid #dfdfdf;}.rItemTxt:last-child {border-bottom: none;}}.rightItem:last-child .rItemTxt {border-right: none;}}}}.btnBox {position: fixed;bottom: 0;left: 0;width: 100%;height: 70px;display: flex;justify-content: center;align-items: center;.button {border-radius: 6px;height: 44px;width: calc(100% - 32px);text-align: center;line-height: 44px;background-color: #1756ef;color: #fff;}}}.echartsBox {margin-top: 20px;width: 100%;height: 300px;}
</style>

相关文章:

uniapp使用eatchs雷达图

引入插件 <template><view class"page"><view class"AllBox"><view class"topTit">标题</view><view class"leftTit">对比分析</view><view class"tableBox"><view cl…...

PostgreSQL jsonb

PostgreSQL jsonb jsonb 函数以及操作符 在PostgreSQL中&#xff0c;有许多用于处理JSONB数据类型的内置函数和操作符。下面列出了一些常用的JSONB函数和操作符&#xff1a; jsonb_pretty(jsonb) 该函数将JSONB数据格式化为易读的多行字符串。jsonb_typeof(jsonb) 该函数返回…...

Spring系列四:AOP切面编程

文章目录 &#x1f497;AOP-官方文档&#x1f35d;AOP 讲解&#x1f35d;AOP APIs &#x1f497;动态代理&#x1f35d;初始动态代理&#x1f35d;动态代理深入&#x1f35d;AOP问题提出&#x1f4d7;使用土方法解决&#x1f4d7; 对土方法解耦-开发最简单的AOP类&#x1f4d7;…...

VS+Qt+C++旅游景区地图导航源码实例

程序示例精选 VSQtC旅游景区地图导航 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<VSQtC旅游景区地图导航>>编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。…...

回调函数和一般函数的区别

回调函数&#xff1a;不是我能控制的&#xff0c;通过外界信号触发调用&#xff0c;例如下面是chatter 一般函数&#xff1a;我能控制的&#xff0c;顺序调用...

使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便

Vite官方网站&#xff1a;Vite | 下一代的前端工具链 Vite 并不是基于 Webpack 的&#xff0c;它有自己的开发服务器&#xff0c;利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建&#xff0c;速度也更快…...

从前序与中序遍历序列构造二叉树,从中序与后序遍历序列构造二叉树

目录 从前序与中序遍历序列构造二叉树从中序与后序遍历序列构造二叉树 从前序与中序遍历序列构造二叉树 题目链接 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返…...

【JS常见数据结构】

JS数据结构 前言数组JavaScript 中数组的常见操作&#xff1a;1. 创建数组&#xff1a;2. 访问数组元素&#xff1a;3. 插入元素&#xff1a;4. 删除元素&#xff1a;5. 查询元素&#xff1a; 链表单向链表双向链表循环链表 栈队列树二叉树示例 图图的定义图的分类图的表示方法…...

算法基础之插入排序

1、插入排序基本思想 插入排序的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。插入排序在实现上&#xff0c;通常采用in-place排序&#xff08;即只需用到O(1)的额外空间的排序&#xff09;&a…...

InfoQ 分享

...

Jupyter Notebook 遇上 NebulaGraph,可视化探索图数据库

在之前的《手把手教你用 NebulaGraph AI 全家桶跑图算法》中&#xff0c;除了介绍了 ngai 这个小工具之外&#xff0c;还提到了一件事有了 Jupyter Notebook 插件: https://github.com/wey-gu/ipython-ngql&#xff0c;可以更便捷地操作 NebulaGraph。 本文就手把手教你咋在 J…...

人类与机器的分类不同

分类能力也是智能的重要标识之一。通过分类&#xff0c;我们可以将事物或概念进行归类和组织&#xff0c;从而更好地理解和处理信息。分类在人类认知和智能发展中起到了重要的作用&#xff0c;它有助于我们对世界进行认知、记忆、推理和决策。在机器智能领域&#xff0c;分类同…...

WEB安全-SQL注入,CSRF跨站伪造,OXX跨站脚本

SQL 注入攻击 SQL 注入是一种网络攻击手段&#xff0c;攻击者通过在 Web 应用程序的输入字段中插入恶意 SQL 代码&#xff0c;试图访问、篡改或删除数据库中的数据。这种攻击通常发生在应用程序未对用户输入进行充分验证或过滤的情况下。 举个例子&#xff0c;例如&#xff0c;…...

【HDFS】客户端读某个块时,如何对块的各个副本进行网络距离排序?

本文包含如下内容: ① 通过图解+源码分析/A1/B1/node1和 /A1/B2/node2 这两个节点的网络距离怎么算出来的 ② 客户端读文件时,副本的优先级。(怎么排序的,排序规则都有哪些?) ③ 我们集群发现的一个问题。 客户端读时,通过调用getBlockLocations RPC 获取文件的各个块。…...

【数字化处理】仿生假体控制中肌电信号的数字化处理研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

谷歌推出Flax:JAX的神经网络库

在优化理论中&#xff0c;损失或成本函数测量拟合或预测值与实际值之间的距离。对于大多数机器学习模型&#xff0c;提高性能意味着最小化损失函数。 但对于深度神经网络&#xff0c;执行梯度下降以最小化每个参数的损失函数可能会消耗大量资源。传统方法包括手动推导和编码&a…...

PDF换行的难度,谁能解决?

换行的时候确认不了长度&#xff1a; import java.awt.*;public class Test {public static void main(String[] args) {String str1 "淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘淘";String str2 "AAAAAAAAAAAAAAAAAAAAAAAAA…...

山东布谷科技直播程序源码使用Redis进行服务器横向扩展

当今&#xff0c;直播程序源码平台作为新媒体时代主流&#xff0c;受到了世界各地人民的喜爱&#xff0c;这也使得直播程序源码平台用户数量的庞大&#xff0c;也难免会出现大量用户同时访问服务器&#xff0c;使服务器过载的情况&#xff0c;当服务器承受不住的时候&#xff0…...

symfony3.4中根据角色不同跳转不同页面

在Symfony 3.4中&#xff0c;可以使用安全组件来实现控制不同角色跳转到不同页面的功能。 首先&#xff0c;确保你已经安装了Symfony的安全组件&#xff0c;并配置了安全相关的配置文件。这些文件通常是 security.yml 和 security.yml。 在配置文件中&#xff0c;你可以定义不…...

Dockerfile部署golang,docker-compose

使用go镜像打包&#xff0c;运行在容器内 redis和mysql用外部的 项目目录结构 w1go项目&#xff1a; Dockerfile # 这种方式是docker项目加上 本地的mysql和redis环境 # go打包的容器 FROM golang:alpine AS builder# 为我们镜像设置一些必要的环境变量 ENV GO111MODULEon …...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

Linux 内存管理调试分析:ftrace、perf、crash 的系统化使用

Linux 内存管理调试分析&#xff1a;ftrace、perf、crash 的系统化使用 Linux 内核内存管理是构成整个内核性能和系统稳定性的基础&#xff0c;但这一子系统结构复杂&#xff0c;常常有设置失败、性能展示不良、OOM 杀进程等问题。要分析这些问题&#xff0c;需要一套工具化、…...