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

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

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

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

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

面グラフ

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

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

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

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>

ログイン後にコピー

ヒストグラム

ヒストグラムは通常、日次で使用されます。データ分析、そしてそれは比較的直感的です。ここでは、使用される属性のいくつかをリストしました。その他は、上記の共通パラメーターのドキュメントと一致しています

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

データラベル 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>

ログイン後にコピー