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

news/2024/11/14 0:03:36/

(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文件中,可添加自己需要的安装指令…