Echarts 环形图配置 环形半径(radius) 修改文本位置(label) 南丁格尔图(roseType)

news2024/11/27 8:24:44

数据

  const data = [
  { name: '华为', value: 404 },
  { name: '小米', value: 800 }, 
  { name: '红米', value: 540 }, 
  { name: '苹果', value: 157 }]

设置南丁格尔图

  roseType: 'area'

在这里插入图片描述

设置标签位置

 		 label: {
      	        show: true,
                position: 'center'  // center 中间展示  outside 外侧展示  inside 内侧展示 
              },

中间展示
在这里插入图片描述
外侧展示
在这里插入图片描述
内测展示
在这里插入图片描述

设置半径 内径

//第一个为内径 第二个为外径

   radius: ['30%', '70%']

在这里插入图片描述

完整代码

  const myCharts = this.$echarts.init(this.$refs.myCharts)
        myCharts.setOption({
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['30%', '70%'], //第一个为内径 第二个为外径
              label: {
                show: true,
                position: 'inside' //outside 外侧展示  inside 内侧展示 
              },
              data,
              roseType: 'area' //设置为南丁格尔图
            }
          ]
        })

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

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

相关文章

案例026:基于微信小程序的原创音乐系统的设计与实现

文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序…

Vue 纯css方式实现自定义进度条组件

组件源码 <template><div><div class"bar" :style"{--precent: precent}"></div></div></template><script>export default {name: ProgressBar,props: {precent:{},},data() {return {}},methods: {}}</sc…

GoLong的学习之路,进阶,微服务之使用,RPC包(包括源码分析)

今天这篇是接上上篇RPC原理之后这篇是讲如何使用go本身自带的标准库RPC。这篇篇幅会比较短。重点在于上一章对的补充。 文章目录 RPC包的概念使用RPC包服务器代码分析如何实现的&#xff1f;总结Server还提供了两个注册服务的方法 客户端代码分析如何实现的&#xff1f;如何异步…

kali linux无法使用root打开vlc观看视频的解决办法

kali linux陆续装了几个视频播放器&#xff0c;都比较不够友好&#xff0c;无奈安装vlc,vlc安装方法就是 apt install vlc这个没什么好说的&#xff0c;多数源都集成这个著名软件了&#xff0c;kali linux打开闪退&#xff0c;终端下运行出现&#xff1a; VLC is not supposed…

【数学建模】《实战数学建模:例题与讲解》第七讲-Bootstrap方法(含Matlab代码)

【数学建模】《实战数学建模&#xff1a;例题与讲解》第七讲-Bootstrap方法&#xff08;含Matlab代码&#xff09; 基本概念习题7.31. 题目要求2.解题过程3.程序4.结果 习题7.51. 题目要求2.解题过程3.程序4.结果 如果这篇文章对你有帮助&#xff0c;欢迎点赞与收藏~ 基本概念…

软件设计师——计算机网络(二)

&#x1f4d1;前言 本文主要是【计算机网络】——软件设计师——计算机网络的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1…

Unity DOTS中的baking(一) Baker简介

Unity DOTS中的baking&#xff08;一&#xff09; Baker简介 baking是DOTS ECS工作流的一环&#xff0c;大概的意思就是将原先Editor下的GameObject数据&#xff0c;全部转换为Entity数据的过程。baking是一个不可逆的过程&#xff0c;原先的GameObject在运行时不复存在&#x…

漏刻有时百度地图API实战开发(8)关键词输入检索获取经纬度坐标和地址

在百度地图中进行关键词输入检索时&#xff1a; 在地图页面顶部的搜索框中输入关键词。点击搜索按钮或按下回车键进行搜索。地图将显示与关键词相关的地点、商家、景点等信息。可以使用筛选和排序功能来缩小搜索范围或更改搜索结果的排序方式。点击搜索结果中的地点或商家&…

软件工程考试复习

第一章、软件工程概述 &#x1f31f;软件程序数据文档&#xff08;考点&#xff09; &#x1f31f;计算机程序及其说明程序的各种文档称为 &#xff08; 文件 &#xff09; 。计算任务的处理对象和处理规则的描述称为 &#xff08; 程序 &#xff09;。有关计算机程序功能、…

