移动端/PC端适用在vue中使用 antv g2 实现竖向折线图上下xy值

zyj12138

于 2021-01-18 17:55:06 发布

阅读量756

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zyj12138/article/details/112789059

版权

本文介绍如何在Vue项目中利用antv G2库创建一个特殊的竖向折线图，其中X值显示在上方，Y值显示在下方，同时具备滚动功能。示例代码展示了一个接收特定数据格式的对象，并提供了React版本的实现方式。

摘要由CSDN通过智能技术生成

实现效果如图，上面X值，下面Y值，并且可滚动
在这里插入图片描述
首先我们父组件传过来是这样一个对象：

temData中我们需要这两个值，因为根据胶囊按钮选择了

源码：

<template>
	<div id="temChart" ref="chartRef" :style="{ height: '244px',width:'1203px', display: chartShow }"></div>
</template>

<script>
import {
    Chart } from '@antv/g2'
import F2 from '@antv/f2'

export default {
   
	name: 'TemCharts',
	data() {
   
		return {
   
			chartShow: 'none',
            allRight: 0,
            achart:null
		}
	},
	props: {
   

		chartsData: {
   
			type: Object,
		},
	},
	computed: {
   },
	mounted() {
   
		this.initChart()