官网入口

实现效果：

实现步骤：

第一：安装插件

npm install @antv/g2 --save

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

<template><div class="gcharts" :id="id"></div>
</template><script>
import G2 from '@antv/g2'
export default {data () {return {chart: null}},props: {charData: {type: Array,default: function () {return {data: []}}},id: String},// 如果使用serverData传过来的静态数据 请使用mounted()方法 并注释掉watchmounted () {this.drawChart()},// 监听API接口传过来的数据 使用watch// watch: {// charData: function (val, oldVal) {    // 监听charData，当发生变化时，触发这个回调函数绘制图表// console.log('new: %s, old: %s', val, oldVal);// this.drawChart(val);// }methods: {drawChart() {// 2019.03.30 更新 destory方法已被废弃// this.chart && this.chart.destory()this.chart = new G2.Chart({container: this.id,width: 1550,height: 425})this.chart.source(this.charData)this.chart.scale('value', {min: 0})this.chart.scale('year', {range: [0, 1]})this.chart.tooltip({crosshairs: {type: 'line'}})this.chart.line().position('year*value')this.chart.point().position('year*value').size(4).shape('circle').style({stroke: '#fff',lineWidth: 1})this.chart.render()}}
}
</script>
<style lang='less' scope>.gcharts{width:100%;height:100%;}
</style>

第三：调用部分

<lineCharts  :charData="lineData" :id="'chart1'"></lineCharts>

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

vue+阿里的G2图表-antv+折线图相关推荐

vue中使用echarts绘柱形图+折线图
一.完成后效果图二..vue文件完整代码 <template><divid="myMaxbar":style ...
java开源库生成折线图_Android HelloChart开源库图表之折线图的实例代码
前面我们介绍了开源图表库MPAndroidChart,请参考: 我们今天介绍的将是一个更为优秀的图表库,比MPAndroidChart性能更好,功能更完善,UI风格更美观,坐标轴更精细. 支持缩放.滑 ...
【JAVA - POI 合集】之 POI 操作word 图表,柱状图,折线图,雷达图,条形图 poi4.1.2
1.前言关于poi 操作word 的吐槽: 山路崎岖, 一言难尽啊!!! 原本项目中的poi 版本是3.17的版本,但是3.17对于在word 中操作图表是有问题的.所以对项目的jar 包进行了升级 ...
Vuejs2.X组件化-阿里的G2图表组件
前言 vue 的组件化开发是一个非常不错的机制.'一处开发,多处引用',不仅降低的维护成本,提高了开发效率,而且单独的组件有单独的视图和交互数据逻辑,使得系统层次更加分明.若有问题可加群2645910 ...
python读取excel画出饼状图_python操作Excel、openpyxl 之图表，折线图、饼图、柱状图等...
一.准备需要模块: from openpyxl.workbook import Workbook from openpyxl.chart import Series,LineChart, Refer ...
Echarts使用及动态加载图表数据折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度...我想应该够简洁了使用Echarts 目前,就官网的文 ...
visualmap折线图_四、制作图表(复杂折线图)
2.复杂折线图代码如下: var dom = document.getElementById("container"); var myChart = echarts.init(d ...
poi导出excel文件,并生成原生图表(包括折线图,柱状图,饼状图,面积图)
前段时间,因为客户需要,要做一个导出excel文件功能,并能生成原生的图表的(不是把图片插入到excel文档),找了很多文档看,也看了很多别人的代码,个人也总结了一下,不足之处,请各位大牛谅解. 需要 ...
android 大屏图表 MPAndroidChart 折线图曲线图柱状图圆角柱状图条形图
//图表库implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' X轴:XAxis Y轴:YAxis 图例:Legend 描述:Descri ...
第五章. 可视化数据分析图表—Seaborn图表（折线图，直方图，条形图，散点图）
第五章. 可视化数据分析图 5.7 Seaborn图表 Seaborn是一个基于Matplotlib的高级可视化效果库,偏向于统计图表,主要针对的是数据挖掘和机器学习中的变量特征选取,相比Matplo ...

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

前言：

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

官网入口

实现效果：

实现步骤：

第一：安装插件

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

第三：调用部分

vue+阿里的G2图表-antv+折线图相关推荐

最新文章

热门文章