亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

vue項目中怎么不用Echarts實現數據可視化圖表？下面本篇文章給大家介紹一下vue項目中，采用antv實現數據可視化圖表的方法，希望對大家有所幫助！

技術永無止盡，多看看不同風景

還在愉快的為移動端框架添磚加瓦中，主管就過來詢問我，能騰出一周時間做些其他事情嗎，我有些詫異，這種語氣。問了需要做什么嗎，原來是業務部門有個大數據圖表沒有多余的人做，需要我去支援一波，雖然有點拒絕，但主管發話了，只能安排。之前做可視化圖表都是用echarts，原因是第一次用的是它，后來就習慣了，基本上都能滿足自己的業務需求，對于文檔也比較熟悉，用的人也多，遇到問題就能快速的查到解決方案。有點不幸的是，這次客戶指名道姓只能采用阿里的antv，那我也就沒有第二個選擇了。【相關推薦：vuejs視頻教程】

對于antv沒有太多的接觸，在它剛開源的時候，有去觀摩一下，很炫酷，相比于echarts更加好看，不過那時文檔沒那么全，示例也不是特別多，時至今日再去看，已經很全面了，有多個不同場景系列，常用圖表的G2，數據關聯圖的G6，移動端可視化的F2，以及專注于地圖的L7，當然還有對于之前這些基礎圖表做進一層封裝的plot系類，比如@antv/g2plot、@antv/l7plot。這次的開發關于PC的，所以主要會涉及到G2，L7。在開發過程中的感受，使用起來挺簡單的，但是有些屬性設置文檔沒有，需要從例子中去查找，然后網上關于它使用的文章也比較少，沒有echarts那么多，可能需要自己會時間去文檔和示例中自己找尋答案。

面積圖

折線圖是經常使用并且比較容易的一種圖形，G2 中并沒有特定的圖表類型（柱狀圖、散點圖、折線圖等）的概念，用戶可以單獨繪制某一種類型的圖表，如餅圖，也可以繪制混合圖表，比如折線圖和柱狀圖的組合，折線圖和面積圖混合就可以實現如圖效果；

常用參數文檔

圖表

度量 scale

提示 tooltip

坐標系 axis

chart.line(options)

用于繪制折線圖、曲線圖、階梯線圖等。

chart.area(options)

用于繪制區域圖（面積圖）、層疊區域圖、區間區域圖等。

geom.position()

配置 position 通道映射規則

示例：

// 數據結構: [{ x: 'A', y: 10, color: 'red' }]
geom.position('x*y');

geom.color()

配置圖表顏色

// 基礎顏色設置
geom.color('#1890ff');
// 漸變
geom.color("l(90) 0:#0b83de 1:#0c1c2d")

geom.shape()

圖形相關設置，文檔上的說明不是很全，可以從圖表示例獲取相應信息

<template>
  <div id="container"></div>
</template>
<script>
import { Chart } from "@antv/g2";
export default {
  mounted() {
    // 數據源
    const data = [
      { time: "8/1", value: 240 },
      { time: "8/10", value: 600 },
      { time: "8/20", value: 350 },
      { time: "8/31", value: 470 },
    ];
    // 初始化圖表，列出圖表屬性
    const chart = new Chart({
      container: "container",
      autoFit: true,
      height: 276,
      padding: [100, 20, 30, 40],
    });
    // 圖表關聯數據chart.position()方法決定的，在下面有設置chart.position("time*value")
    // 前面為x軸，所以 time 為 x 軸， value 為 y 軸
    chart.data(data);
    // 度量
    // x，y軸坐標系是根據
    chart.scale({
      // y軸坐標系設置
      value: {
        min: 0,
        nice: true,
        alias: "用戶",
      },
      // x軸坐標系設置
      time: {
        range: [0, 1],
      },
    });
    // 提示信息
    chart.tooltip({
      // 是否顯示輔助線
      showCrosshairs: true,
      // 是否合并所有點展示
      shared: false,
    });
    // value 坐標系設置
    chart.axis("value", {
      grid: null,
      tickLine: null,
    });
    // time 坐標系設置
    chart.axis("time", {
      line: null,
      tickLine: null,
    });
    // 圖表繪制設置
    // 面積圖
    chart
      .area()
      .position("time*value")
      .color("l(90) 0:#0b83de 1:#0c1c2d")
      .shape("smooth");
    // 折線圖
    chart.line().position("time*value").color("#0b83de").shape("smooth");
    // 渲染圖表
    chart.render();
  },
};
</script>

柱狀圖

柱狀圖在日常數據分析中正常都會使用，也比較直觀，這邊我列了使用到的一些屬性，其他的跟上面的常用參數文檔是一致

數據標簽 label

chart.coordinate()

圖表坐標系設置

chart.interval(options)

