(echarts)饼图封装相关总结及使用

news/2024/2/28 10:09:58

(echarts)饼图封装相关总结及使用


在这里插入图片描述


一、封装组件pieChart.vue

<template><div :id="id" :class="className" :style="{ height: height, width: width }" />
</template><script>
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize' //自适应画布export default {mixins: [resize],props: {// 使用页面传的数据(有则用新,无则默认)className: {type: String,default: 'chart'},id: {type: String,default: 'chart'},width: {type: String,default: '100%'},height: {type: String,default: '400px'},xData: {type: Array,default: function() {return []}},chartData: {type: Object,default: function() { return {name: '偏好占比',datas: [{ name: '爱好1', value: 63.8 },{ name: '爱好2', value: 26.4 },{ name: '其他', value: 9.8 }]}}// required: true,}},data() {return {chart: null}},//监听数据若变化同步渲染图表watch: {chartData: {deep: true,handler(val) {this.setOptions(val)}}},// mounted周期mounted() { this.$nextTick(() => {this.initChart1()})},// beforeDestroy周期beforeDestroy() {//如果chart存在则用dispose销毁,不存在则过if (!this.chart) {return}this.chart.dispose()this.chart = null},// 方法methods: {initChart1() {this.chart = echarts.init(document.getElementById(this.id), 'macarons')this.setOptions(this.chartData)},setOptions(chartObj) {this.chart.setOption({//标签设置tooltip: {trigger: 'item'formatter:'{b}:({d}%)',},//图例设置legend: {orient: 'horizontal',//水平left: 'center',  //居中orient: "vertical",//垂直left: "left",//左侧bottom: "5%",//距底部textStyle: {color: "#ffffff",size: 14,},type: "scroll",pageIconColor: '#ffffff', //图例分页左右箭头图标颜色pageTextStyle: {color: '#ffffff', //图例分页页码的颜色设置},pageIconSize: 12, //当然就是按钮的大小pageIconInactiveColor: "#7f7f7f", // 禁用的按钮颜色 },//颜色设置color: ['#52A8FF','#00B389','#FFA940','#FF5A57','#29EFC4','#F8AEA4','#FFC53D','#009982','#C099FC','#F5855F'],//数据series: [{name: chartObj.name,//父组件传的数据名称type: 'pie',//类型radius: '50%',//半径程度,50%时是圆label: {normal: {formatter: "{b}:({d}%)",//显示格式formatter: (params) => {//显示格式//调用自定义显示格式return this.getEqualNewlineString(params,8); //过长处理},}},data: chartObj.datas,//父组件传的数据值emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]})},//params 要处理的字符串 每行显示长度getEqualNewlineString(params, length) {return params.name +":" + "\n" +"("+params.percent+"%)"let text = "";let textString = `${params.name}:(${params.percent}%)`console.log(params);let count = Math.ceil(textString.length / length); // 向上取整数// 一行展示length个if (count > 1) {for (let z = 1; z <= count; z++) {text += textString.substr((z - 1) * length, length);if (z < count) {text += "\n";}}} else {text += textString.substr(0, length);}return text;},}
}
</script><style>
</style>

二、页面使用

<div class="charts"><pie-chart :id="'pieChart'" :height="'420px'" :chart-data="echartsData" />
</div><script>
import PieChart from './charts/pieChart'
export default { components: { PieChart },//组件注册data(){return:{		echartsData: {name: '区域分布',datas: []},}}
}
</script>// 样式
.charts {height: 420px;box-sizing: border-box;border: 1px solid rgb(213, 223, 232);}

拓展:自适应resize.js

