简单说下antv图表的使用

<template>
//定义一个容器<div id="containerPie" style="height: 100%;width: 100%"></div>
</template><script>export default {name: "leftFirst",mounted() {this.initPie()},methods: {initPie() {//此处放复制的代码}  }
}
</script><style scoped></style>

举例：

<template><div  style="width: 100%;height:100%"><div style="width: 100%;height:10%"><span class="text">数据占比</span></div><div id="containerPie" style="height: 90%;width: 100%;padding: 2% 8% 2% 5%"></div></div></template><script>
import { Pie ,G2} from '@antv/g2plot';export default {name: "leftFirst",mounted() {this.initPie()},methods: {initPie() {const { registerTheme } = G2;registerTheme('custom-theme', {  //设置饼图的颜色 从上往下挨个取colors10: [   //分类颜色色板，分类个数小于 10 时使用'#2391FF','#21A97A','red','#2498D1','#BBBDE6','#4045B2','#007E99','#FFA8A8','#025DF4','#DB6BCF',],colors20: [   //分类颜色色板，分类个数大于 10 时使用'#025DF4','#DB6BCF','#2498D1','#BBBDE6','#4045B2','#21A97A','#FF745A','#007E99','#FFA8A8','#2391FF','#FFC328','#A0DC2C','#946DFF','#626681','#EB4185','#CD8150','#36BCCB','#327039','#803488','#83BC99',],});const data = [{ type: '总传输量', value: 50 },{ type: '总完成量', value: 30 },{ type: '故障量', value: 20 },];const piePlot = new Pie('containerPie', {appendPadding: 10, //距离边框的距离data,        //数据angleField: 'value',colorField: 'type',radius: 0.8,  //圆环的大小// 设置扇形样式   pieStyle 中的fill会覆盖 color 的配置，此处使用自定义主题pieStyle:{// fillOpacity: 1,    //图形的填充透明度stroke:'black',       //图形的描边lineWidth:0.6,        //图形描边的宽度lineOpacity:0,        //描边透明度opacity:0,            //图形的整体透明度lineDash: [4, 5],     //描边的虚线配置  ------strokeOpacity: 0.7,   //图形边框透明度shadowColor: 'black', //图形阴影颜色shadowBlur: 10,       //图形阴影的高斯模糊系数shadowOffsetX: 5,     //设置阴影距图形的水平距离shadowOffsetY: 5,     //设置阴影距图形的垂直距离// cursor: 'pointer'     //鼠标样式(pointer为小手)。同 css 的鼠标样式，默认 'default'。},//文本标签label: {type: 'outer',content: '{name} {percentage}',style: {fill: 'white', // 字体颜色opacity: 0.8,  //透明度// fontSize: 12, //字体大小},},//图例legend: {layout: 'vertical',  //horizontal | vertical  图例布局方式。提供横向布局和纵向布局// position: 'right',  //position   图例位置// selected: {    //点击方可显示该类的数据//   // 默认置灰//   故障量: false,// },//图例标题title: {text: '分类',spacing: 8,style: {fill: 'white', // 字体颜色opacity: 0.8,  //透明度// fontSize: 12, //字体大小},},//图例后面的文字itemName:{style: {fill: 'white', // 字体颜色opacity: 0.8,  //透明度// fontSize: 12, //字体大小},},//图例后面的文字后面显示的数据itemValue: {//数据的格式化formatter: (text, item) => {const items = data.filter((d) => d.type === item.value);return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-';},style: {fill: 'white', // 字体颜色opacity: 0.8,  //透明度// fontSize: 12, //字体大小},},},//提示信息tooltip:{},theme: 'custom-theme',interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],});piePlot.render();}}
}
</script><style scoped>
.text {height: 5%;width: 100%;position: absolute;left: 5%;top: 5%;transform: translate(0%,0%);
}
</style>

ps:有要修改的属性，例如图例、文本标签的颜色等，直接在所用图表页面右边的API中找，也可在总的API中找（举例中的分类颜色色板就是在API中搜饼图找到的）

简单说下antv图表的使用相关推荐

java调python 监控_利用Python实现一个简单的系统监控图表
作为运维人员,想必大家肯定都做过这样的事情:为了监控系统资源使用情况,开了若干个窗口,来回切换看输出: 只要我切得够快,性能异常点就逃不过我的眼睛! 这个时候你要是有个监控工具自然是很好的,例如我们美 ...
Example017简单的下拉框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
springdatajpa命名规则_简单了解下spring data jpa
公司准备搭建一个通用框架,以后项目就用统一一套框架了以前只是听过jpa,但是没有实际用过今天就来学习下一些简单的知识什么是JPA 全称Java Persistence API,可以通过注解或者X ...
【项目实战】多场景下的图表可视化表达
多场景下的图表可视化表达数据: 2016年奥运运动员数据,数据格式为xlsx,分3个sheet 1.分男女分别分析运动员的身高分布,并制作图表,数据为"奥运运动员数据.xlsx,sheet ...
html下拉折叠菜单,原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单 Gary_js实现简单的下拉折叠菜单 *{margin:0px; padding:0px;} #div1 {width:200px; margin:0 a ...
简单介绍下我使用了一年多还不知道的Sql server 2005 组件知识
简介 Microsoft SQL Server 2005 是用于大规模联机事务处理 (OLTP).数据仓库和电子商务应用的数据库平台:也是用于数据集成.分析和报表解决方案的商业智能平台. SQL Se ...
python网站设计理念_简单介绍下python Django框架的历史，设计理念及优势_Django讲解2...
简单介绍下python Django框架的历史,设计理念及优势 Django是一个高层次的 Python Web 框架,它是一个鼓励快速开发和干净,实用的框架设计.Django可以更容易地快速构建更好 ...
python删除文件夹中的jpg_Python简单删除目录下文件以及文件夹的方法
本文实例讲述了python简单删除目录下文件以及文件夹的方法.分享给大家供大家参考.具体如下: #!/usr/bin/env python import os import shutil fileli ...
JUST——简单转换下的JSON
目录介绍背景安装Nuget包使用代码使用JUST转换JSON valueof ifcondition 字符串和数学函数 Opearators 聚合函数多维数组的聚合函数批量函数数组循环 ...
【权限设计】一个案例，三个角色，简单说下B端产品的权限设计
入行以来也接触过一些B端产品,这些产品之中权限管理是重中之重,权限管理不仅仅是整个系统的一个小小的模块,它一直贯穿整个系统,从登陆到操作到最后的登出.说它相当的复杂真不为过. 对于权限,如果从控制力来 ...

简单说下antv图表的使用

简单说下antv图表的使用相关推荐

最新文章

热门文章