用于繪制柱狀圖、直方圖、南丁格爾玫瑰圖、餅圖、條形環圖（玉缺圖）、漏斗圖等。

<template>
  <div id="container"></div>
</template>
<script>
import { Chart } from "@antv/g2";
export default {
  mounted() {
    // 數據源
    const data = [
      { type: "香蕉", value: 460 },
      { type: "蘋果", value: 600 },
      { type: "菠蘿", value: 390 },
      { type: "榴蓮", value: 205 },
    ];
    // 初始化圖表
    const chart = new Chart({
      container: "container",
      autoFit: true,
      height: 276,
      padding: [50, 60, 10, 60],
    });
    // 關聯數據
    chart.data(data);
    // 圖表關聯數據chart.position()方法決定的，在下面有設置chart.position("type*value")
    // 前面為x軸，所以 type 為 x 軸， value 為 y 軸
 
    // 設置 x 軸坐標系
    chart.axis("type", {
      grid: null,
      tickLine: null,
      line: null,
    });
    // 設置 y 軸坐標系
    chart.axis("value", {
      grid: null,
      label: null,
    });
    // 隱藏圖例
    chart.legend(false);
    // x，y 軸置換
    chart.coordinate().transpose();
    // chart.interval(options) 柱狀圖
    // geom.position() 配置 position 通道映射規則
    // geom.size 設置圖形大小
    // geom.color 設置圖形顏色
    // geom.label 數據標簽設置
    chart
      .interval()
      .position("type*value")
      .size(12)
      .color("#678ef2")
      .label("value", {
        style: {
          fill: "#8d8d8d",
        },
        offset: 10,
      });
    chart.interaction("element-active");
    // 渲染圖形
    chart.render();
  },
};
</script>

地圖

antv文檔對于地圖的描述不是特別全，比如地圖等級viewLevel、地圖邊界設置、地圖顏色配置，這些都要結合實例慢慢摸索，我實現了比較常用的中國地圖，包含toolTip，以及省的散點圖，只要修改地圖等級viewLevel，配合相應數據就能實現不同省市的散點圖了，大家可以舉一反三。

我這邊是采用@antv/l7plot，內部就分裝了地圖相關繪制，如果采用是@antv/l7，它主要是根據請求地圖路徑坐標數據請求繪制，數據也挺龐大的，會比較麻煩一些。

這邊就不放圖了，可以在Github運行查看

地圖容器配置項 map

地圖等級 viewLevel

<template>
  <div id="container"></div>
</template>
<script>
import { Choropleth } from "@antv/l7plot";
// 地圖數據
import data from "../data/userMap";
export default {
  mounted() {
    // 初始化地圖
    // eslint-disable-next-line no-unused-vars
    const map = new Choropleth("container", {
      // 地圖容器配置
      map: {
        type: "mapbox",
        style: "blank",
        center: [120.19382669582967, 30.258134],
        zoom: 3,
        pitch: 0,
        logo: false,
      },
      // 關聯數據
      source: {
        data: data,
        joinBy: { sourceField: "code" },
      },
      // 地圖等級
      viewLevel: {
        level: "country",
        adcode: 100000,
      },
      // 根據容器寬高自定義圖表
      autoFit: true,
      // 設置地圖顏色
      color: {
        field: "value",
        value: ["#B8E1FF", "#7DAAFF", "#3D76DD", "#0047A5", "#001D70"],
        scale: { type: "quantile" },
      },
      // 邊框
      chinaBorder: {
        // 國界
        national: null,
        // 爭議
        dispute: { color: "#ccc", width: 1, opacity: 0.8, dashArray: [2, 2] },
        // 海洋
        coast: { color: "#ccc", width: 0.7, opacity: 0.8 },
        // 港澳
        hkm: { color: "gray", width: 0.7, opacity: 0.8 },
      },
      // 邊界顏色
      style: {
        opacity: 1,
        stroke: "rgb(93,112,146)",
        lineWidth: 0.6,
        lineOpacity: 1,
      },
      // 數據標簽
      label: {
        visible: false,
      },
      // 選擇高亮
      state: {
        active: { stroke: "black", lineWidth: 1 },
      },
      // 提示
      tooltip: {
        inPlot: false,
        items: ["name", "code", "value"],
      },
    });
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 300px;
}
</style>

小結

如果你還沒了解antv，現在它應該進入你的視野了，他提供了很多炫酷的圖表，以及強大的圖表功能，就算現在用不到，下次做個嘗試也未嘗不可，可能你會喜歡上它，并且替換掉echarts。

就舉這些圖表例子了，文章相關的例子源碼也上傳到Github了。這次開發過程中，也是把antv文檔上上下下翻了好幾遍，對于使用方式以及屬性有一定的了解，如果你是剛剛要使用antv或者使用中遇到問題，可以評論區留言，共同成長，fighting~