AntV G2 饼图

import { Chart } from '@antv/g2';const data = [{ type: '1岁', value: 340 },{ type: '2岁', value: 530 },{ type: '3岁', value: 620 },{ type: '4岁', value: 470 },{ type: '5岁', value: 190 },
];const chart = new Chart({container: 'container',autoFit: true,
});chart.data(data);chart.coordinate('theta');const interval = chart.interval().adjust('stack').position('value').color('type', ['#063d8a', '#1770d6', '#47abfc', '#38c060','green']).label('type', (val) => {return {offset: -30,content: (obj) => {return obj.type + '\n' + obj.value;},};});chart.render();

官方文档

AntV G2 饼图相关推荐

antvg2 环图轮播_在vue项目中引用Antv G2,以饼图为例讲解
我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: js部分: //引入G2组件 import G2 from "@a ...
基于AntV G2实现一个通用可视化Vue插件
前言 AntV G2坚持自然.确定性.意义感.生长性的设计价值观.与其他可视化插件不同的是,G2是以数据驱动的高交互可视化图形语法,具有高度的易用性和可扩展性. 随着业务可视化不断发展,数据复杂度越来 ...
antv g2 x轴两边留边距
antv g2 x轴两边留边距问题背景:在做vue项目时,需要用到-蚂蚁数据可视化antv做数据图表. 问题: 图表的内容超出了x轴的边缘这个问题看了很久,网上的解释很少,最后还是看文档终于找到了 ...
antv g2绘制中国地图及每个省份区域单独展示
使用技术: antv g2 地图文件:https://gw.alipayobjects.com/os/antvdemo/assets/data/china-provinces.geo.json 该文件 ...
antv g2字体阴影_antv g2坐标轴文字过长时添加省略号，悬浮显示全部
antv g2坐标轴文字过长时添加省略号,悬浮显示全部示例改编自antv基础条形图 https://g2.antv.vision/zh/examples/bar/basic#basic import ...
Vue使用antV G2简单实例
工作中需要制作一个看板,选型选用antV G2进行开发. 由于项目前端是使用Vue,于是研究了antVG2在Vue中的使用. 1.安装antv/g2 在WebStrom下面Terminal中输入 np ...
antv g2字体阴影_antv g2的理解总结
G2 G2本身是一门图形语法,G2和传统的图表系统(HighCharts,ACharts等)不同,G2是一个基于统计分析的语义化数据可视化系统.它真正做到了让数据驱动图形,让你在使用它时候不用关心绘图 ...
antv/G2 v4使用遇坑之旅
1. 当container中指定是这个容器的id名时,如果要复用这个组件,那么会在当前id下创建多个一样的图表组件,且样式会乱掉.因为指明了当前id. 解决方案:改用refs去指定即可. this.c ...
可转债列表页与日频交易数据呈现：fastapi+antV G2
百天计划之第36篇,关于"AI量化智能投研平台"建设. 目标可以很大,行动要聚焦且具体. 把一件件小事做成,做出价值点就可以了. 好奇心可以很重,也可以探索很多新鲜的知识,但需要围 ...

AntV G2 饼图

AntV G2 饼图相关推荐

最新文章

热门文章