import { debounce } from '@/utils'export default {data() {return {$_sidebarElm: null,$_resizeHandler: null}},mounted() {this.initListener()},activated() {if (!this.$_resizeHandler) {// avoid duplication initthis.initListener()}// when keep-alive chart activated, auto resizethis.resize()},beforeDestroy() {this.destroyListener()},deactivated() {this.destroyListener()},methods: {// use $_ for mixins properties// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential$_sidebarResizeHandler(e) {if (e.propertyName === 'width') {this.$_resizeHandler()}},initListener() {this.$_resizeHandler = debounce(() => {this.resize()}, 100)window.addEventListener('resize', this.$_resizeHandler)this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)},destroyListener() {window.removeEventListener('resize', this.$_resizeHandler)this.$_resizeHandler = nullthis.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)},resize() {const { chart } = thischart && chart.resize()}}
}

http://www.ppmy.cn/news/1153823.html

相关文章

Golang在Web应用程序开发中的优势和适用性

Golang&#xff08;又称为Go&#xff09;是一种开源的编程语言&#xff0c;由谷歌开发。它专注于简洁、高效和可靠的Web应用程序开发。这篇文章将深入探讨Golang在Web应用程序开发中的优势和适用性&#xff0c;并分析为什么越来越多的开发者选择使用Golang来构建他们的Web应用程…

计算机毕业设计 基于Web铁路订票管理系统 火车订票管理系统的设计与实现 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

解决git在window11操作很慢,占用很大cpu的问题

【git在window11操作很慢&#xff0c;占用很大cpu&#xff0c;最后也执行失败】 在谷歌输入&#xff1a;git very slow in window 11。通过下面链接终于找到了解决方案&#xff1a; https://www.reddit.com/r/vscode/comments/sulebx/slow_git_in_wsl_after_updating_to_window…

计算机网络:静态路由的应用场景及配置

章节&#xff1a;静态路由&#xff08;部分内容参考&#xff1a;《华为HCIA-Datacom认证学习指南》&#xff09; 《华为 HCIA-Datacom认证学习指南》 目录 一、静态路由应用场景 二、静态路由配置 2.1 实验目的 2.2 实验拓扑 2.3 实验步骤 1.配置网络连通性 2.测试网络…

宝塔使用腾讯COS存储实现自动备份服务器网站数据图文教程

一、进入宝塔安装腾讯COS 点击设置打开后需要配置以下cos参数 二、腾讯云创建COS存储桶 选择私有读写&#xff0c;其他默认就行 三、创建访问密钥 四、配置宝塔中腾讯COS相关设置 很多人是配置错误导致无法正常链接cos region为cos存储桶所属地域 Bucker为存储桶名称 五、…

私有git仓库只支持http情况下go mod tidy 和 go get 默认走https的问题处理 GOINSECURE

1 go mod tidy go mod tidy默认情况下在拉取go的依赖包时都是走的https协议&#xff0c;但是go的私有git仓库都是只支持http协议&#xff0c;所以当你的go.mod里面有私有仓库的依赖时&#xff0c;在使用go mod tidy拉取依赖时&#xff0c;一定会遇到这么个问题&#xff0c;就是…

AtCoder ABC239G 最小割集

题意 传送门 AtCoder ABC239G Builder Takahashi 题解 将原图中每个节点拆为入点 v v v 与出点 v ′ v v′&#xff0c;对于原图任一边 ( u , v ) (u,v) (u,v) 则 u ′ → v , v → u u\rightarrow v, v\rightarrow u u′→v,v→u 连一条容量为 ∞ \infty ∞ 的边&…

Dockerfile定制Ubuntu的docker镜像

当我们本地有一个从docker官网拉取的ubuntu:latest的Ubuntu镜像,我们基于这个镜像来定制一个自己的Ubuntu镜像 创建一个单独的文件夹create_docker 在这个文件夹下创建一个名为Dockerfile的文件:touch Dockerfile 将下面文件复制到Dockerfile文件中,可添加自己需要的安装指令…

“之江创客”跨境电商赛区决赛暨浙南新电商发展论坛圆满落幕

9月26日&#xff0c;由商务部中国国际电子商务中心指导&#xff0c;浙江省商务厅等十个部门主办&#xff0c;浙江省电子商务促进中心、温州市商务局、苍南县人民政府承办的“之江创客”2023全球电子商务创业创新大赛跨境电商赛区决赛暨浙南新电商发展论坛在苍南圆满落幕。浙江省…

SpringBootCms

SpringBootCMS&#xff0c;极速开发&#xff0c;动态添加字段&#xff0c;自定义标签&#xff0c;动态创建数据库表并crud数据&#xff0c;数据库备份、还原&#xff0c;动态添加站点(多站点功能)&#xff0c;一键生成模板代码&#xff0c;让您轻松打造自己的独立网站&#xff…

【广州华锐互动】VR高层火灾应急疏散演练提供一种无风险的逃生体验

在科技进步的今天&#xff0c;我们已经能够利用虚拟现实&#xff08;VR&#xff09;技术来模拟各种紧急情况&#xff0c;其中就包括高楼火灾逃生。VR高层火灾应急疏散演练系统是一种新兴的技术&#xff0c;它使用虚拟现实环境来模拟高楼火灾的实际情况&#xff0c;为人们提供一…

诊断DLL——Visual Studio安装与dll使用

文章目录 Visual Studio安装一、DLL简介二、使用步骤1.新建VS DLL工程2.生成dll文件3.自定义函数然后新建一个function.h文件,声明这个函数。4.新建VS C++ console工程,动态引用DLL编写代码,调用dll三、extern "C" __declspec(dllexport)总结Visual Studio安装 官…

二十四、【参考素描三大面和五大调】

文章目录 三种色面(黑白灰)五种色调 这个可以参考素描对物体受光的理解&#xff1a;素描调子的基本规律与素描三大面五大调物体的明暗规律 三种色面(黑白灰) 如下图所示&#xff0c;我们可以看到光源是从亮面所对应的方向射过来的,所以我们去分析图形的时候&#xff0c;首先要…

【LVGL】SquareLine Studio入门基础操作

1.SquareLine Studio基础 在这篇文章中将介绍SquareLine Studio的基础操作、解释如何加载一个项目、布局结构。    启动软件后,可以加载之前的项目、创建项目、加载一个示例。    这里以打开示例audio_mixer为例,可以双击该项目打开或者选中该项目点击右下角的【创建】按…

算法|每日一题|只出现一次的数字|位运算

136.只出现一次的数字 力扣每日一题&#xff1a;136.只出现一次的数字 之前整理过本题及其扩展&#xff0c;详细说明了思路和做法&#xff0c;链接如下&#xff1a; 只出现一次的数字I&#xff0c;II&#xff0c;III 给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出…

JVM字节码指令详解

文章目录 前言一、JVM字节码指令概述1. 什么是JVM字节码指令&#xff1a;2. 字节码指令的作用&#xff1a;3. 字节码指令的分类&#xff1a; 二、字节码指令的种类1. 加载和存储指令2. 算术指令3. 类型转换指令4. 对象和数组操作指令5. 操作数栈管理指令6. 控制转移指令7. 方法…

git 如何删除本地分支且并没有完全合并到目标分支中

git 如何删除本地分支且并没有完全合并到目标分支中 确保你当前所在的分支不是dev_welc_share_permission分支&#xff0c;如果是的话&#xff0c;可以执行以下命令切换到其他分支&#xff08;比如master&#xff09;&#xff1a; git checkout master使用以下命令删除dev_s…

Android:事件分发机制(二)

这篇主要是第一篇回顾之后&#xff0c;补充一些上一篇没写到的两个点。 第一个的切入点是这个。【处理层叠的view&#xff0c;想要执行下一层的view的点击事件】其背后的原理。 处理层叠的view&#xff0c;要执行下一层的view的点击事件 我们知道&#xff0c;方法是将上一层的…

【LeetCode刷题(数据结构)】:另一颗树的子树

给你两棵二叉树 root 和 subRoot 检验 root 中是否包含和 subRoot 具有相同结构和节点值的子树。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 二叉树 tree 的一棵子树包括 tree 的某个节点和这个节点的所有后代节点。tree 也可以看做它自身的一棵子…

分享一个查询OpenAI Chatgpt key余额查询的工具网站

OpenAI Key 余额查询工具 欢迎使用 OpenAI Key 余额查询工具网站&#xff01;这个工具可以帮助您轻松地验证您的 OpenAI API 密钥&#xff0c;并查看您的余额。 http://tools.lbbit.top/check_key/ 什么是 OpenAI Key 余额查询工具&#xff1f; OpenAI Key 余额查询工具是一…
最新文章