[vue]vue接入AntV G2Plot

文章目录

安装
配置
使用

安装

npm install @antv/g2plot --save

配置

在main.js中引入

import g2 from '@antv/g2plot'
Vue.prototype.$G2 = g2

使用

图表地址：https://g2plot.antv.vision/zh/examples/line/multiple#style-callback

<template><div id="container"></div>
</template>
<script>import { Line } from '@antv/g2plot'export default {data() {return {data: [{date: '2018/8/1',type: 'download',value: 4623,},{date: '2018/8/1',type: 'register',value: 2208,},{date: '2018/8/1',type: 'bill',value: 182,},{date: '2018/8/2',type: 'download',value: 6145,},{date: '2018/8/2',type: 'register',value: 2016,},{date: '2018/8/2',type: 'bill',value: 257,},{date: '2018/8/3',type: 'download',value: 508,},{date: '2018/8/3',type: 'register',value: 2916,},{date: '2018/8/3',type: 'bill',value: 289,},{date: '2018/8/4',type: 'download',value: 6268,},{date: '2018/8/4',type: 'register',value: 4512,},{date: '2018/8/4',type: 'bill',value: 428,},{date: '2018/8/5',type: 'download',value: 6411,},{date: '2018/8/5',type: 'register',value: 8281,},{date: '2018/8/5',type: 'bill',value: 619,},{date: '2018/8/6',type: 'download',value: 1890,},{date: '2018/8/6',type: 'register',value: 2008,},{date: '2018/8/6',type: 'bill',value: 87,},{date: '2018/8/7',type: 'download',value: 4251,},{date: '2018/8/7',type: 'register',value: 1963,},{date: '2018/8/7',type: 'bill',value: 706,},{date: '2018/8/8',type: 'download',value: 2978,},{date: '2018/8/8',type: 'register',value: 2367,},{date: '2018/8/8',type: 'bill',value: 387,},{date: '2018/8/9',type: 'download',value: 3880,},{date: '2018/8/9',type: 'register',value: 2956,},{date: '2018/8/9',type: 'bill',value: 488,},{date: '2018/8/10',type: 'download',value: 3606,},{date: '2018/8/10',type: 'register',value: 678,},{date: '2018/8/10',type: 'bill',value: 507,},{date: '2018/8/11',type: 'download',value: 4311,},{date: '2018/8/11',type: 'register',value: 3188,},{date: '2018/8/11',type: 'bill',value: 548,},{date: '2018/8/12',type: 'download',value: 4116,},{date: '2018/8/12',type: 'register',value: 3491,},{date: '2018/8/12',type: 'bill',value: 456,},{date: '2018/8/13',type: 'download',value: 6419,},{date: '2018/8/13',type: 'register',value: 2852,},{date: '2018/8/13',type: 'bill',value: 689,},{date: '2018/8/14',type: 'download',value: 1643,},{date: '2018/8/14',type: 'register',value: 4788,},{date: '2018/8/14',type: 'bill',value: 280,},{date: '2018/8/15',type: 'download',value: 445,},{date: '2018/8/15',type: 'register',value: 4319,},{date: '2018/8/15',type: 'bill',value: 176,},],}},mounted() {// var v = this// this.$nextTick(() => {//   v.drawChart()// })this.drawChart()},created() {},methods: {drawChart() {// Step 1: 创建 Chart 对象const line = new Line('container', {data: this.data,xField: 'date',yField: 'value',yAxis: {label: {// 数值格式化为千分位formatter: (v) =>`${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),},},seriesField: 'type',color: ({ type }) => {return type === 'register'? '#F4664A': type === 'download'? '#30BF78': '#FAAD14'},lineStyle: ({ type }) => {if (type === 'register') {return {lineDash: [4, 4],opacity: 1,}}return {opacity: 0.5,}},})line.render()},},}
</script>

[vue]vue接入AntV G2Plot相关推荐

antv g2plot可视化图表在vue中的使用之四：为图表添加事件
文章目录图表事件event g2plot升级仪表盘Gauge添加点击事件仪表盘类型仪表盘组成仪表盘事件其他参考资料图表事件event 我们经常会遇到为图表添加事件的需求,无论是对整个图 ...
Sentry For Vue 完整接入详解(2021 Sentry v21.8.x)前方高能预警！三万字，慎入！
内容源于:https://docs.sentry.io/platforms/javascript/guides/vue/ 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创 ...
vue项目接入腾讯im
vue项目接入腾讯im 查看文档先安装SDK依赖在项目脚本里引入模块添加监听事件用户登录发送消息查看文档首先贴上文档地址 https://cloud.tencent.com/docume ...
vue中使用Antv g6构建简单流程图
vue中使用Antv g6构建简单流程图前端小白第一次使用,项目需要一个流程图,看了一些博客,简单的写了一个,但是还是没实现项目的需求,希望有会的人帮忙指点一下.项目需要实现的是:可以自定义添加节点 ...
SkyWaking监控Vue前端接入浏览器配置教程
skywaking监控Vue前端接入浏览器配置步骤第一步引入插件安装愿意等同于anget npm install skywalking-client-js --save 第二步在main.js中 ...
vue require css html,requirejs vue vue.router简单框架
index.html 入口页面html> vue `menu`.`name` base.js requirejs 配置文件(function(){ requirejs.config({ ...
[vue] vue组件里的定时器要怎么销毁？
[vue] vue组件里的定时器要怎么销毁? const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器,在bef ...
[vue] vue组件会在什么时候下被销毁？
[vue] vue组件会在什么时候下被销毁? 页面关闭.路由跳转.v-if和改变key值个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌 ...
[vue] vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？
[vue] vue组件里写的原生addEventListeners监听事件,要手动去销毁吗?为什么? 需要,原生DOM事件必须要手动销毁,否则会造成内存泄漏个人简介我是歌谣,欢迎和大家一起交流前后 ...

[vue]vue接入AntV G2Plot

文章目录

安装

配置

使用

[vue]vue接入AntV G2Plot相关推荐

最新文章

热门文章