vue + echart 饼形图

图表配置:

import { EChartsOption, graphic } from 'echarts'
import rightCircle from '@/assets/imgs/index/right_circle.png'
export const pieOption: EChartsOption = {title: {text: '100%',subtext: '游客加量',left: '19%',top: '42%',textStyle: {fontSize: 24,color: '#fff',align: 'center',fontWeight: 700},subtextStyle: {fontSize: 16,color: '#fff',align: 'center',fontWeight: 500}},tooltip: {trigger: 'item'},legend: {orient: 'vertical',top: '30%',left: '60%', // left给成right,直接会出现在图表右侧,但是图例的色块也会出现在文字的右侧textStyle: {//图例中文字的样式color: "#ffffff",fontSize: 14,fontWeight: 500,lineHeight: 20},itemWidth: 12, // 设置图例颜色块的宽度itemHeight: 12, // 设置图例颜色块的高度itemStyle: {borderRadius: 2},formatter: function (name) { // 设置图例展示方式let targetlet sum = 0let durationArray = pieOption.series[0].datafor (let i = 0; i < durationArray.length; i++) {sum += durationArray[i].valueif (durationArray[i].name == name) {target = durationArray[i].value}}let params = `${name}   ${((target / sum) * 100).toFixed(2) + '%'}`let tmp = params.split('\n')let res = '' + paramsfor (let i in tmp) {res = res.replace(tmp[i], ' ')}console.log('sdsd', res+params)return res + params + '\n' + target + '人次'}},graphic: [ // 设置图表外层背景{type: 'image',left: '3%',top: '16%',z: -10,bounding: 'raw',rotation: 0, //旋转// origin: [510, 100], //中心点scale: [1.1, 1.1], //缩放style: {// 背景图image: rightCircle,opacity: 1}}],series: [{left: '-45%',type: 'pie',radius: ['50%', '40%'],avoidLabelOverlap: false,padAngle: 5,itemStyle: {borderRadius: 10},label: {show: false,position: 'center'},labelLine: {show: false},data: [{ value: 1048, name: '国内游客' },{ value: 735, name: '国外游客' },{ value: 580, name: '港澳台游客' }]}]
}

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

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

相关文章

部署大语言模型并对话

在阿里云的https://developer.aliyun.com/adc/scenario/b105013328814fe995c0f091d708d67d 选择函数计算 设置服务器配置 复制公网地址 这个地址不能直接 在返回应用&#xff0c;创建应用LLM 对话页面 Open WebUI 点击下面的创建应用 部署完成后访问域名 打开访问地址

SpringBoot新手快速入门系列教程十:基于Docker Compose,部署一个简单的项目

前述&#xff1a; 本篇教程将略过很多docker下载环境配置的基础步骤&#xff0c;如果您对docker不太熟悉请参考我的上一个教程&#xff1a;SpringBoot新手快速入门系列教程九&#xff1a;基于docker容器&#xff0c;部署一个简单的项目 使用 Docker Compose 支持部署 Docker 项…

SQL优化之深分页

SQL优化之深分页 我们都知道&#xff0c;大型项目中的SQL语句&#xff0c;应该尽量避免深分页。 那么问题就来了&#xff1a; 深分页的性能差在哪&#xff1f;什么方案能避免深分页呢&#xff1f; 什么是深分页 深分页&#xff0c;即SQL查询过程中&#xff0c;使用的页数过…

3.Softmax回归

回归和分类 回归估计一个连续值 分类预测一个离散类别 Softmax回归实际是一个分类问题 从回归到多类分类 对类别进行一位有效编码 y [ y 1 , y 2 , ⋯ , y n ] T y[y_1,y_2,\cdots,y_n]^T y[y1​,y2​,⋯,yn​]T,如果是第i类&#xff0c;则值为1&#xff0c;否则为0 使用…

用户对生活的需求,是三翼鸟创新的起点

这两天又长知识了&#xff0c;学到了一个网络新梗&#xff1a;City不City。 它源自于一种新的打卡方式&#xff0c;用于表达对某个城市的态度或感受。比如你跟朋友在城市游荡时&#xff0c;就可以随口问句City不City啊&#xff1f;通常被释义为“洋不洋气”“ 时髦不时髦”。 …

部署YUM仓库及NFS共享功能

目录 一、YUM仓库服务 1、YUM仓库概述 2、准备安装源 2.1、软件仓库的提供方式 2.2、 RPM软件包的来源 3、YUM主配置文件 4、软件卸载 5、YUM源的提供方式 5.1、配置本地YUM源仓库 5.2、配置ftp源 5.2.1、服务端配置 5.2.2、客户端配置 二、NFS共享存储 1、NFS基…

Git 删除包含敏感数据的历史记录及敏感文件

环境 Windows 10 Git 2.41.0 首先备份你需要删除的文件&#xff08;如果还需要的话&#xff09;&#xff0c;因为命令会将本地也删除将项目中修改的内容撤回或直接提交到仓库中&#xff08;有修改内容无法提交&#xff09; 会提示Cannot rewrite branches: You have unstaged …

YOLOv10训练自己的数据集(交通标志检测)

YOLOv10训练自己的数据集&#xff08;交通标志检测&#xff09; 前言相关介绍前提条件实验环境安装环境项目地址LinuxWindows 使用YOLOv10训练自己的数据集进行交通标志检测准备数据进行训练进行预测进行验证 参考文献 前言 由于本人水平有限&#xff0c;难免出现错漏&#xff…

【C++题解】1156 - 排除异形基因

问题&#xff1a;1156 - 排除异形基因 类型&#xff1a;数组基础 题目描述&#xff1a; 神舟号飞船在完成宇宙探险任务回到地球后&#xff0c;宇航员张三感觉身体不太舒服&#xff0c;去了医院检查&#xff0c;医生诊断结果&#xff1a;张三体内基因已被改变&#xff0c;原有…

头歌资源库(24)插入加号

一、 问题描述 二、算法思想 可以使用动态规划来解决这个问题。 首先将数字串拆分为多个数字&#xff0c;用一个数组nums来存储每个数字。例如&#xff0c;数字串79846会被拆分为数组[7, 9, 8, 4, 6]。 然后定义一个二维数组dp&#xff0c;其中dp[i][j]表示在前i个数字中插入…

Java异常体系、UncaughtExceptionHandler、Spring MVC统一异常处理、Spring Boot统一异常处理

概述 所有异常都是继承自java.lang.Throwable类&#xff0c;Throwable有两个直接子类&#xff0c;Error和Exception。 Error用来表示程序底层或硬件有关的错误&#xff0c;这种错误和程序本身无关&#xff0c;如常见的NoClassDefFoundError。这种异常和程序本身无关&#xff0…

【算法】二叉树-迭代法实现前后中序遍历

递归的实现就是:每一次递归调用都会把函数的局部变量&#xff0c;参数值和返回地址等压入调用栈中&#xff0c;然后递归返回的时候&#xff0c;从栈顶弹出上一次递归的各项参数&#xff0c;这就是递归为什么可以返回上一层位置的原因 可以用栈实现二叉树的前中后序遍历 1. 前序…

FastAPI 学习之路(四十四)WebSockets

我们之前的分析都是基于http的请求&#xff0c;那么如果是websockets可以支持吗&#xff0c;答案是可以的&#xff0c;我们来看下是如何实现的。 from fastapi import WebSocket, FastAPI from fastapi.responses import HTMLResponseapp FastAPI()html """&…

k8s NetworkPolicy

Namespace 隔离 默认情况下&#xff0c;所有 Pod 之间是全通的。每个 Namespace 可以配置独立的网络策略&#xff0c;来 隔离 Pod 之间的流量。 v1.7 版本通过创建匹配所有 Pod 的 Network Policy 来作为默认的网络策略 默认拒绝所有 Pod 之间 Ingress 通信 apiVersion: …

【趣味数学】求阴影部分面积

题 解法1: 中位线法 既然是中点&#xff0c;就可以用起来&#xff0c;横着不行&#xff0c;竖着来&#xff0c;扩展做辅助线 E是中点S&#xff08;AED) 1/4 S(ABCD) 6 做图中辅助延长线&#xff0c;因为E中点&#xff0c;所以S&#xff08;MEB&#xff09;S(AED) 6 同理E也是…

nfs共享存储配置

目录 一.存储和NFS共享 1.存储的类型分为三种 2.三种存储架构的应用场景 二.NFS共享存储服务 1.NFS简介 2.NFS存储 3.NFS原理 4.软件介绍 三.搭建NFS服务器 1.搭建 2.使用权限&#xff1a; 读写权限 属主&#xff0c;属组权限 客户端创建文件指向同一属主和属组 …

Android使用AndServer在安卓设备上搭建服务端(Java)(Kotlin)两种写法

一直都是通过OkHttp远程服务端进行数据交互&#xff0c;突发奇想能不能也通过OkHttp在局域网的情况下对两个安卓设备或者手机进行数据交互呢&#xff1f; 这样一方安卓设备要当做服务端与另一个安卓设备通过OkHttp进行数据交互即可 当然还可以通过 socket 和 ServerSocket 通…

uniapp中使用uni-ui组件库

src目录下新建components目录从uni-ui引入对应的组件目录&#xff0c;如下图 直接使用组件&#xff0c;demo <template><view id"my" data-name"王五" data-age"18">my页面</view><uni-data-select :localdata"local…

IC后端设计中的shrink系数设置方法

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 在一些成熟的工艺节点通过shrink的方式(光照过程中缩小特征尺寸比例)得到了半节点,比如40nm从45nm shrink得到,28nm从32nm shrink得到,由于半节点的性能更优异,成本又低,漏电等不利因素也可以…

PFH点特征直方图

PFH特征描述子原理 该算法通过参数化查询关键点与其周围邻域点之间的空间差异,形成一个多维度直方图,从而实现对该点的邻域几何属性的描述。 该方法具有以下三个优势: (1)刚性变换不变性,即不受旋转、平移变换的影响; (2)采样一致性,即改变采样密度,特征保…