首页 > 其他分享 >vue2实现饼图Pie组件封装

vue2实现饼图Pie组件封装

时间:2023-04-27 17:12:13浏览次数:48  
标签:index 封装 name color Pie item let vue2 data

实现如下效果:

 如果不会请移步到官网的栗子,请点击查看

直接给大家上代码:

  • 整体代码片段
 1 <template>
 2     <div ref="echarts" style="width: 100%; height:300px;"></div>
 3 </template>
 4 <script>
 5 /* eslint-disable */
 6 import { setPieOption } from "@/util/pieConfig";
 7  
 8 export default {
 9     name: 'PieDom',
10     props: ["categoryList"],
11     data() {
12         return {}
13     },
14     mounted() {
15         this.$nextTick(() => {
16             this.loadBars();
17         });
18     },
19     methods: {
20         loadBars() {
21             this.$nextTick(function () {
22                 let myChart = this.$echarts.init(this.$refs.echarts) // 绘制图表
23                 let text = "聚类各项占比";
24                 let data = this.categoryList;
25                 data.map(item => {
26                     let _index = +item.name + 1;
27                     item.index = item.name;
28                     item.name = '类别' + _index;
29                     return item;
30                 });
31                 let option = setPieOption(text, data);
32  
33                 // 使用刚指定的配置项和数据显示图表。
34                 myChart.setOption(option);
35                 window.addEventListener('resize', function () {
36                     setTimeout(function () {
37                         myChart.resize();
38                     }, 200)
39                 });
40             });
41         }
42     }
43 }
44 </script>
View Code

部分代码片段,pieConfig.js

  1 import color from '@/util/colorConfig.js';
  2 
  3 // 饼图
  4 export const setPieOption = (text, data) => {
  5     let newColor = [];
  6     data.map((item, index) => {
  7         newColor[index] = color[item.index];
  8     });
  9 
 10     let option = {
 11         title: {
 12             show: false,
 13             text,
 14             textStyle: {
 15                 color: '#666',
 16                 fontSize: 16,
 17                 fontWeight: 'normal',
 18                 top: '0',
 19                 left: '30%'
 20             }
 21         },
 22         tooltip: {
 23             trigger: 'item'
 24         },
 25         legend: {
 26             type: 'scroll',
 27             orient: 'vertical',
 28             right: 0,
 29             align: 'auto',
 30             top: 'center',
 31             itemHeight: 8,
 32             itemWidth: 8,
 33             itemGap: 20,
 34 
 35             icon: 'circle',
 36             textStyle: {
 37                 padding: [4, 0],
 38                 rich: {
 39                     a: {
 40                         fontSize: 14,
 41                         width: 'auto'
 42                         // minWidth: '100'
 43                     },
 44                     b: {
 45                         fontSize: 12,
 46                         width: 3,
 47                         color: '#ccc'
 48                     },
 49                     c: {
 50                         fontSize: 14,
 51                         width: 50,
 52                         color: '#ccc'
 53                     },
 54                     d: {
 55                         fontSize: 14,
 56                         width: 40
 57                     }
 58                 }
 59             },
 60             formatter: function (params) {
 61                 // 添加
 62                 let _index,
 63                     total = 0;
 64                 data.forEach((item, index) => {
 65                     total += item.value;
 66                     if (item.name == params) {
 67                         _index = index;
 68                     }
 69                 });
 70                 let a = params.length < 15 ? params : params.slice(0, 15) + '...';
 71                 let arr = [
 72                     '{a|' + a + '}',
 73                     '{b|' + '|}',
 74                     '{c|' + ((data[_index].value / total) * 100).toFixed(0) + '%}',
 75                     '{d|' + data[_index]?.value + '条}'
 76                 ];
 77                 return arr.join('  ');
 78             }
 79         },
 80         color: newColor,
 81         series: [
 82             {
 83                 // name: 'Access From',
 84                 type: 'pie',
 85                 radius: '70%',
 86                 center: ['20%', '50%'],
 87                 avoidLabelOverlap: false,
 88                 label: {
 89                     show: false,
 90                     position: 'center'
 91                 },
 92                 labelLine: {
 93                     show: false
 94                 },
 95                 data,
 96                 itemStyle: {
 97                     borderRadius: 0,
 98                     borderColor: '#fff',
 99                     borderWidth: 2,
100                     emphasis: {
101                         shadowBlur: 10,
102                         shadowOffsetX: 0,
103                         shadowColor: 'rgba(0, 2, 2, 0.3)'
104                     }
105                 }
106             }
107         ]
108     };
109     return option;
110 };
View Code

