antv g2plot可视化图表在vue中的使用之二：绘制折线图条形图柱状图

运行程序npm run serve修改首页绘制图型修改图例替换背景修改动效点击跳转

Darren.P

7108人浏览 · 2020-09-21 10:27:45

Darren.P · 2020-09-21 10:27:45 发布

文章目录

简介
运行程序
修改页面
绘制图型
效果展示
参考资料

简介

本文继续前一节内容，在vue create命令创建的项目中进行可视化图表绘制。
需要注意使用vue create创建时选择手动方式"Mannually select features",具体可参照《NodeJs+Vue+Element UI+Antd+Antv全栈开发可视化后台管理系统之一：搭建前端框架》《antv g2plot可视化图表在vue中的使用之一：环境搭建》

运行程序

上一节使用vue create创建好项目cd antv-g2-admin，也引入了Antd和Antv的g2plot，直接运行程序

cd antv-g2-admin
npm run serve

打开浏览器输入http://localhost:8080/，可看到Vue的官网示例首页
在这里插入图片描述

修改页面

本文在vue create创建的原始项目中进行修改，达到效果如下图，也可以使用前一篇文章的开源框架模板基础上进行开发。
在这里插入图片描述

修改main.js

首先需要import Antd和import ‘ant-design-vue/dist/antd.css’

//src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false
Vue.use(Antd)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

修改路由页index.js

此页面为路由页，页面跳转等需要在此配置，先配置三个页面的跳转，Line.vue、Bar.vue和Column.vue，分别为折线图、条形图和柱状图。

//src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Line from '../views/Line.vue'
import Bar from '../views/Bar.vue'
import Column from '../views/Column.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/charts/line',
    name: 'Line',
    component: Line
  },
  {
    path: '/charts/bar',
    name: 'Bar',
    component: Bar
  },
  {
    path: '/charts/column',
    name: 'Column',
    component: Column
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

修改App.vue

此页面为首页入口页，本文使用Ant Design Vue中的布局，使用最后一种侧边布局进行改造。
（https://www.antdv.com/components/layout-cn/）
在这里插入图片描述
对官网示例的代码进行改造如下：

//src/App.vue
<template>
  <a-layout id="components-layout-demo-side" style="min-height: 100vh">
    <a-layout-sider v-model="collapsed" collapsible>
      <div class="logo" />
      <a-menu router theme="dark" :default-selected-keys="['1']" mode="inline">
        <a-menu-item key="1">
          <router-link :to="{path: '/'}">
          <a-icon type="desktop" />
          首页
          </router-link>
        </a-menu-item>
        <a-sub-menu key="2">
          <span slot="title"><a-icon type="pie-chart" /><span>可视化图表</span></span>
          <a-menu-item key="3">
            <router-link :to="{path: '/charts/line'}"/>
            折线图
          </a-menu-item>
          <a-menu-item key="4">
            <router-link :to="{path: '/charts/bar'}"/>
            条形图
          </a-menu-item>
          <a-menu-item key="5">
            <router-link :to="{path: '/charts/column'}"/>
            柱状图
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0" />
      <a-layout-content style="margin: 0 16px">
         <router-view></router-view>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
    };
  },
};
</script>

<style>
#components-layout-demo-side .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>

其中router-link配置的路径跟index.js中的路径相对应，用于页面路由跳转。

绘制图型

在/src/views文件夹下新建Line.vue、Bar.vue、Column.vue。

折线图Line.vue

//src/views/Line.vue
<template>
    <div id="linechart"></div>
</template>
<script>
import { Line } from '@antv/g2plot'
export default {
    mounted () {
    const data = [
      { 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 },
    ];

    const linePlot = new Line('linechart', {
      title: {
        visible: true,
        text: '折线图',
      },
      description: {
        visible: true,
        text: '用平滑的曲线代替折线。',
      },
      data,
      xField: 'year',
      yField: 'value',
    });

    linePlot.render();
  }
}
</script>

其中const linePlot = new Line(‘linechart’, 用于生成图表实例，linechart跟<div>标签中的id相对应，指定图表绘制的位置。
linePlot.render();此行非常重要，用于渲染图表，一定不能忘记render()。
具体可以查看g2plot的API文档https://g2plot.antv.vision/zh/docs/manual/plots/line

条形图Bar.vue

//src/views/Bar.vue
<template>
    <div id="barchart"></div>
</template>
<script>
import { Bar } from '@antv/g2plot'
export default {
    // ...
    mounted () {
    const data = [
      { year: '1951 年', sales: 38 },
      { year: '1952 年', sales: 52 },
      { year: '1956 年', sales: 61 },
      { year: '1957 年', sales: 145 },
      { year: '1958 年', sales: 48 }
    ]

    const barPlot = new Bar('barchart', {
      title: {
        visible: true,
        text: '基础条形图',
      },
      data,
      xField: 'sales',
      yField: 'year',
      colorField: 'year'
    })

    barPlot.render()
  }
}
</script>

柱状图Column.vue

//src/views/Bar.vue
<template>
    <div id="columnchart"></div>
</template>
<script>
import { Column  } from '@antv/g2plot'
export default {
    mounted () {
    const data = [
      {
        type: '家具家电',
        sales: 38,
      },
      {
        type: '粮油副食',
        sales: 52,
      },
      {
        type: '生鲜水果',
        sales: 61,
      },
      {
        type: '美容洗护',
        sales: 145,
      },
      {
        type: '母婴用品',
        sales: 48,
      },
      {
        type: '进口食品',
        sales: 38,
      },
      {
        type: '食品饮料',
        sales: 38,
      },
      {
        type: '家庭清洁',
        sales: 38,
      },
    ];

    const columnPlot = new Column('columnchart',{
      title: {
        visible: true,
        text: '基础柱状图',
      },
      forceFit: true,
      padding: 'auto',
      data,
      xField: 'type',
      yField: 'sales',
      meta: {
        type: {
          alias: '类别',
        },
        sales: {
          alias: '销售额(万)',
        },
      },
    });
    
    columnPlot.render();
    }
}

</script>

效果展示

完成上述页面后重新运行程序

cd antv-g2-admin
npm run serve

页面效果如下:

在这里插入图片描述

参考资料

https://g2plot.antv.vision/zh/docs/manual/getting-started
https://www.itshutong.com/articles/499/vue-introduces-g2-plot vue 引入 g2plot
https://www.xiaoxustudent.top/p/370 Antv 挺好用，随手写笔记，在Vue中用Antv G2

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^