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 点击下面的创建应用 部署完成后访问域名 打开访问地址

模电基础 - 波形的发生和信号的转换

目录 一. 简介 二. 正弦波震荡电路 三. 变压器反馈式振荡电路 四. 电感反馈式震荡电路 五. 电容反馈式震荡电路 六. 石英晶体正弦波震荡电路 七. 非正弦波发生电路 八. 利用集成运放实现的信号转换电路 一. 简介 在模电基础中&#xff0c;波形的发生和信号的转换是重要…

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

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

白骑士的C++教学进阶篇 2.3 模板

系列目录 上一篇&#xff1a;白骑士的C教学进阶篇 2.2 面向对象编程&#xff08;OOP&#xff09; 模板是C中一个强大的特性&#xff0c;允许编写通用的代码&#xff0c;提高代码的重用性和灵活性。模板分为函数模板和类模板&#xff0c;还包括模板特化。本篇博客将详细介绍这些…

SQL优化之深分页

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

双连通性(算法篇)

算法之双连通性 双连通性 概念&#xff1a; 双连通性就是当删除图中的一个顶点&#xff0c;使图分割成两个图&#xff0c;则这个图就具有双连通性&#xff0c;而能导致图分割成多张图的顶点称为割点背向边&#xff1a;当一个顶点被访问时&#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;通常被释义为“洋不洋气”“ 时髦不时髦”。 …

cpp的cbp

.cbp 文件是 Code::Blocks 的项目文件。Code::Blocks 是一个开源的跨平台集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要用于 C、C 以及 Fortran 编程。.cbp 文件包含有关项目的所有配置信息&#xff0c;包括文件路径、编译选项、链接器设置等。 以下是 .cbp 文件的…

部署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 …

免费流程图工具 Draw.io Integration安装使用

Draw.io Integration 是 VS Code 上的一个插件&#xff0c;允许用户在 VS Code 中直接创建、编辑和查看 Draw.io 图表&#xff0c;如流程图、UML 图等。以下是 Draw.io Integration 插件在 VS Code 中的安装步骤&#xff1a; 安装步骤 确保 VS Code 已安装&#xff1a; 如果你…

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

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

每日一道算法题 204. 计数质数

题目 204. 计数质数 - 力扣&#xff08;LeetCode&#xff09; Python class Solution:def countPrimes(self, n: int) -> int:"""质数又称为素数&#xff0c;是一个大于1的自然数&#xff0c;除了1和它自身外&#xff0c;不能被其他自然数整除的数叫做质数…

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

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

Vscode连接存在私钥的远程服务器

编辑配置文件 # Read more about SSH config files: https://linux.die.net/man/5/ssh_configHost 172.17.x.xxxHostName 172.17.x.xxxUser xxxIdentityFile C:\Users\xxx\.ssh\xxx.pem会出现报错&#xff1a; Permissions 0644 for xxxx are too open. It is required that …

XML Schema 指示器

XML Schema 指示器 1. 引言 XML Schema 是一种用于定义 XML 文档结构和内容的语言。它提供了一种强大的方式来描述 XML 文档中允许的元素、属性和数据类型。XML Schema 指示器是在 XML Schema 定义中使用的一些特殊元素和属性,它们用于指示 XML 处理器如何解析和验证 XML 文…

vue-router路由路径

在配置 vue-router 路由时&#xff0c;path: ‘search’ 和 path: ‘/search’ 有不同的行为&#xff1a; 1.path: ‘search’: 这是一个相对路径。相对路径意味着这个路径是相对于父路径的。如果父路径是 /emergency&#xff0c;那么这个路由的完整路径是 /emergency/search…

QT 报错C2872: “byte“: 不明确的符号

这个错误提示是因为 byte 这个符号不明确&#xff0c;这种情况是由于代码中同时包含了多个同名符号的定义&#xff0c;编译器无法区分&#xff0c;从而导致错误。在这个问题中&#xff0c;可能是由于使用了 Winsock2.h 头文件中定义的 byte 宏与其他地方定义的 byte 符号重名&a…

Android Bitmap

在Android开发中&#xff0c;位图&#xff08;Bitmap&#xff09;是一个非常重要的图形处理对象&#xff0c;它用于在内存中存储图像数据。以下是关于Android中位图使用的一些关键点和方法&#xff1a; 一、获取位图 从资源文件中获取&#xff1a; 使用BitmapFactory类&#…