颜色配置代码片段,colorConfig.js

 

 

 

鉴定完毕,欢迎友们一起交流学习!!

 

标签:index,封装,name,color,Pie,item,let,vue2,data
From: https://www.cnblogs.com/liushihong21/p/17359459.html

相关文章

  • 基于chatGPT的问答机器人开发-qdrant向量数据库的集合功能封装
    之前一直再开发基于GPT的问答知识库机器人,主要是靠qdrant的向量搜索,搜索出相关的条目,然后发送给GPT回答qdrant向量数据库有集合的概念,相当于表,每个集合里面可以创建多个向量数据。那么针对集合的操作就是下面这样的,集合列表,创建集合,删除集合 集合列表接口:http://127.0.0.1:80......
  • vue2 input防抖功能
    1.在el-input绑定@input事件 2.在data中定义timer为null 3.在methods中定义@input绑定的方法 4.在setTimeout中调用对应处理的方法<el-inputstyle="width:140px;color:#FF8900"size="small"v-model="singleDiscountForm.discount"@input="inputDis......
  • Vue项目的网络请求代理到封装详细步骤
    1.创建vue项目vuecreatedemodemo是项目名称2.安装axios 进入demo里面打开终端(黑窗口),执行npminstallaxios3.进行config.js配置devServer:{host:"0.0.0.0",//是否可以被覆盖port:8090,//配置本地端口号open:true,//解决跨域问题......
  • 安装多个NodeJS windows上安装多个Nodejs版本 解决vue2/vue3同时运行
    第一步下载nvm-windowsnvm-windows下载地址:Github最新下载地址进入之后直接下载第二步安装NVM注意路径一定不要包含空格中文否则会报错注意安装路径一定不要包含空格中文否则会报错 点击安装之后如果之前安装了nodejs的话会提示希望nvm管理已安装node版本吗点击是......
  • vue2与vue3的区别
    一.vue2和vue3双向数据绑定原理发生了改变vue2的双向数据绑定是利用ES5的一个APIObject.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。vue3中使用了es6的ProxyAPI对数据代理。相比于vue2.x,使用proxy的优势如下defineProperty只能监听某个属性,不......
  • ts简易网络请求封装
    utils/axios/type/axios.tsexporttypeErrorMessageMode="none"|"modal"|"message"|undefined;exportinterfaceRequestOptions{//SplicingrequestparameterstourljoinParamsToUrl?:boolean;//Formatrequestpa......
  • android:Retrofit2网络请求封装
    原文地址blog.csdn.netRetrofit使用=================================================================================Retrofit是一个网络请求框架,先来说一下怎么使用网络权限(添加到AndroidManifest.xml)<uses-permissionandroid:/>gradle依赖(添加到build.gra......
  • DataStore 封装
    原文地址www.learnfk.com之前ContentProvider,Room,DataStore一起弄,对于蒟蒻我来说步子迈得太大了,bug满天飞(DataStore一直给我报错说同时打开了多个DataStore,却又找不到问题所在),遂不得不暂且抛下DataStore换回SharedPreference,后来才发现是被Hook应用在启动的时候,LSPosed检测......
  • P.25-设置资源所需权限、P.26-封装权限信息、P.27-RBAC权限模型
    P.25-设置资源所需权限SpringSecurity为我们提供了基于注解的权限控制方案,这也是我们项目中主要采用的方式。我们可以使用注解去指定访问对应的资源所需的权限。但是要使用它我们需要先开启相关配置springSecurity里面加。@EnableGlobalMethodSecurity(prePo......
  • vue2项目中调取登录接口登录以后获取个人信息以后,储存在哪里,怎么在不同的页面展示想
    在Vue2项目中,可以将个人信息存储在Vuex状态管理中或者浏览器的本地存储中,具体取决于项目的需求和规模。1.Vuex状态管理在Vuex中定义一个user模块,用于存储用户信息,可以在登录成功后将用户信息存储到该模块中。```javascript//store/user.jsconststate={userInfo:null}......