大数据可视化管理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();//完成数据的渲染

2. 折线图

 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();//完成数据的渲染

3. 面积图

chart.area().position('x*y').label('y').color('#FF5DE4').shape('smooth');

4. 重新组合数据（有些数据不符合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.心得“五字真言”

• 看官方文档