Vue CLI + Ant Design Vue + AntV + Echarts

 

vue是一個很好用的前端框架，前端只管處理數據，其他的都不用操心。

使用vue來做后台管理應用是不錯的選擇。

 

一：創建vue項目，引入Ant Design Vue組件庫

官方文檔：

1. 安裝和初始化

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

　　2. 創建項目

vue create antd-demo

 

　　3.安裝 &引入 UI庫 

# npm i ant-design-vue 
# OR
# yarn add ant-design-vue

 

　　4. main.js （添加以下代碼）

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);

 

現在在頁面中已經可以使用antd的組件了~

舉個栗子，復制了一下步驟條的demo，效果如下：

 

 

 

　　5. 寫代碼過程中，如果覺得 EsLInt 比較麻煩，可以手動關閉

// vue.congig.js
module.exports = {
    lintOnSave: false
}

 

二、使用AntV的G2Plot組件庫

官方文檔：

　　1. 安裝UI組件庫

npm install @antv/g2plot --save

　　2. 在需要使用圖表的頁面中import該組件，然后就可以使用了

舉個栗子，復制了一下折線圖的demo，效果如下：

 

 

三、使用Echarts組件庫

官方文檔：

　　1.安裝Echarts依賴

npm install echarts --save

　　2. 在需要使用到該組件的頁面上引入組件

import echarts from "echarts";
require("echarts/lib/chart/bar"); // 引入柱狀圖

舉個栗子，復制了一下柱狀圖的demo，效果如下：　　

 

 

 

文中的demo代碼：

<template>
  <div>
    <div class="box">
      <p>Ant Design Vue</p>
      <a-steps :current="1">
        <a-step>
          <template slot="title">Finished</template>
          <span slot="description">This is a description.</span>
        </a-step>
        <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
        <a-step title="Waiting" description="This is a description." />
      </a-steps>
    </div>

    <div class="box">
      <p>AntV —— G2Plot</p>
      <div class="box1" id="canvas"></div>
    </div>

    <div class="box">
      <p>Echarts</p>
      <div class="box1" id="canvas2"></div>
    </div>
  </div>
</template>

<script>
import { Line } from "@antv/g2plot";
import echarts from "echarts";
require("echarts/lib/chart/bar");
export default {
  data() {
    return {
      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 },
      ],
    };
  },

  props: {},

  components: {},

  created() {},

  computed: {},

  mounted() {
    // G2Plot 折線圖初始化
    this.linePlot = new Line("canvas", {
      data: this.data,
      xField: "year",
      yField: "value",
    });

    this.linePlot.render();

    // Echarts 初始化
    this.myChart = echarts.init(document.getElementById("canvas2"));
    this.option = {
      title: {
        text: "ECharts 入門示例",
      },
      tooltip: {},
      xAxis: {
        data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
      },
      yAxis: {},
      series: [
        {
          name: "銷量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    this.myChart.setOption(this.option);
  },

  methods: {},
};
</script>
<style>
.box {
  margin: 20px auto;
  width: 800px;
  border: 1pxs solid gray;
  border-radius: 25px;
  box-shadow: 0 0 10px gray;
}
.box1 {
  margin: 0 auto;
  width: 800px;
  height: 500px;
}
</style>

 

第四篇隨筆。