vue+antv がデータ視覚化チャートを実装する方法について話しましょう

vueプロジェクトに Echart を使用せずにデータ視覚化チャートを実装するにはどうすればよいですか?次の記事では、antv を使用して Vue プロジェクトにデータ視覚化チャートを実装する方法を紹介します。

テクノロジーに終わりはありません、もっと違う景色を見ましょう

それでも喜んでモバイル フレームワークにレンガやタイルを追加していきます、監督者 彼は来ました「他のことをするために一週間時間を割いてもらえませんか？」と私に尋ねたので、この口調には少し驚きました。 「どうすればいいの？と聞いてみると、事業部にはビッグデータのグラフがあり、それを行う人員が足りないことが判明しました。私がサポートする必要がありました。少し断られましたが、上司が話してくれたので、私にはできることしかできませんでした」それをアレンジ。私はビジュアル チャートを作成するときに echarts を使用していました。その理由は、初めて使用しましたが、その後慣れたからです。基本的にビジネス ニーズを満たすことができます。また、文書を作成するだけでなく、使用者もその文書に精通しているため、問題が発生した場合でもすぐに解決策を見つけることができます。少し残念ですが、今回のお客様は名前を付けるときに Ali の antv しか使用できないため、他に選択肢はありません。 [関連する推奨事項: vuejs ビデオ チュートリアル ]

私は antv とはあまり関わりがありません。これが最初にオープンソースだったときに、見に行きました。非常にクールでした。echarts と比較すると、より美しいですが、当時はドキュメントがそれほど完全ではなく、サンプルもあまりありませんでした。今見ると、すでに非常に包括的になっています。複数の異なるシナリオと一般的に使用されるグラフG2、##G2、##G6 (データ関連付け図用)、F2 (モバイル ビジュアライゼーション用)、L7 (以下に焦点を当てる)マップ、そしてもちろん前のマップ 基本的なチャートは、@antv/g2plot、@antv/l7plot などのカプセル化されたプロット クラスのレイヤーに作成されます。この開発は PC に関するものなので、主に G2 と L7 が関与します。開発プロセス中に感じたのは、使い方は非常に簡単ですが、一部のプロパティ設定が文書化されていないため、例から見つける必要があるということです。それから、インターネット上でその使用法に関する記事は比較的少なく、## ほど多くはありません。 #echarts、おそらくドキュメントや例から自分で答えを見つけるには時間がかかります。

面グラフ

