G2Plot 开箱即用的图表库

定义图表插件

ChartDiscount.vue

<template><div id="ChartDiscount" ref="ChartDiscount"></div>
</template><script>
import { Line } from '@antv/g2plot'
export default {name: 'ChartDiscount',props: {value: {type: Array,default() {return []},},Height: {type: Number,default: 0,},},mounted() {this.initG2Plot()},methods: {initG2Plot() {const LinePlot = new Line(this.$refs.ChartDiscount, {//   const LinePlot = new Line('ChartDiscount', {data: this.value,height: this.Height,xField: 'year',yField: 'value',label: {},point: {size: 5,shape: 'diamond',style: {fill: 'white',stroke: '#5B8FF9',lineWidth: 2,},},tooltip: { showMarkers: false },state: {active: {style: {shadowBlur: 4,stroke: '#000',fill: 'red',},},},interactions: [{ type: 'marker-active' }],})LinePlot.render()},},
}
</script>

注意

id = 'ChartDiscount';
ref = 'ChartDiscount'

const LinePlot = new Line(this.$refs.ChartDiscount, {}) // 页面复用使用ref
OR
const LinePlot = new Line('ChartDiscount', {}) // 页面复用会出问题 id重复

导出

index.js

// pro components
import Waterfall from '@/components/Charts/Waterfall';
import ChartDiscount from '@/components/Charts/ChartDiscount';
export {Waterfall,ChartDiscount,
}

使用

antv.vue

<template><page-header-wrapper content="数据图表"><a-row :gutter="20"><a-col :sm="24" :md="12" :xl="10"><a-card :bordered="false" hoverable title="排行榜"><ChartDiscount :value="ChartDiscountData" :Height="250" /></a-card></a-col><a-col :sm="24" :md="12" :xl="14"><a-card :bordered="false" hoverable title="每月收支情况"><ChartDiscount :value="ChartDiscountData2" :Height="250" /><!-- <Waterfall :value="WaterfallData" :Height="250"></Waterfall> --></a-card></a-col></a-row></page-header-wrapper>
</template><script>
import { ChartDiscount, Waterfall } from '@/components'
export default {name: 'Antv',components: {ChartDiscount,Waterfall,},data() {return {loading: false,ChartDiscountData: [{ year: '1991', value: 3 },{ year: '1992', value: 4 },{ year: '1993', value: 3.5 },{ year: '1994', value: 5 },{ year: '1995', value: 4.9 },{ year: '1996', value: 6 },{ year: '1997', value: 7 },{ year: '1998', value: 9 },{ year: '1999', value: 13 },],ChartDiscountData2: [{ year: '2000', value: 13 },{ year: '2001', value: 14 },{ year: '2002', value: 13.5 },{ year: '2003', value: 15 },{ year: '2004', value: 14.9 },{ year: '2005', value: 16 },{ year: '2006', value: 7 },{ year: '2007', value: 19 },{ year: '2008', value: 13 },],WaterfallData: [{ type: '日用品', money: 680 },{ type: '伙食费', money: 900 },{ type: '交通费', money: 430 },{ type: '水电费', money: 360 },{ type: '房租', money: 1200 },{ type: '商场消费', money: 1000 },{ type: '红包收入', money: -2000 },],}},
}
</script><style lang="less" scoped>
span {font-size: 20px;color: red;
}
</style>

antv | G2Plot 数据可视化图表库-案例相关推荐

java——插件echarts数据可视化图表库
插件echarts数据可视化图表库一.使用idea创建javaWeb工程二.下载echarts导入js文件三.使用echarts. 特别鸣谢:感谢林老师传授嘿嘿嘿 -------- 创作不易, ...
layui导入模板数据_数据可视化图表教程echarts，第一讲
1 我们写web项目,展示数据的地方,可能会使用到图表.今天就讲这个玩意. 本教程暂时定为三讲:(随后情况,如果有新的研究,会有所更新!) 第一讲饼图的使用第二讲柱状图的使用第三讲拆 ...
Vue项目引入Echarts可视化图表库教程踩坑
Apache ECharts是一个基于 JavaScript 的开源可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ...
echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
web常用通用组件+Axure后台管理系统框架模板+大屏数据可视化元件库+智慧社区管理系统大屏+图表组件+表单组合+智慧数据看板+通用大屏图表原件库+电脑端常用组件
作品介绍:web常用通用组件+Axure后台管理系统框架模板+大屏数据可视化元件库+智慧社区管理系统大屏+图表组件+表单组合+智慧数据看板+通用大屏图表原件库+电脑端常用组件 Axure原型演示及下载 ...
python动态交互图表_Python 调用 matplotlib 实现交互式数据可视化图表案例
交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...
Antv | 蚂蚁数据可视化API应用
HTML5 图表API应用学习 1. 浏览器中使用方法 2. 项目中使用方法 G2Plot 是一套简单.易用.并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,"G2Plo ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
数据可视化——图表类型选择
目录图表类型选择的依据图表的功能性总结图表类型总结比较类柱状图和柱状图变体气泡图色块图雷达图漏斗图 K线图词云图子弹图分布类箱形图(盒须图.盒式图.箱线图) 气泡图色 ...
axure图表_最好用的数据可视化图表制作工具推荐
数据可是化在我们日常生活中越来越重要了,所以很多场合场景都需要通过可视化的一些数据来展示场景效果,那么这些可视化图表如何制作呢? 其实制作可视化图表是比较简单的,完全可以通过工具实现,下面小编给大家介 ...

antv | G2Plot 数据可视化图表库-案例

G2Plot 开箱即用的图表库

定义图表插件

注意

导出

使用

antv | G2Plot 数据可视化图表库-案例相关推荐

最新文章

热门文章