vue+echarts实现雷达图及刻度标注

文章目录

  • 前言
  • 代码实现
  • 实现效果
  • 总结


前言

最近项目有做数据可视化 大屏 不免再次使用些echarts应用 记录下其中echarts雷达图的实现


代码实现

先上代码

<template><div class="container"><div ref="chart" style="width: 500px; height: 500px; margin-top: 20px"></div></div>
</template><script>
export default {name: 'testDemo',data() {return {};},methods: {initChart() {this.chart = this.$echarts.init(this.$refs.chart);const option = {color: ['#FFC481', '#8EC6F8', '#56D8CD'],title: {x: 'center',y: 'center',textStyle: {fontSize: 12,rich: {a: {color: '#0066FF',fontSize: 18,align: 'center',},b: {color: '#00BBFF',fontSize: 12,height: 16,align: 'centerc',},c: {color: 'orange',fontSize: 12,height: 16,align: 'center',},},},},// 配置图例legend: {},radar: {indicator: [{name: '资本背景', max: 100, min: 0, index: 0, axisLabel: {show: true}}, //显示刻度{name: '知识产权', max: 100, min: 0, index: 1},{name: '成长性', max: 100, min: 0, index: 2},{name: '风险状况', max: 100, min: 0, index: 3},{name: '经营质量', max: 100, min: 0, index: 4},{name: '企业规模', max: 100, min: 0, index: 5},],radius: 80, //大小startAngle: 120, // 雷达图的旋转偏移量splitNumber: 5, // 分层5层,当前最大1000,可理解为每层200triggerEvent: true,name: {formatter: (value, indicator) => {// 获取对应的数值const valueAtIndex = this.radarData[indicator.index];return `{a|${value}}: {b|${valueAtIndex}}`; // 显示名称和对应的数值},rich: {a: {color: '#333',fontSize: 12,},b: {color: '#333',fontSize: 12,},},},},textStyle: {color: '#333333',},series: [{type: 'radar',areaStyle: {normal: {//添加阴影效果的配置部分color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(255, 196, 129, 0.8)'},{offset: 1, color: 'rgba(255, 196, 129, 0.3)'},]),opacity: 0.8,},},data: [{value: [34,23,34,87,68,67],},],},],};this.chart.setOption(option);}},mounted() {// 等dom渲染后再初始化图表this.initChart()}
};
</script><style scoped>
</style>

实现效果

在这里插入图片描述


总结

initChart方法中,使用this.$echarts.init来初始化一个ECharts实例,并设置图表的配置项option。这些配置项定义了图表的标题、提示框、雷达图的指标、名称的富文本样式、全局文本样式以及系列列表等。最后,通过this.chart.setOption(option)将配置项应用到图表实例上

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

树莓派应用--AI项目实战篇来啦-11.OpenCV定位物体的实时位置

1. 介绍 本项目通过PCA9685舵机控制模块控制二自由度舵机云台固定在零点位置&#xff0c;然后通OpenCV检测到黄色小熊&#xff0c;找到中心位置并打印出中心位置的坐标&#xff0c;通过双色LED灯进行指示是否检测到目标&#xff0c;本项目为后面二维云台追踪物体和追踪人脸提供…

grpc的python使用

RPC 什么是 RPC &#xff1f; RPC&#xff08;Remote Procedure Call&#xff09;远程过程调用&#xff0c;是一种计算机通信协议&#xff0c;允许一个程序&#xff08;客户端&#xff09;通过网络向另一个程序&#xff08;服务器&#xff09;请求服务&#xff0c;而无需了解…

Cef加载自定义本地资源

在Cef auto build下载cefCEF Automated Builds 我下载的是104&#xff0c;使用cefsimple工程。 例如&#xff1a;前端资源如下 通过http协议把前端资源加载出来。所有的资源都通过http://local.test.cn/xxx加载。 前端资源包括index.html、test.css、test.js index.html&am…

福州少儿自闭症寄宿制学校:专注关爱每个孩子

在福州&#xff0c;少儿自闭症寄宿制学校以其专注与关爱&#xff0c;为自闭症儿童提供了一个温暖的避风港。这些学校不仅提供教育服务&#xff0c;更是一个充满爱与包容的大家庭&#xff0c;让孩子们在这里找到归属感和自信心。然而&#xff0c;当我们把目光投向广州&#xff0…

《鸟哥的Linux私房菜基础篇》---1 Linux的介绍与如何开启Linux之路

目录 一、Linux的简单介绍 1、Linux的简介 2、Linux的起源与发展 3、主要特点 4、应用场景 二、开启Linux之路 1、学习Linux的相关知识 2、正规表示法、管线命令、数据流重导向 前言 整体大纲预览 一、Linux的简单介绍 1、Linux的简介 &#xff08;1&#xff09;Linu…

[棋牌源码] 2023情怀棋牌全套源代码含多套大厅UI及600+子游源码下载

降维打击带来的优势 这种架构不仅极大提升了运营效率&#xff0c;还降低了多端维护的复杂性和成本。运营商无需投入大量资源维护多套代码&#xff0c;即可实现产品的全终端覆盖和快速更新&#xff0c;这就是产品层面的降维打击。 丰富的游戏内容与多样化大厅风格 类型&#…

VS2017 编译 SQLite3 动态库

首先官方下载源码: Tags sqlite/sqlite (github.com) 1.安装 VS2017 community edition 2.打开VS2017命令行工具 3.安装TCL 开发库,推荐 TCL 9.0 先下载源码: Tcl/Tk 9.0 使用vs2017编译tcl&

图书馆自习室座位预约管理微信小程序+ssm(lw+演示+源码+运行)

摘 要 随着电子商务快速发展世界各地区,各个高校对图书馆也起来越重视.图书馆代表着一间学校或者地区的文化标志&#xff0c;因为图书馆丰富的图书资源能够带给我们重要的信息资源&#xff0c;图书馆管理系统是学校管理机制重要的一环&#xff0c;,面对这一世界性的新动向和新…

vue3中监视 Reactive对象中的属性

watch 的第一个参数可以是不同形式的“数据源”&#xff1a;它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组 一、框架&#xff1a; <template><div class"divBox"><h2>姓名&#xff1a;{{ person.…

ElasticSearch是什么?

1.概述 Elasticsearch 是一个基于 Apache Lucene 构建的开源分布式搜索引擎和分析引擎。它专为云计算环境设计&#xff0c;提供了一个分布式的、高可用的实时分析和搜索平台。Elasticsearch 可以处理大量数据&#xff0c;并且具备横向扩展能力&#xff0c;能够通过增加更多的硬…

力扣周赛:第419场周赛

&#x1f468;‍&#x1f393;作者简介&#xff1a;爱好技术和算法的研究生 &#x1f30c;上期文章&#xff1a;力扣周赛&#xff1a;第415场周赛 &#x1f4da;订阅专栏&#xff1a;力扣周赛 希望文章对你们有所帮助 因为一些特殊原因&#xff0c;这场比赛就打了1h&#xff0c…

Linux——传输层协议

目录 一再谈端口号 1端口号范围划分 2两个问题 3理解进程与端口号的关系 二UDP协议 1格式 2特点 3进一步理解 3.1关于UDP报头 3.2关于报文 4基于UDP的应用层协议 三TCP协议 1格式 2TCP基本通信 2.1关于可靠性 2.2TCP通信模式 3超时重传 4连接管理 4.1建立…

【uni-app】HBuilderX安装uni-ui组件

目录 1、官网找到入口 2、登录帐号 3、打开HuilderX 4、选择要应用的项目 5、查看是否安装完成 6、按需安装 7、安装完毕要重启 8、应用 前言&#xff1a;uniapp项目使用uni-ui组件方式很多&#xff0c;有npm安装等&#xff0c;或直接创建uni-ui项目&#xff0c;使用un…

开源商城系统crmeb phpstudy安装配置

BOSS让我最快时间部署一套开源商场系统&#xff0c;今天就以crmeb为例。 快速部署在linux中我会首选docker&#xff0c;因为我要在windows中部署&#xff0c;本文就选用phpstudy集成环境做了。 什么是crmeb 我从官网摘点&#xff1a; CRMEB产品与服务 CRMEB通过将CRM&#x…

Leecode刷题之路第18天之四数之和

题目出处 18-四数之和-题目出处 题目描述 个人解法 思路&#xff1a; todo 代码示例&#xff1a;&#xff08;Java&#xff09; todo复杂度分析 todo 官方解法 18-四数之和-官方解法 方法1&#xff1a;排序双指针 思路&#xff1a; 代码示例&#xff1a;&#xff08;Java…

codeforces round976 div2

A find minimum operations 思路&#xff1a;将所给的n变成k进制数&#xff0c;答案就是n的k进制形式下的位数之和 代码&#xff1a; #include <bits/stdc.h> using namespace std;typedef long long ll;ll n, k;void solve() {cin >> n >> k;ll cnt 0…

陪诊小程序搭建:打造便利的陪诊环境

陪诊行业作为一个新兴行业&#xff0c;随着老龄化的严重&#xff0c;在近几年中需求量日益旺盛。陪诊师为大众的就医提供了极大的便利性&#xff0c;在看病难、医疗资源紧张方面发挥了积极作用。 在陪诊行业的快速发展下&#xff0c;陪诊小程序为行业带来了便捷的模式&#xf…

解决:gpg: 从公钥服务器接收失败:服务器故障

当你添加密钥时报错&#xff0c;可以按照下面的步骤&#xff0c;依次输入。 # 停止 Network Manager 服务 sudo service network-manager stop# 删除 Network Manager 的状态文件 sudo rm /var/lib/NetworkManager/NetworkManager.state# 重新启动 Network Manager 服务 sudo …

TCP IP网络编程

文章目录 TCP IP网络编程一、基础知识&#xff08;TCP&#xff09;1&#xff09;Linux1. socket()2.bind()2.1前提2.2字节序与网络字节序2.3 字节序转换2.4 字符串信息转化成网络字节序的整数型2.5 INADDR_ANY 3.listen()4.accept()5.connect()6.案例小结6.1服务器端6.2 客户端…

Idea不能创建java8切换路径

顶部的Server URL改成https://start.aliyun.com/