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 target
      let sum = 0
      let durationArray = pieOption.series[0].data
      for (let i = 0; i < durationArray.length; i++) {
        sum += durationArray[i].value
        if (durationArray[i].name == name) {
          target = durationArray[i].value
        }
      }
      let params = `${name}   ${((target / sum) * 100).toFixed(2) + '%'}`
      let tmp = params.split('\n')
      let res = '' + params
      for (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: '港澳台游客' }
      ]
    }
  ]
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

唐刘:当 SaaS 爱上 TiDB(一)- 行业挑战与 TiDB 的应对之道

导读 在 TiDB 8.1 发布后&#xff0c;TiDB 展现了强大的支持 SaaS 业务的能力&#xff0c;成为 SaaS 业务数据库的优先选择之一。 本文为“当 SaaS 爱上 TiDB”系列文章的第一篇&#xff0c;系列文章将从技术原理和真实用户体验两个角度深入探讨 TiDB 在 SaaS 业务中的表现&a…

kafka发送消息流程

配置props.put(ProducerConfig.PARTITIONER_CLASS_CONFIG, RoundRobinPartitioner.class); public Map<String,Object> producerConfigs(){Map<String,Object> props new HashMap<>();props.put(ProducerConfig.BOOTSTRAP_SERVERS_CONFIG,bootstrapServers…

ISO/OIS的七层模型②

OSI模型是一个分层的模型&#xff0c;每一个部分称为一层&#xff0c;每一层扮演固定的角色&#xff0c;互不干扰。OSI有7层&#xff0c;从上到下分别是&#xff1a; 一&#xff0c;每层功能 7.应用层&#xff08;Application layer &#xff09;&#xff1a;应用层功能&#x…

计算机基础 进制转化

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 ☁️运维工程师的职责&#xff1a;监…

用Apipost压力测试接口

用Apipost压力测试接口 1.点击自动化测试 2.选择要测试的接口 3.如果没有接口&#xff0c;就先在api调试中添加要测试的接口 4.根据自己的需求设置相应的参数&#xff0c;这里我压测10次 5.这样就可以压测接口了&#xff0c;非常nice

c++ 建造者模式

文章目录 建造者模式为什么使用建造者模式建造者模式实现步骤实现示例建造者模式优缺点 建造者模式 建造者模式&#xff08;Builder Pattern&#xff09;是面向对象设计模式中的一种&#xff0c;主要用于创建复杂对象。这种模式将对象的构建过程与其表示分离&#xff0c;允许用…

maven6——生命周期与插件

生命周期 生命周期&#xff1a;指运行的阶段&#xff08;比如几岁&#xff09; maven有三个生命周期如下&#xff0c;每个生命周期大概做的事情如下&#xff1a; 注意&#xff1a;每次执行某个&#xff0c;他会把上面的都执行一遍 插件&#xff1a; 每一个插件&#xf…

【JavaScript 报错】未捕获的加载错误:Uncaught LoadError

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、错误原因分析1. 资源路径错误2. 资源不存在3. 网络问题 二、解决方案1. 检查资源路径2. 确保资源存在3. 处理网络问题 三、实例讲解四、总结 在JavaScript应用程序中&#xff0c;未捕获的加载错误&#xff08;Uncaught …

Echarts实现github提交记录图

最近改个人博客&#xff0c;看了github的提交记录&#xff0c;是真觉得好看。可以移植到自己的博客上做文章统计 效果如下 代码如下 <!DOCTYPE html> <html lang"en" style"height: 100%"><head><meta charset"utf-8"> …

vue3项目中浏览器打开本地文档或者下载本地应用的方法(2024-07-11)

在public文件夹下面加入预览的文件【操作说明文档】。 此文件夹不会压缩并且路径不变&#xff0c;所以是最佳的存放文件的位置。 代码&#xff1a; <template><n-icon title"操作文档" style"cursor: pointer;margin-right: 10px;" size"2…

docker-2

27.构建python应用镜像-dockerfile实践项目 1.基于官方的镜像&#xff0c;构建python代码运行环境 dockerfile 2.运行镜像&#xff0c;开启一个读写的容器空间&#xff08;定制操作&#xff0c;将代码丢进去&#xff0c;运行调试&#xff09; 3.提交这个变化的容器层数据&#…

Facebook的AI革命:人工智能如何改变社交体验

随着科技的不断进步&#xff0c;人工智能&#xff08;AI&#xff09;作为一项革命性的技术&#xff0c;正在深刻影响着社交媒体的发展和用户体验。作为全球最大的社交平台之一&#xff0c;Facebook积极探索并应用AI技术&#xff0c;以提升用户的社交互动、内容分享和个性化体验…

插片式远程 I/O模块:热电阻温度采集模块与PLC配置案例

XD系列成套系统主要由耦合器、各种功能I/O模块、电源辅助模块以及终端模块组成。有多种通讯协议总线的耦合器&#xff0c;例如Profinet、EtherCAT、Ethernet/IP、Cclink IE以及modbus/TCP等。I/O 模块可分为多通道数字量输入模块、数字量输出模块、模拟量输入模块、模拟量输出模…

Python实战:拥有设闹钟功能的可视化动态闹钟的实现

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

昇思25天学习打卡营第11天 | FCN图像语义分割

昇思25天学习打卡营第11天 | FCN图像语义分割 文章目录 昇思25天学习打卡营第11天 | FCN图像语义分割FCN模型数据处理下载数据集创建训练集可视化训练集 网络构建网络结构张量操作 训练准备导入VGG-16部分预训练权重&#xff1a;损失函数模型评估指标 模型训练模型评估模型推理…

「C++系列」一篇文章说透【存储类】

文章目录 一、C 存储类1. 类的定义2. 对象的创建3. 对象在内存中的布局4. 对象的存储位置 二、auto 存储类1. auto的基本用法2. auto与存储类的关系1) 自动存储类&#xff08;最常见的&#xff09;2) 静态存储类3) 动态存储类&#xff08;通过new&#xff09; 三、register 存储…

SSRF漏洞深入利用与防御方案绕过技巧

文章目录 前言SSRF基础利用1.1 http://内网资源访问1.2 file:///读取内网文件1.3 dict://探测内网端口 SSRF进阶利用2.1 Gopher协议Post请求2.2 Gopher协议文件上传2.3 GopherRedis->RCE2.4 JavaWeb中的适用性&#xff1f; SSRF防御绕过3.1 Url黑名单检测的绕过3.2 Url白名单…

【PHP安装内置扩展】

PHP安装内置扩展 1、首先查看php源码以及查询是否有需要的扩展;本次以zlib扩展为例子 2、进入需要安装的扩展目录,执行命令 cd zlib 执行 make clean 清掉之前的安装的残留文件; 不需要的话直接略过,新安装也略过3、运行phpize,执行/usr/local/php/bin/phpize 注意这个路径一…

【BES2500x系列 -- RTX5操作系统】深入探索CMSIS-RTOS RTX -- 配置篇 -- 初识GPIO --(六)

&#x1f48c; 所属专栏&#xff1a;【BES2500x系列】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f49…

子任务:IT运维的精细化管理之道

在当今的企业运营中&#xff0c;信息技术已成为支撑业务发展的核心力量。根据Gartner的报告&#xff0c;IT服务管理&#xff08;ITSM&#xff09;的有效实施可以显著提升企业的运营效率&#xff0c;降低成本高达15%&#xff0c;同时提高服务交付速度和质量。随着业务的复杂性和…