Spring Cloud Gateway + Nacos + LoadBalancer实现企业级网关

1. Spring Cloud Gateway 整合Nacos、LoadBalancer 实现企业级网关 前置工作&#xff1a; 创建 SpringBoot 多模块项目创建网关&#xff08;gateway-service&#xff09;、用户&#xff08;user-service&#xff09;模块用户模块添加 Nacos discovery 支持以及 Spring Web&am…

一键抠图2:C/C++实现人像抠图 (Portrait Matting)

一键抠图2&#xff1a;C/C实现人像抠图 (Portrait Matting) 目录 一键抠图2&#xff1a;C/C实现人像抠图 (Portrait Matting) 1. 前言 2. 抠图算法 3. 人像抠图算法MODNet &#xff08;1&#xff09;模型训练 &#xff08;2&#xff09;将Pytorch模型转换ONNX模型 &…

【IDEA】IntelliJ IDEA中进行Git版本控制

本篇文章主要记录一下自己在IntelliJ IDEA上使用git的操作&#xff0c;一个新项目如何使用git进行版本控制。文章使用的IDEA版本 IntelliJ IDEA Community Edition 2023.3&#xff0c;远程仓库为https://gitee.com/ 1.配置Git&#xff08;File>Settings&#xff09; 2.去Git…

Java网络编程——安全网络通信

在网络上&#xff0c;信息在由源主机到目标主机的传输过程中会经过其他计算机。在一般情况下&#xff0c;中间的计算机不会监听路过的信息。但在使用网上银行或者进行信用卡交易时&#xff0c;网络上的信息有可能被非法分子监听&#xff0c;从而导致个人隐私的泄露。由于Intern…

adb unauthorized 踩坑记录

给Realme X7 Pro 安装Root后&#xff0c;发现adb连接设备呈现unauthorized 状态&#xff1a; 在Google以后&#xff0c;尝试了很多方案&#xff0c;均无效&#xff0c;尝试的方案如下&#xff1a; 重启手机&#xff0c;电脑。不行撤销调试授权&#xff0c;开关usb调试&#xf…

基于单片机智能安防窗户防盗系统设计

**单片机设计介绍&#xff0c;基于单片机智能安防窗户防盗系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的智能安防窗户防盗系统是一种利用单片机技术设计的窗户防盗装置。它通过传感器监测窗户状态&#xf…

vue使用echarts显示中国地图

项目引入echarts以后&#xff0c;在页面创建canvas标签 引入一个公共js文件&#xff08;下面这段代码就是china.js文件&#xff09; (function (root, factory) {if (typeof define function && define.amd) {// AMD. Register as an anonymous module.define([ex…

成都工业学院Web技术基础(WEB)实验四:CSS3布局应用

写在前面 1、基于2022级计算机大类实验指导书 2、代码仅提供参考&#xff0c;前端变化比较大&#xff0c;按照要求&#xff0c;只能做到像&#xff0c;不能做到一模一样 3、图片和文字仅为示例&#xff0c;需要自行替换 4、如果代码不满足你的要求&#xff0c;请寻求其他的…

Windows 和 MacOS 上安装配置ADB(安卓调试桥)

一、Android 调试桥 (ADB) Android 调试桥&#xff08;ADB&#xff09; 是一款多功能命令行工具&#xff0c;它让你能够更便捷地访问和管理 Android 设备。使用 ADB 命令&#xff0c;你可以轻松执行以下操作 在设备上安装、复制和删除文件&#xff1b;安装应用程序&#xff1…

多维时序 | MATLAB实现TSOA-TCN-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现TSOA-TCN-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现TSOA-TCN-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现TSOA-TCN-Multihead-…

【Python网络爬虫入门教程1】成为“Spider Man”的第一课:HTML、Request库、Beautiful Soup库

Python 网络爬虫入门&#xff1a;Spider man的第一课 写在最前面背景知识介绍蛛丝发射器——Request库智能眼镜——Beautiful Soup库 第一课总结 写在最前面 有位粉丝希望学习网络爬虫的实战技巧&#xff0c;想尝试搭建自己的爬虫环境&#xff0c;从网上抓取数据。 前面有写一…