vue+阿里的G2图表-antv+折线图实例

目录

• vue阿里的G2图表-antv+折线图
• 实现效果
• 实现步骤
• antv g2柱状图与折线图混合使用
• 这是数据
• 这是组件 

vue阿里的G2图表-antv+折线图

之前使用的图表是echarts+highcharts两个常用图表的，现在的话因为项目需要和别的原因也接触使用了阿里的g2图表，感觉效果还是挺好的，在这里分享下

官网入口

实现效果

实现步骤

第一：安装插件

npm install @antv/g2 --save

第二：lineCharts.vue，注意，图表这类型的数据必须mouned赋值一次，watch监听到数据改变在赋值一次，因为这里绑定的数据传过来后并不会同时加载图表

第三：调用部分

import lineCharts from '@/components/gcharts/lineCharts'//g2绘图
components: {
    lineCharts,
  },
 
 
data () {
    return {
        lineData:[
                {year: '10/20',
                  value: 30
                }, {
                  year: '10/21',
                  value: 40
                }, {
                  year: '10/22',
                  value: 30.5
                }, {
                  year: '10/23',
                  value: 50
                }, {
                  year: '10/24',
                  value: 40.9
                }, {
                  year: '10/25',
                  value: 60
                }, {
                  year: '10/26',
                  value: 70
                }, {
                  year: '10/27',
                  value: 90
                }, {
                  year: '10/28',
                  value: 63
                }]
      
 
}}

antv g2柱状图与折线图混合使用

这是数据

data: [
 { time: '9:00-10:00', value: 30 , type: '曝光量', rate: 100 },
   { time: '10:00-11:00', value: 90, type: '曝光量', rate: 200 },
   { time: '11:00-12:00', value: 50, type: '点击量', rate: 300 },
   { time: '12:00-13:00', value: 30, type: '点击量', rate: 400 },
   { time: '13:00-14:00', value: 70, type: '点击量', rate: 500 }
 ],

这是组件 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。