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

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

实现效果
实现步骤

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

这是数据
这是组件

【vue+阿里的G2图表-antv+折线图实例】
vue阿里的G2图表-antv+折线图之前使用的图表是echarts+highcharts两个常用图表的，现在的话因为项目需要和别的原因也接触使用了阿里的g2图表，感觉效果还是挺好的，在这里分享下
官网入口

实现效果

文章图片

实现步骤
第一：安装插件

npm install @antv/g2 --save

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

.gcharts{width:100%; height:100%; }

第三：调用部分

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 } ],

这是组件

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