improve-echarts饼图自适应(分辨率放大缩小)

1.echarts

        本身存在放大缩小图表不变的情况,要求要图表适应分辨率,根据分辨率放大缩小来进行适应与响应式。

饼图

   <!-- 饼状 --><div class="leftrcyle"><div class="ciclye"><div id="cicly" class="ye" ref="chart"></div></div></div>
import * as echarts from 'echarts'
  methods: {setci(data,index) {// 有的话就获取已有echarts实例的DOM节点let myChart = echarts.getInstanceByDom(document.getElementById("cicly"))// 如果不存在,就进行初始化if (myChart == null || myChart == undefined || myChart == '') {myChart = echarts.init(document.getElementById("cicly"));}var option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},series: [{name: 'xxx',type: 'pie',radius: '90%',label: {show: true,position: 'inside',formatter: '{d}%',fontSize: 14},itemStyle: {borderColor: '#fff',borderWidth: 5},emphasis: {label: {show: true,},},data: data,},],}myChart.setOption(option)}},

2.核心主要的响应适应代码

mounted() {this.chartInstance = echarts.init(this.$refs.chart);window.addEventListener('resize', () => {this.chartInstance.resize();});},

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

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

相关文章

2023人机交互期末复习

考试题型及分值分布 1、选择题&#xff08;10题、20分&#xff09; 2、填空题&#xff08;10题、20分&#xff09; 3、判断题&#xff08;可选、5题、10分&#xff09; 4、解答题&#xff08;5~6题、30分&#xff09; 5、分析计算题&#xff08;1~2题、20分&#xff09; 注意&…

PHP+MySQL实现后台管理系统增删改查之够用就好

说明 最近要给博客弄个后台&#xff0c;不想搞得很复杂&#xff0c;有基本的增删改查就够了&#xff0c;到网上找了一圈发现这个不错&#xff0c;很实用&#xff0c;希望可以帮到大家&#xff0c;需要的朋友评论区留下邮箱&#xff0c;我安排发送。 演示效果 项目介绍 本项目…

Jetty使用入门

Jetty使用入门 社区当前推荐开发者使用Jetty 12.X版本。 依据End of Community Support for Jetty 9.x - June 2022&#xff0c;社区对Jetty 9.x的支持&#xff0c;已在2022年6月1日停止。 依据End of Community Support for Jetty 10 / Jetty 11 - January 2024&#xff0c;…

带使能控制的锂电池充放电解决方案

一、产品概述 TP4594R 是一款集成线性充电管理、同步升压转换、电池电量指示和多种保护功能的单芯片电源管理 SOC&#xff0c;为锂电池的充放电提供完整的单芯片电源解决方案。 TP4594R 内部集成了线性充电管理模块、同步升压放电管理模块、电量检测与 LED 指示模块、保护模块…

关于python函数参数传递

参数传递 在 python 中&#xff0c;类型属于对象&#xff0c;对象有不同类型的区分&#xff0c;变量是没有类型的&#xff1a; 在下面的代码示例重&#xff0c;[1,2,3] 是 List 类型&#xff0c;“qayrup” 是 String 类型&#xff0c;而变量 a 是没有类型&#xff0c;它仅仅…

#WEB前端

1.实验&#xff1a;vscode安装&#xff0c;及HTML常用文本标签 2.IDE&#xff1a;VSCODE 3.记录&#xff1a; &#xff08;1&#xff09;网页直接搜索安装vscode &#xff08;2&#xff09;打开vscode&#xff0c;在下图分别安装以下插件&#xff1a; Html Css Support …

C++11线程同步之互斥锁

C11线程同步之互斥锁 std::mutex成员函数线程同步 std::lock_guardstd::recursive_mutexstd::timed_mutex 进行多线程编程&#xff0c;如果多个线程需要对同一块内存进行操作&#xff0c;比如&#xff1a;同时读、同时写、同时读写对于后两种情况来说&#xff0c;如果不做任何的…

《互联网的世界》第四讲-拥塞控制与编码

需要澄清的一个误区是&#xff0c;拥塞绝不是发送的数据量太大导致&#xff0c;而是数据在极短的时间段内到达了同一个地方以至于超过了网络处理容量导致&#xff0c;拥塞的成因一定要考虑时间因素。换句话说&#xff0c;拥塞由大突发导致。 只要 pacing&#xff0c;再多的数据…

2024.3.4训练记录(8)

文章目录 CF 459D Pashmak and Parmidas problemCF 1388C Uncle Bogdan and Country HappinessCF 1525D ArmchairsCF 220B Little Elephant and Array CF 459D Pashmak and Parmida’s problem 题目链接 最近感觉对数据结构题的反应度提升了&#xff0c;这一题是上午看的但是…

动态规划(算法竞赛、蓝桥杯)--树形DP树形背包

1、B站视频链接&#xff1a;E18 树形DP 树形背包_哔哩哔哩_bilibili #include <bits/stdc.h> using namespace std; const int N110; int n,V,p,root; int v[N],w[N]; int h[N],to[N],ne[N],tot; //邻接表 int f[N][N];void add(int a,int b){to[tot]b;ne[tot]h[a];h[a…

数仓项目6.0(一)

尚硅谷大数据项目【电商数仓6.0】企业数据仓库项目_bilibili 数据流转过程 用户➡️业务服务器➡️数据库存储➡️数仓统计分析➡️数据可视化 数据仓库处理流程&#xff1a;数据源➡️加工数据➡️统计筛选数据➡️分析数据 数据库不是为了数据仓库服务的&#xff0c;需要…

B084-SpringCloud-Zuul Config

目录 zuul系统架构和zuul的作用zuul网关实现配置映射路径过滤器 Config概述云端管理本地配置 zuul zuul是分布式和集群后前端统一访问入口 系统架构和zuul的作用 zuul把自己注册进eureka&#xff0c;然后可通过前端传来的服务名发现和访问对应的服务集群 为了预防zuul单点故…

Java 枚举类的深入理解与应用

Java 的枚举类是一种特殊的类&#xff0c;通常表示一组常量。在编译或设计时&#xff0c;当我们知道所有变量的可能性时&#xff0c;尽量使用枚举类型。本文将通过一个具体的例子&#xff0c;深入探讨 Java 枚举类的定义、使用和高级特性。 目录 枚举类的定义与使用枚举类的构造…

【OJ】求和与计算日期

文章目录 1. 前言2. JZ64 求123...n2.1 题目分析2.2 代码 3. HJ73 计算日期到天数转换3.1 题目分析3.2 代码 4. KY222 打印日期4.1 题目分析4.2 代码 1. 前言 下面两个题目均来自牛客&#xff0c;使用的编程语言是c&#xff0c;分享个人的一些思路和代码。 2. JZ64 求123…n …

Vue 赋值后原数据随赋值后的数据的变化而变化

很常见的&#xff0c;当我们直接用“”号等方式直接赋值后 原数据会随赋值后的数据的变化而变化 但是有时候我们的需求是不需要原数据跟随变化 所以怎么解决呢&#xff1f; 解决办法有&#xff1a; 1.使用Object.assign() 方法 2.使用深拷贝函数 JSON.parse() 3.使用第三方库lo…

毕业生信息招聘平台|基于springboot+ Mysql+Java的毕业生信息招聘平台设计与实现(源码+数据库+文档+PPT)

目录 论文参考 摘 要 数据库设计 系统详细设计 文末获取源码联系 论文参考 摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 毕业生信息招聘平台&#xff0c;主要的模块包括查看管理员&a…

#ifndef 和 #pragma once的区别

#ifndef 和 #pragma once 都是用来防止头文件被重复包含的&#xff0c;但它们的工作方式和兼容性有所不同&#xff1a; #ifndef 是 C 的标准语法&#xff0c;它依赖于不重复的宏名称&#xff0c;保证了包含在 #endif 的内容不会被重复包含。这个内容可以是一个文件的所有内容&…

Webpack配置与运行基础教程

在前端开发中&#xff0c;Webpack是一款非常流行的模块打包工具&#xff0c;它可以帮助我们将多个文件打包成一个或多个静态资源文件&#xff0c;从而提高前端项目的性能和可维护性。本文将为你介绍Webpack的基础配置和运行方法&#xff0c;帮助你快速上手Webpack。 什么是Web…

基于Springboot的无人智慧超市管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的无人智慧超市管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…

1.3 有哪些文本表示模型?它们各有什么优缺点?

1.3 有哪些文本表示模型?它们各有什么优缺点? 场景描述 文本是一类非常重要的非结构化数据&#xff0c;如何表示文本数据一直是机器学习领域的一个重要研究方向。 知识点 词袋模型(Bag of Words)TF-IDF(Term Frequency-Inverse DocumentFrequency)主题模型(Topic Model)词…