vue+antv怎么实现折线图

本文小编为大家详细介绍"vue+antv怎么实现折线图"，内容详细，步骤清晰，细节处理妥当，希望这篇"vue+antv怎么实现折线图"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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

这是组件

读到这里，这篇"vue+antv怎么实现折线图"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。