折れ線グラフは頻繁に使用され、比較的簡単なグラフです。G2 には特定のグラフの種類 (棒グラフ、散布図、折れ線グラフ、グラフ、など）のコンセプトにより、ユーザーは円グラフなどの特定のタイプのグラフを単独で描画したり、折れ線グラフと縦棒グラフの組み合わせ、折れ線グラフと面グラフの混合などの混合グラフを描画したりできます。示されている効果を達成するためのチャート;

共通パラメータのドキュメント

Chart

属性説明タイプデフォルト値#コンテナautoFit#falsewidthグラフの幅number-グラフの高さグラフのパディング測定スケール

指定 チャートによって描画される DOM については、DOM ID を渡すか、DOM インスタンスを直接渡すことができます	string | HTMLElement	-
グラフがコンテナの幅と高さに適応するかどうか。ユーザーが高さを設定した場合は、ユーザーが設定した高さが優先されます。	boolean
			##height
number	-		パディング
'auto'|number |number[]	'auto'

プロパティ説明 min対応する座標系の最小値を設定します Set対応する座標系の最小値座標系の描画範囲は通常、変更する必要はありません表示エイリアスデータ フィールド。通常は、フィールドの対応する中国語名を設定するために使用されます。自動調整min と maxプロンプト ツールチップ

タイプ	デフォルト値
any	-		max
any	-		range
[number,number]	[0, 1]		alias
string	-		nice
boolean	false

##属性

説明タイプデフォルト値showTitleツールチップのタイトルを表示するかどうかbooleanfalsesharedtrueは、対応するすべてのデータをマージすることを意味しますfalse は、現在のポイントに最も近いデータ コンテンツのみを表示することを意味します。 booleanfalse showCrosshairsツールチップの補助線を表示するかどうか。 ブール値false

座標系軸

#line 座標軸の設定項目、null は表示しないことを意味します null | object -tickLine 座標軸目盛り線の設定項目、null は表示しないことを意味します null | object -grid 座標軸グリッド線の設定項目、null は表示しないことを意味します null | object-

属性	説明	タイプ	デフォルト値

chart.line(options)

折れ線グラフ、曲線グラフ、階段状折れ線グラフなどを描画するために使用されます。

chart.area(options)

面グラフ（面グラフ）、カスケード面グラフ、区間面グラフなどを描画するために使用します。

geom.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()

グラフィック関連の設定。ドキュメント内の手順は完全ではありません。 、チャートの例から対応する情報を取得できます

プロパティ説明smooth折れ線グラフの平滑化設定に使用されます

<template>
  <div></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

#属性説明タイプデフォルト値#offsetoffsetX offsetYstyle属性説明

相対データ ポイントのオフセット距離	number	-
データ ポイントに対する X 方向のオフセット距離	number	-
データに対する相対 Y 方向の点のオフセット距離	number	-
テキスト グラフィック属性スタイル、カラーの設定に使用する必要があります。	##チャート座標系設定

タイプデフォルト値

rotateラジアン システムを使用して回転度を構成しますnumber-#reflectx 方向に沿ってミラーリングするか、y 軸に沿ってマップします along x および y 方向のスケーリング比率#xx、y 軸の変位、一般的に使用される棒グラフと縦棒グラフの間の変換#--#chart.interval(options)

<template>
  <div></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

x | y	-		scale
number,number	-		transpose
棒グラフ、ヒストグラム、ナイチンゲール ローズ チャート、円グラフ、棒グラフ (ヒスイ チャート)、ファネル チャートなどの描画に使用されます。

やマップの境界など、マップについて完全に説明されていません。設定、マップの色の構成、これらは例に基づいてゆっくりと検討する必要があります。私は、

toolTip を含む、より一般的に使用される中国の地図と、州の散布図を実装しました。マップ レベル を変更するだけです。 viewLevel

と対応するデータを使用すると、さまざまな州や都市の散布図を実現でき、誰もが 1 つの例から推論を引き出すことができます。

私は

@antv/l7plot を使用しており、マップ関連の描画は内部的にパッケージ化されています。@antv/l7

を使用する場合、主にリクエストに基づいています。マップパス座標データリクエストを描画するのですが、データがかなり大きくなり、さらに面倒になります。

画像はここには載せません。Github で実行すると、 マップ コンテナー構成アイテムのマップ が表示されます。

属性説明

タイプデフォルト値

typeマップのベース マップ タイプ、amap: Gaode マップ、mapbox: Mapbox マップstringamap center初期中心緯度と経度number[]numbernumber string#logoロゴを表示するかどうかbooleantrue

#[0, 0]

pitch

初期チルト角度

0

zoom

初期ズームレベル

0

style

組み込みスタイル: dark: ダーク、light: 明るい、normal: 通常、空白: ベースマップなし

dark

##

地图等级 viewLevel

属性	说明
level	层级 国家；"country"、省份："province"、市："city"、县："district"
adcode	层级编码 中国；100000、浙江省："330000"、杭州市："330100"、西湖区："330106"

<template>
  <div></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>
#container {
  width: 100%;
  height: 300px;
}
</style>

小结

如果你还没了解antv，现在它应该进入你的视野了，他提供了很多炫酷的图表，以及强大的图表功能，就算现在用不到，下次做个尝试也未尝不可，可能你会喜欢上它，并且替换掉echarts。

就举这些图表例子了，文章相关的例子源码也上传到Github了。这次开发过程中，也是把antv文档上上下下翻了好几遍，对于使用方式以及属性有一定的了解，如果你是刚刚要使用antv或者使用中遇到问题，可以评论区留言，共同成长，fighting~

（学习视频分享：web前端开发、编程基础视频）

以上がvue+antv がデータ視覚化チャートを実装する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。