大数据可视化管理antV使用详解

首先给大家看看官网的图表是不是眼花缭乱,不要怕接下来我将会给小白同学一步步解开antv的神秘面纱
目录

  1. 安装antV
  2. 第一个antV组件
  3. 关于自定义antV图标的一些样式
  4. 关于常用的api介绍
  5. 五字真言

在这里插入图片描述
在这里插入图片描述
1.首先在项目中引入antv

npm install @antv/g2 --save

2.开始书写你的图标组件

import {Chart} from '@antv/g2'
export default {
    data(){
        return{
            data:[
                    { 活动名称: '其他', 活动数量: 45 ,参与人数:1687},
                    { 活动名称: '春栗劳育计划', 活动数量: 38 ,参与人数:40},
                    { 活动名称: '多彩青春计划', 活动数量: 53,参与人数:1755},
                    { 活动名称: '红色筑梦计划', 活动数量: 28 ,参与人数:14753},
                    { 活动名称: '经典阅读计划', 活动数量: 15 ,参与人数:30},
                    { 活动名称: '全球胜任力计划', 活动数量: 38 ,参与人数:73},
                    { 活动名称: '师长领航计划', 活动数量: 38 ,参与人数:62},
                    { 活动名称: '双创引领计划', 活动数量: 38 ,参与人数:0},
                    { 活动名称: '先锋论坛计划', 活动数量: 38 ,参与人数:0},
            ]
        }
    },
    methods:{
        createChart(){
            const chart = new Chart({
                container: 'container',
                autoFit: true,
                height: 500,
            });

            chart.data(this.data);
            chart.tooltip({
            // showMarkers: false
            });
            chart.interval().position('活动名称*活动数量')
            chart.axis('活动名称',{
                label:{
                    style:{
                        fill:'black'
                    }
                }
            })
            chart.legend({
            items: [
                { name: '活动数量', value: '活动数量', marker: { symbol: 'square', style: { fill: '#00FFEE', r: 5 } } },
                { name: '参与人数', value: '参与人数', marker: { symbol: 'square', style: { fill: '#FF5DE4', r: 5 } } },
            ],
            });
            chart.render();
        }
    },
    mounted(){
       this.createChart() 
    }
}
</script>

这是一个简单的条形图组件,当然主要目的是为了让大家看清楚,我们应该在vue项目中如何使用

  • 首先使用import 引入Chart
  • 在data中书写你图表索要渲染的数据,当让我这里使用的自定义的数据,在实际开发中数据大多是后端返回的
  • 在methods:{}对象中书写我们绘制图表的函数
  • 在mouted()钩子函数中渲染数据

3.实际开发过程中我们前端是要根据设计图来还原,那么图表状状体的宽度,颜色,label字体等等一些列样式如何改???

  • 改变柱状图的宽度使用

  • chart.interval().position('活动名称*活动数量').size('16')

  • 改变颜色

  • chart.interval().position('活动名称*活动数量').color('#00FFEE')

  • 设置X轴坐标文字的颜色样式fill,字体大小fontSize等;

  • chart.axis('活动名称',{ label:{ style:{ fill:'black' } } })

  • 改变图例的样式

  • chart.legend({ itemName:{ style:{ fill:'red', fontSize:16 } }, marker:{ style:{ r:5, } } })

4.antv 常用图表api介绍

  1. 柱状图:
 const chart = new Chart({
    container: 'container',//div容器的id
    autoFit: true,
    height: 500,//容器高度
});
 chart.data(this.data);//渲染数据
 chart.interval().position('x*y')//chart调用interval()和position()方法绘图
 chart.render();//完成数据的渲染

  1. 折线图
 const chart = new Chart({
    container: 'container',//div容器的id
    autoFit: true,
    height: 500,//容器高度
});
 chart.data(this.data);//渲染数据
 chart.line().position('x*y').shape('smooth')//chart调用line()和position()方法绘图,调用shape()方法之后会让折线变得平滑
 chart.render();//完成数据的渲染
  1. 面积图
chart.area().position('x*y').label('y').color('#FF5DE4').shape('smooth');
  1. 重新组合数据(有些数据不符合antV要求需要重新组合)
//比如获取到的数据是这样的
data:[
       { year: '第1月', 本学期活动数: 2, 上学期活动数: 11 },
       { year: '第2月', 本学期活动数: 6, 上学期活动数: 14 },
       { year: '第3月', 本学期活动数: 43, 上学期活动数: 41 },
       { year: '第4月', 本学期活动数: 17, 上学期活动数: 2 },
       { year: '第5月', 本学期活动数: 2, 上学期活动数: 0 }
 ]
npm install @antv/data-set --save//在项目中安装
import { DataView } from '@antv/data-set';//引入
const dv = new DataSet.DataView().source(this.data);//实例化对象
 dv.transform({
     type: 'fold',
     fields: ['上学期活动数', '本学期活动数'], // 展开字段集
     key: 'type', // key字段
     value: 'value', // value字段
 });
 //完成数据组合之后渲染数据
 chart.data(dv.rows);
 //这样就可以画出两条颜色不同的折线图实现效果
 chart.line().position('year*value').shape('smooth').label('value').color('type'['#00FFEE','#FF5DE4']);

5.心得“五字真言”

  • 看官方文档
展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值