vue + echart 饼形图

news2024/11/15 17:44:31

图表配置:

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: '港澳台游客' }
      ]
    }
  ]
}

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

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

相关文章

如何评估媒体邀约宣传的效果

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 评估媒体邀约宣传的效果是一个系统而全面的过程&#xff0c;它涉及多个维度的考量和分析。 一、受邀媒体的出席率&#xff1a; 1.受邀媒体出席率直观反映了媒体邀约的效果&#xff1b; …

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

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

自学第十五天----深入理解函数上

1. 函数是什么&#xff1f; 维基百科中对函数的定义&#xff1a; 子程序 在计算机科学中&#xff0c;子程序&#xff08;英语&#xff1a;Subroutine, procedure, function, routine, method, subprogram, callable unit&#xff09;&#xff0c;是一个大型程序中的某部分代码…

【2-1:RPC设计】

RPC 1. 基础1.1 定义&特点1.2 具体实现框架1.3 应用场景2. RPC的关键技术点&一次调用rpc流程2.1 RPC流程流程两个网络模块如何连接的呢?其它特性RPC优势2.2 序列化技术序列化方式PRC如何选择序列化框架考虑因素2.3 应用层的通信协议-http2.3.1 基础概念大多数RPC大多自…

windows上修改redis端口号

概况 redis是一个开源的内存数据结构存储系统&#xff0c;常用做数据库、缓存和消息代理。默认的端口号为6379 更改redis端口号步骤如下 先停止redis服务 redis-cli shutdowm 打开redis配置文件 在redis安装目录下&#xff0c;即redis.windows.conf文件。 port 6396 然后…

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

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

js前端隐藏列 并且获取值,列表复选框

列表框 <div class"block" id"psi_wh_allocation_m"><table id"result" class"list auto hover fixed" style"width:100%;border-collapse:collapse"><thead><tr><%--<th></th>--%&…

人类大脑的计算与机器的类脑计算

人类大脑的计算基本原理涉及到神经元的基本工作方式、神经网络的结构和连接模式、信息传递的方式、学习和记忆的机制等多个层面的复杂互动&#xff0c;这些原理的深入理解不仅有助于神经科学的发展&#xff0c;还为人工智能领域的发展提供了重要的启示和指导。人类大脑计算基本…

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

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

电脑录音如何操作?电脑麦克风声音一起录制,分享7款录音软件

电脑录音已经成为我们日常生活和工作中不可或缺的一部分。无论是录制会议、教学、音乐、网络直播、音源采集还是其他声音&#xff0c;电脑录音软件都为我们提供了极大的便利。本文将为大家介绍如何操作电脑录音&#xff0c;并分享七款录音软件&#xff0c;包括是否收费、具体操…

OpenCV中的浅拷贝和深拷贝

文章目录 前言一、浅拷贝二、深拷贝三、比较总结 前言 在数字图像处理中&#xff0c;针对读取到的一张图像&#xff0c;需要反复利用这张图像做各种的变换&#xff0c;以满足我们项目的需求。在这之前&#xff0c;最容易忽略的一点就是图像之间的拷贝问题&#xff0c;其中的浅…

【JavaScript 报错】未捕获的类型错误:Uncaught TypeError

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、错误原因分析1. 调用不存在的方法2. 访问未定义的属性3. 数据类型不匹配4. 函数参数类型不匹配 二、解决方案1. 检查方法和属性是否存在2. 使用可选链操作符3. 数据类型验证4. 函数参数类型检查 三、实例讲解四、总结 在…

Java高级重点知识点-25-Stream流、方法引用

文章目录 Stream流流式思想概述获取流常用方法 方法引用方法引用符通过对象名引用成员方法通过类名称引用静态方法通过super引用成员方法通过this引用成员方法类的构造器引用数组的构造器引用 Stream流 通过循环遍历来讲解流的优势&#xff1b; 要求&#xff1a;筛选所有姓张的…

游戏如何应对黑灰产工作室

游戏黑灰产工作室&#xff0c;是指以非法渠道、非法手段通过游戏进行牟利的团伙。使用脚本、外挂是黑灰产工作室的显著特征&#xff0c;其常见的牟利方式有&#xff1a;打金工作室、资源囤积号、初始号、自抽号、代练工作室以及营销欺诈等。 ▲ 常见的游戏黑灰产工作室牟利路径…

正向传播和反向传播

正向传播&#xff08;Forward Propagation&#xff09; 正向传播是指将输入数据通过神经网络&#xff0c;计算出预测值的过程。具体步骤如下&#xff1a; 输入层&#xff1a;接受输入数据。隐藏层&#xff1a;每个隐藏层中的神经元接收上一层的输出&#xff0c;进行加权求和&…

ENSP防火墙综合配置

综合拓扑&#xff1a; 实验要求&#xff1a; 要求一 生产区的安全策略配置 办公区的安全策略 要求二 生产区的安全策略 游客和办公区的安全策略 因为ISP返回的数据包会被防火墙最后的默认安全策略给拒绝&#xff0c;所以&#xff0c;把要ISP返回的数据给允许通过 要求三 增加…

Lingo学习(三)——工厂合并、运算符、内置函数

一、工厂合并 &#xff08;一&#xff09; 工厂合并——生产二维矩阵 【引入】 sets: factory /1..6/ : a; plant /1..8/ : d; Cooperation(factory,p lant) : c, x; endsets 以上程序可…

Go语言入门之Map详解

Go语言入门之Map详解 1.基础定义 map是一个无序的&#xff0c;k-v键值对格式的集合 &#xff08;1&#xff09;特点 类型特点&#xff1a;map为引用类型&#xff0c;所以在函数中更新value值会永久改变顺序特点&#xff1a;map的遍历是无序的&#xff0c;因为底层是哈希表&am…

按下快门前的算法——对焦

对焦算法可以分为测距式&#xff0c;相位式&#xff0c;反差式。 其中测距式是通过激光&#xff0c;&#xff08;TOF&#xff0c;Time of Flight&#xff09;等主动式地得知物距&#xff0c;然后对焦。更常用的是后两者。 反差式CDAF&#xff08;Contrast Detection Auto Foc…

微调及代码

一、微调&#xff1a;迁移学习&#xff08;transfer learning&#xff09;将从源数据集学到的知识迁移到目标数据集。 二、步骤 1、在源数据集&#xff08;例如ImageNet数据集&#xff09;上预训练神经网络模型&#xff0c;即源模型。 2、创建一个新的神经网络模型&#xff…