Alibab Cloud DataV Widget 開発ガイド

目的

DataV は AlibabaCloud のデータ可視化プロダクトとして日々進化しており、とても優れていますが、提供できる Widget が限られているため、一部特殊なニーズがあるユーザーに対応できない可能性があります。このため、DataVのプロ版（中国サイト基準の呼び方）では Widget 開発権限を開放し、DataV 固有の Widget の利用以外はユーザー自身も自由に開発できるようになります。

　DataV プロ版はユーザー自身の Widget を開発できるメリットがあることに加えて、開発された Widget を他人にも共有でき、中国サイトの MarketPlace で販売することもできるため、開発ベンダーにとっても DataV はデータ可視化ツールの魅了的なプラットフォームです。

本ガイドでは、いくつの簡単な Echarts ライブラリを DataV に取り込むためのサンプルを使用して、 DataV 開発版の使い方と Widget 開発のルールを紹介させていただきます。

 本ガイドの全体的な流れは下記の通りです。

前提知識

本ガイドを理解するために、下記の前提知識が必要になります。

1.DataVの基本知識

DataV は、Alibaba Cloud のデータ可視化サービスで、膨大な量の複雑なデータを視覚的なダッシュボードとして分析し表示できます。DataV は、データ可視化エクスペリエンスをより多くのユーザーに提供することを目的としており、経験の浅いエンジニアがグラフィカルユーザーインターフェイスを介して、高度な可視化アプリケーションを簡単に構築できるよう支援します。

DataV には、高度な可視化を実現するため、基本的なグラフライブラリからサードパーティのグラフライブラリまで幅広く用意されています。ユーザーは高度なプログラミングスキルが不要で、単純なドラッグアンドドロップ操作で高度な可視化プロジェクトを作成できます。

DataV は、中国サイトが基準で現在下記 4 つバージョンが用意されています。(日本サイトと国際の DataV バージョンは中国サイトより少し遅れています。）

• 基本版
  • 一般的なユーザー向けのバージョンです。使えるテンプレートもグラフ Widget も制限されており、基本的な Dashboard を作成することが可能です。
• 企業版
  • 一般的な企業向けに、基本版よりテンプレートとグラフ Widget の数も多く、お客様自身も３つの Widget まで開発することが可能です。
• プロ版
  • 開発ベンダーや開発能力を持ってる大企業向けに、企業版より高度なテンプレートが増え、開発できる Widget の数も制限されていません。
• ローカル版
  • 政府や特殊セキュリティ要件がある大企業向けに、DataV のお客様のローカル環境にディプロイできるバージョンです。 購入方法や料金については、個別に営業担当にお問い合わせください。

この DataV 開発ガイドでは、上記 プロ版を使ってご紹介させていただきます。

1 つの DataV の Dashboard を作るには、基本的に下記の順番で作業します。

Copy
graph LR
    st((プロジェクト作成)) --> op0[データソース追加]
    op0 --> op1[Widget追加]
    op1 --> op2[Widget仕様設定]
    op2 --> op3[Widgetデータ設定]
    op3 --> op4[プレビュー]
    op4 --> en((プロジェクト公開))

一つの Widget では、基本的に表示仕様と表示データの ２つパーツを設定する必要があります。設定イメージは下記をご参照ください。

ユーザー自身が Widget を開発する場合も、一般的にこの ２ つパーツを明確に定義する必要があります。詳細については、後ほど DataV 開発ルールで詳しく説明させていただきます。

その他 DataV に関する詳しい紹介については、「プロダクトドキュメント」 をご参照ください。

2. Echarts の基本概念

ECharts は、中国の Baidu が提供している Javascript のデータ可視化ライブラリです。利用できるチャートが豊富で、ビッグデータ分析や処理の作成にも優れています。開発者にとってオプションのパラメーターを調整するだけで綺麗なグラフを簡単に作れるため、世界中の開発者から人気を集めています。

Echarts ライブラリを利用してグラフを 1 つ作成します。

サンプルの例

上記サンプルからわかるように、Echarts ではすべてのグラフパーツをオプションで制御することが可能です。よく使用されるオプションの種類は、以下のとおりです。

• ToolTip
• ToolBox
• Legend
• xAxis
• yAxis
• Series > Data

上記オプション以外で明確に示していないオプションは、すべてデフォルトオプションを使用しています（例：線の色、太さ、タイプなど）。この点を理解しておくことは後の DataV の開発に対してとても大切です。

Echarts のすべてのオプションに関する説明については、「Echartsドキュメント」をご参照ください。

3. Nodejs の知識

DataV の Widget は Nodejs をベースに開発するため、Nodejs と JavaScript に関する基本知識が必要です。1 つの DataV の Widget に対して 1 つの Nodejs のパッケージ の理解が必要です。

本ガイドは、外部 JavaScript ライブラリを DataV に取り込む方法を紹介することが目的のため、Nodejs と JavaScript の開発自体に関する紹介はここでは割愛させていただきます。

基本概念は以下のとおりです。

• Nodejs
  • 「Node.js」はサーバー側で動く JavaScript の環境（プラットフォーム）であり、Google が開発した V8 エンジンと非同期処理によって高速なレスポンスを実現できるのが特徴です。
  • Node.js と JavaScript の違いについては、JavaScript はブラウザ側で実行され、Node.js はサーバー側で実行されます。
• NPM
  • Node Package Manager、Node.js のパッケージ（Package ）を管理する（Manager）ツールです。
  • DataV の開発ツールも、Echarts も NPM を使ってインストールします。
  • npm でパッケージをインストールする場合は、次のようなコマンドを実行します。

Copy
npm install パッケージ名

• package.json

• package.json は project の package を管理するためのファイルです。maven で言うところの pom.xml です。　
• package.json は node.js の library を公開する際のファイルのため、license などが入ります。dependencies でライブラリの依存関係を管理します。
• npm install を実行すると、package.json の内容に従って、package を自動的にインストールします。

サンプル：

Copy
{
  "name": "chart1",
  "version": "1.0.0",
  "description": "chat",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "XXX",
  "license": "ISC",
  "dependencies": {
    "mysql": "^2.13.0",
    "socket.io": "^1.7.3"
  }
}

準備作業

開発作業に入る前に、２ つの準備作業が必要です。

開発 Token の取得と GroupID の作成

DataV のプロ版を購入し、Developer Token を取得します。この Token を利用し、開発された Widget パッケージを DataV へ Deploy することが可能です。

購入手続きが終了したら、[Widgets] タグの [Widgets Group] メニューに入り、ここで最初の Widgets Group を作成します。

Group ID の Naming ルールについて

• 必ず [会社.group名] や [会社-group名] の形式にする必要があります。
• Group 名の最後の文字を数値にすることはできません。

Widgets Group を作成したら、最初に Alibaba 側の審査が必要です。審査は通常一日か二日程度で完了します。この間は審査を待たずに開発を進めることが可能です。

これで、クラウド側の準備は完了しました。次は、ローカルの開発環境の準備です。

ローカル開発環境の構築

開発環境の準備については、基本的にドキュメントセンターの「クイックスタート」をご参照ください。

ここでいくつかの注意点があります。

• Nodejs のバージョン
  • Node.js をインストールする場合は、8.0.0〜10.12.0 のバージョンを推奨します。最新のバージョンをインストールすると、後の DataV ツールがうまく作動しない場合があります。
• DataV login
  • DataV にログインする際、日本サイトは「Username　=　お客様のアカウントの UID」、中国サイトは「Username　=　お客様のアカウントのメールアドレス」です。ここだけ注意する必要があります。
  • DataV login は最後の Deploy 時のみ必要で、開発時はこの手順を Skip しても構いません。

DataV のインストールが完了したら、下記のように言語を設定すると、正式に Widget の開発が可能になります。

開発ルール

まず datav init コマンドを実行し、テンプレートから DataVのWidget の雛形を作成します。

作成されたフォルダを見ると、 1 つの Widget パッケージには下記のファイル構造があります。

Copy
--coms-name //Widget name
|--index.js //Widget メインファイル
|--package.json //Widget 設定ファイル
|--readme.md //Widget description
|--history.md //Widget update history

ここで一番重要なファイルが ２ つあります。

• index.js
  • パッケージのメインファイルです。package.json の中で書いた設定を読み込んで DataV の設定に変換し、最後は Widget を表示します。
• package.json
  • パッケージ設定ファイルです。依存するライブラリや DataV のすべての設定はここで記載します。

index.jsの説明

一番重要なポイントは次のとおりです。

• 必要なライブラリを Require で引用する。（事前に npm install が必要）
• this.config の中に設定を書く。普通は全部 package.json の中に書くため、ここで書く必要はありませんが、一部特別な設定をここに書きます。
• mergeConfig で package.json の設定と this.config の設定をマージし、変換する。

サンプル：

Copy
var Event = require('bcore/event');
var $ = require('jquery');
var _ = require('lodash');
//ここで必要なライブラリを引用する
//var Chart = require('XXX');

/**
 * Basic
 */
module.exports = Event.extend(function Base(container, config) {
  //ここに Widget の設定を補足として書く。一般的にすべての設定は Package.json  の中に書く
  this.config = {
    theme: {}
  }
  this.container = $(container);           //容器
  this.apis = config.apis;                 //hook 必須
  this._data = null;                       //データ
  this.chart = null;                       //Chart
  this.init(config);
}, {
  /**
   * 初期化
   */
  init: function (config) {
    //1.初期化。package.json の設定と this.config をマージする
    this.mergeConfig(config);
    //2.レイアウト更新。なくても OK
    this.updateLayout();
    //3.Widget をインスタンス化。
    //this.chart = new Chart(this.container[0], this.config);
    //4.仕様個別更新。なくても OK
    this.updateStyle();
  },
  /**
   * 描く
   * @param data
   * @param config なくても OK
   */
  render: function (data, config) {
    data = this.data(data);
    var cfg = this.mergeConfig(config);
    //描く
    //this.chart.render(data, cfg);
    this.container.html(data[0].value)

    //仕様個別更新。なくても　OK
    this.updateStyle();
  },
  /**
   * データ設定
   * @param data
   * @returns {*|number}
   */
  data: function (data) {
    if (data) {
      this._data = data;
    }
    return this._data;
  },
  /**
   * package.json の設定と this.config をマージ
   * 優先順: config.colors > config.theme > this.config.theme > this.config.colors
   * @param config
   * @private
   */
  mergeConfig: function (config) {
    if (!config) {return this.config}
    this.config.theme = _.defaultsDeep(config.theme || {}, this.config.theme);
    this.setColors();
    this.config = _.defaultsDeep(config || {}, this.config);
    return this.config;
  },
  /**
   *下記 Function は必要な時だけ実装
   * @param width
   * @param height
   */
  resize: function (width, height) {},
  setColors: function () {},
  updateLayout: function () {},
  updateStyle: function () {},
  destroy: function(){}
});

package.jsonの説明

一番重要なポイントは、次のとおりです。

• Widget の Deploy のため、name の @namespace は必ず前に準備した GroupID と一致しないといけない
• dependencies に必要なライブラリとバージョンを記入する
• datav には Widget の仕様設定とデータを記入する

datav.config と datav.api_data は DataV で提供される仕様エディターで、 Widget の仕様とデータを WebPage で更新するための設定です。設定しない場合、DataV で提供される仕様エディターは使えませんが、index.js の this.config で設定すれば、Widget の表示自体には影響がありません。

サンプル：

Copy
{
  "name": "@sbcloud-test/line",
  "version": "0.0.1",
  "dependencies": {
    "bcore": "0.0.18",
    "jquery": "2.1.4",
    "lodash": "4.6.1"
  },
  "datav": {  // Widget の属性説明。必須
    "cn_name": "testline",
    "icon": "",
    "protocol": 2,
    "type": [
      "regular"
    ],
    "view": {   // Widget の Frame の大きさ。必須
      "width": "400",
      "height": "200",
      "minWidth": "200",
      "minHeight": "100"
    },
    "apis": {
      "source": {
        "handler": "render",
        "description": "接口描述",
        "fields": {
          "value": {
            "description": "值说明"
          }
        }
      }
    },
    "config": {  // Widget の初期仕様
      "size": {
        "name": "字号",
        "type": "number",
        "default": 22,
        "range": [
          10,
          100
        ]
      }
    },
    "api_data": {  // Widget の初期データ
      "source": [
        {
          "value": "值"
        }
      ]
    }
  }
}

サンプルコード

開発ルールで説明した通り、DataV の仕様エディターを使うか使わないかによって、package.json 中に DataV の設定を書かなくても済む場合があります。

実際は DataV の Widget 開発で一番開発工数がかかるのは、他のライブラリの設定を DataV の標準 Config に変換することです。

DataV の標準　Config に変換するメリット

• DataV の仕様エディターを使って、Webpage から Widget の仕様設定を変更することが可能です。
• DataV のデータエディターを使って、Database や API から動的に Widget のデータを変更することが可能です。

次にいくつかの例を使用して、Echarts を DataV に取り込む方法を紹介します。

Echarts のコードをそのまま DataV に移行

まず、一番楽な方法は、Echarts のコードをそのまま DataV に移行し、package.json の設定は使わない方法です。

下記は Echarts の少し複雑なサンプルを DataV に移行した結果です。

• Rich text

  • Echart のサンプル

  • DataV ソース index.js package.json

  ソースコード:

Copy
//index.js
var Event = require('bcore/event');
var $ = require('jquery');
var _ = require('lodash');
//Echarts のライブラリを引用
var EChart = require('echarts');
// DataV が提供した DataV の Config を Echarts の option に変換するライブラリ
var Utils = require('datav:/com/maliang-echarts-utils/0.0.18');

/**
 * Basic
 */
module.exports = Event.extend(function Base(container, config) {
var ROOT_PATH = 'https://www.echartsjs.com/examples/';
var weatherIcons = {
    'Sunny': ROOT_PATH + 'data/asset/img/weather/sunny_128.png',
    'Cloudy': ROOT_PATH + 'data/asset/img/weather/cloudy_128.png',
    'Showers': ROOT_PATH + 'data/asset/img/weather/showers_128.png'
};

var seriesLabel = {
    normal: {
        show: true,
        textBorderColor: '#333',
        textBorderWidth: 2
    }
};

this.config = {
    backgroundColor: '#FAFAFC',  //開発時に見やすいように backgroundColor を設定しましたが、正式な Deploy の場合は、この設定を外すことを推奨します。
    title: {
        text: 'Wheater Statistics'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['City Alpha', 'City Beta', 'City Gamma']
    },
    grid: {
        left: 100
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'value',
        name: 'Days',
        axisLabel: {
            formatter: '{value}'
        }
    },
    yAxis: {
        type: 'category',
        inverse: true,
        data: ['Sunny', 'Cloudy', 'Showers'],
        axisLabel: {
            formatter: function (value) {
                return '{' + value + '| }\n{value|' + value + '}';
            },
            margin: 20,
            rich: {
                value: {
                    lineHeight: 30,
                    align: 'center'
                },
                Sunny: {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.Sunny
                    }
                },
                Cloudy: {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.Cloudy
                    }
                },
                Showers: {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.Showers
                    }
                }
            }
        }
    },
    series: [
        {
            name: 'City Alpha',
            type: 'bar',
            data: [165, 170, 30],
            label: seriesLabel,
            markPoint: {
                symbolSize: 1,
                symbolOffset: [0, '50%'],
                label: {
                   normal: {
                        formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
                        backgroundColor: 'rgb(242,242,242)',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        padding: [4, 10],
                        lineHeight: 26,
                        // shadowBlur: 5,
                        // shadowColor: '#000',
                        // shadowOffsetX: 0,
                        // shadowOffsetY: 1,
                        position: 'right',
                        distance: 20,
                        rich: {
                            a: {
                                align: 'center',
                                color: '#fff',
                                fontSize: 18,
                                textShadowBlur: 2,
                                textShadowColor: '#000',
                                textShadowOffsetX: 0,
                                textShadowOffsetY: 1,
                                textBorderColor: '#333',
                                textBorderWidth: 2
                            },
                            b: {
                                 color: '#333'
                            },
                            c: {
                                color: '#ff8811',
                                textBorderColor: '#000',
                                textBorderWidth: 1,
                                fontSize: 22
                            }
                        }
                   }
                },
                data: [
                    {type: 'max', name: 'max days: '},
                    {type: 'min', name: 'min days: '}
                ]
            }
        },
        {
            name: 'City Beta',
            type: 'bar',
            label: seriesLabel,
            data: [150, 105, 110]
        },
        {
            name: 'City Gamma',
            type: 'bar',
            label: seriesLabel,
            data: [220, 82, 63]
        }
    ]
},
  this.container = $(container);           //容器
  this.apis = config.apis;                 //hook一定要有
  this._data = null;                       //数据
  this.chart = null;                       //图表
  this.init(config);
}, {
  /**
   * 公有初始化
   */
  init: function (config) {
    //1.初始化,合并配置
    config = this.mergeConfig(config);
    this.chart = EChart.init(this.container[0]);
    this.chart.setOption(Utils.config2echartsOptions(config));
    //2.刷新布局,针对有子组件的组件 可有可无
    this.updateLayout();
    //3.子组件实例化
    //this.chart = new Chart(this.container[0], this.config);
    //4.如果有需要, 更新样式
    this.updateStyle();
  },
//以下は省略

//package.json

{
  "name": "@sbcloud-1test/echarts-richtext",
  "version": "1.2.5",
  "dependencies": {
    "bcore": "0.0.18",
    "echarts": "^4.2.1",  //Echarts の最新版を使う
    "jquery": "2.1.4",
    "lodash": "4.6.1",
    "zrender": "3.4.4"
  },
  "datav": {
    "cn_name": "RichText",
    "icon": "//img.alicdn.com/tfs/TB1TrSHJAyWBuNjy0FpXXassXXa-270-160.png",
    "protocol": 2,
    "type": [
      "regular_pie"
    ],
    "view": {
      "width": "700",
      "height": "500",
      "minWidth": "40",
      "minHeight": "40"
    },
    "apis": {
      "source": {
        "handler": "render",
        "description": "echarts",
        "fields": {
          "x": {
            "description": "x坐标轴值"
          },
          "y": {
            "description": "y坐标轴值"
          }
        }
      }
    },
    "config": {
    },
    "api_data": {
    }
  }
}

• 効果

• GeoJson map

  • Echart のサンプル
  • DataV ソース index.jspackage.json
  • 効果

• Scatter

  • Echart のサンプル
  • DataV ソース index.jspackage.json
  • 効果

• Graph

  • Echart のサンプル
  • DataV ソース index.jspackage.json
  • 効果

• Timeline

  • Echart のサンプル
  • DataV ソース index.jspackage.json
  • 効果

• 3D

  • Echart のサンプル
  • DataV ソース index.jspackage.json
  • 効果

Option の一部を DataV の package.json に変換

Echarts の一部の option を DataV の標準 Config に変換するサンプルです。

• Echart のサンプル
• DataVソース index.jspackage.json
• 効果

Optionを完全にDataVのpackage.jsonに変換

Echartsの全部optionをDataVの標準Configに変換するサンプルです。

• Echart のサンプル
• DataV ソース index.jspackage.json

Copy
{
  "name": "@sbcloud-1test/echarts-pictorialBar",
  "version": "1.0.0",
  "dependencies": {
    "bcore": "0.0.18",
    "jquery": "2.1.4",
    "lodash": "4.6.1",
    "echarts": "4.2.1"
  },
  "datav": {
    "cn_name": "PictorialBar",
    "icon": "//datav.oss-cn-hangzhou.aliyuncs.com/uploads/images/2ccb7c958c146a7e5aed4506179a8e16.png",
    "protocol": 2,
    "type": [
      "regular_pictorialBar"
    ],
    "view": {
      "width": "650",
      "height": "400",
      "minWidth": "40",
      "minHeight": "20"
    },
    "apis": {
      "source": {
        "handler": "render",
        "description": "echarts象形柱图接口描述",
        "fields": {
          "x": {
            "description": "x坐标轴值"
          },
          "y": {
            "description": "y坐标轴值"
          },
          "s": {
            "description": "系列值",
            "optional": true
          }
        }
      }
    },
    "config": {
      "xAxis": {
        "name": "x轴",
        "type": "group",
        "children": {
          "show": {
            "name": "显示",
            "type": "boolean",
            "default": true
          },
          "type": {
            "name": "类型",
            "type": "text",
            "default": "category"
          },
          "axisLine": {
            "name": "轴线",
            "type": "group",
            "children": {
              "show": {
                "name": "显示",
                "type": "boolean",
                "default": false
              }
            },
            "fold": true
          },
          "axisTick": {
            "name": "刻度",
            "type": "group",
            "children": {
              "show": {
                "name": "显示",
                "type": "boolean",
                "default": false
              }
            },
            "fold": true
          }
        },
        "fold": true
      },
      "yAxis": {
        "name": "y轴",
        "type": "group",
        "children": {
          "show": {
            "name": "显示",
            "type": "boolean",
            "default": false
          }
        },
        "fold": true
      },
      "tooltip": {
        "name": "提示框",
        "type": "group",
        "children": {
          "show": {
            "name": "显示",
            "type": "boolean",
            "default": true
          },
          "showContent": {
            "name": "显示提示框",
            "type": "boolean",
            "default": true
          }
        },
        "fold": true
      },
      "series": {
        "name": "系列",
        "type": "array",
        "fold": true,
        "default": [
          {
            "name": "hill",
            "type": "pictorialBar",
            "barCategoryGap": "-130%",
            "symbol": "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            "itemStyle": {
              "normal": {
                "opacity": 0.5,
                  "defaultColor": {
                    "name": "默认颜色",
                    "type": "boolean",
                    "default": true,
                    "description": ""
                  }
              }
            },
            "z": 10,
            "legendHoverLink": true,
            "coordinateSystem": "cartesian2d"
          },
          {
            "name": "glyph",
            "type": "pictorialBar",
            "barGap": "-100%",
            "symbolPosition": "end",
            "symbolOffset": [
              0,
              "-120%"
            ],
            "legendHoverLink": true,
            "coordinateSystem": "cartesian2d",
            "itemStyle": {
              "normal": {
                  "defaultColor": {
                    "name": "默认颜色",
                    "type": "boolean",
                    "default": true,
                    "description": ""
                  },
                "opacity": 0.8
              }
            },
            "z": 2
          }
        ],
        "child": {
          "type": "object",
          "name": "系列<%= i+1 %>",
          "child": {
            "name": {
              "name": "名称",
              "type": "text",
              "default": ""
            },
            "itemStyle": {
              "name": "元素样式",
              "type": "group",
              "children": {
                "normal": {
                  "name": "普通项",
                  "type": "group",
                  "children": {
                  "defaultColor": {
                    "name": "默认颜色",
                    "type": "boolean",
                    "default": true,
                    "description": ""
                  }
                  },
                  "fold": true
                }
              },
              "fold": true
            }
          }
        }
      }
    },
    "api_data": {
      "source": [
        {
          "x": "驯鹿",
          "y": 123,
          "s": "hill"
        },
        {
          "y": 123,
          "symbol": "path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1.952,15.182-0.165,19.498-3.937 c1.15-3.933-1.24-9.846-1.229-9.938c0.008-0.062-1.314-0.004-1.803-0.258c-1.119-0.771-6.531-3.75-0.17-3.33 c0.314-0.045,0.943,0.259,1.439,0.435c-0.289-1.694-0.92-0.144-3.311-1.946c0,0-1.1-0.855-1.764-1.98 c-0.836-1.09-2.01-2.825-2.992-4.031c-1.523-2.476,1.367,0.709,1.816,1.108c1.768,1.704,1.844,3.281,3.232,3.983 c0.195,0.203,1.453,0.164,0.926-0.468c-0.525-0.632-1.367-1.278-1.775-2.341c-0.293-0.703-1.311-2.326-1.566-2.711 c-0.256-0.384-0.959-1.718-1.67-2.351c-1.047-1.187-0.268-0.902,0.521-0.07c0.789,0.834,1.537,1.821,1.672,2.023 c0.135,0.203,1.584,2.521,1.725,2.387c0.102-0.259-0.035-0.428-0.158-0.852c-0.125-0.423-0.912-2.032-0.961-2.083 c-0.357-0.852-0.566-1.908-0.598-3.333c0.4-2.375,0.648-2.486,0.549-0.705c0.014,1.143,0.031,2.215,0.602,3.247 c0.807,1.496,1.764,4.064,1.836,4.474c0.561,3.176,2.904,1.749,2.281-0.126c-0.068-0.446-0.109-2.014-0.287-2.862 c-0.18-0.849-0.219-1.688-0.113-3.056c0.066-1.389,0.232-2.055,0.277-2.299c0.285-1.023,0.4-1.088,0.408,0.135 c-0.059,0.399-0.131,1.687-0.125,2.655c0.064,0.642-0.043,1.768,0.172,2.486c0.654,1.928-0.027,3.496,1,3.514 c1.805-0.424,2.428-1.218,2.428-2.346c-0.086-0.704-0.121-0.843-0.031-1.193c0.221-0.568,0.359-0.67,0.312-0.076 c-0.055,0.287,0.031,0.533,0.082,0.794c0.264,1.197,0.912,0.114,1.283-0.782c0.15-0.238,0.539-2.154,0.545-2.522 c-0.023-0.617,0.285-0.645,0.309,0.01c0.064,0.422-0.248,2.646-0.205,2.334c-0.338,1.24-1.105,3.402-3.379,4.712 c-0.389,0.12-1.186,1.286-3.328,2.178c0,0,1.729,0.321,3.156,0.246c1.102-0.19,3.707-0.027,4.654,0.269 c1.752,0.494,1.531-0.053,4.084,0.164c2.26-0.4,2.154,2.391-1.496,3.68c-2.549,1.405-3.107,1.475-2.293,2.984 c3.484,7.906,2.865,13.183,2.193,16.466c2.41,0.271,5.732-0.62,7.301,0.725c0.506,0.333,0.648,1.866-0.457,2.86 c-4.105,2.745-9.283,7.022-13.904,7.662c-0.977-0.194,0.156-2.025,0.803-2.247l1.898-0.03c0.596-0.101,0.936-0.669,1.152-1.139 c3.16-0.404,5.045-3.775,8.246-4.818c-4.035-0.718-9.588,3.981-12.162,1.051c-5.043,1.423-11.449,1.84-15.895,1.111 c-3.105,2.687-7.934,4.021-12.115,5.866c-3.271,3.511-5.188,8.086-9.967,10.414c-0.986,0.119-0.48-1.974,0.066-2.385l1.795-0.618 C-22.995,25.682-22.849,25.035-22.788,24.521z",
          "symbolSize": [
            60,
            60
          ],
          "x": "驯鹿",
          "s": "glyph"
        },
        {
          "x": "火箭",
          "y": 60,
          "s": "hill"
        },
        {
          "y": 60,
          "symbol": "path://M-244.396,44.399c0,0,0.47-2.931-2.427-6.512c2.819-8.221,3.21-15.709,3.21-15.709s5.795,1.383,5.795,7.325C-237.818,39.679-244.396,44.399-244.396,44.399z M-260.371,40.827c0,0-3.881-12.946-3.881-18.319c0-2.416,0.262-4.566,0.669-6.517h17.684c0.411,1.952,0.675,4.104,0.675,6.519c0,5.291-3.87,18.317-3.87,18.317H-260.371z M-254.745,18.951c-1.99,0-3.603,1.676-3.603,3.744c0,2.068,1.612,3.744,3.603,3.744c1.988,0,3.602-1.676,3.602-3.744S-252.757,18.951-254.745,18.951z M-255.521,2.228v-5.098h1.402v4.969c1.603,1.213,5.941,5.069,7.901,12.5h-17.05C-261.373,7.373-257.245,3.558-255.521,2.228zM-265.07,44.399c0,0-6.577-4.721-6.577-14.896c0-5.942,5.794-7.325,5.794-7.325s0.393,7.488,3.211,15.708C-265.539,41.469-265.07,44.399-265.07,44.399z M-252.36,45.15l-1.176-1.22L-254.789,48l-1.487-4.069l-1.019,2.116l-1.488-3.826h8.067L-252.36,45.15z",
          "symbolSize": [
            50,
            60
          ],
          "x": "火箭",
          "s": "glyph"
        },
        {
          "x": "飞机",
          "y": 25,
          "s": "hill"
        },
        {
          "y": 25,
          "symbol": "path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934,39.867z M38.963,38.889c-0.098-0.038-0.209-0.07-0.348-0.073 c-0.082,0-0.174,0-0.268-0.001l-7.127,4.671c0.879,0.821,2.42,1.417,4.348,1.417c0.979,0,2.27-0.006,3.047-0.01 c0.139,0,0.25-0.034,0.348-0.072c-0.646-0.555-1.07-1.643-1.07-2.967C37.891,40.529,38.316,39.441,38.963,38.889z M32.713,23.96 l-12.37-10.116l-4.693-0.004c0,0,4,8.222,4.827,10.121H32.713z M59.311,32.374c-0.248,2.104-5.305,3.172-8.018,3.172H39.629 l-25.325,16.61L9.607,52.16c0,0,6.687-8.479,7.95-10.207c1.17-1.6,3.019-3.699,3.027-6.407h-2.138 c-5.839,0-13.816-3.789-18.472-5.583c-2.818-1.085-2.396-4.04-0.031-4.04h0.039l-3.299-11.371h3.617c0,0,4.352,5.696,5.846,7.5 c2,2.416,4.503,3.678,8.228,3.87h30.727c2.17,0,4.311,0.417,6.252,1.046c3.49,1.175,5.863,2.7,7.199,4.027 C59.145,31.584,59.352,32.025,59.311,32.374z M22.069,30.408c0-0.815-0.661-1.475-1.469-1.475c-0.812,0-1.471,0.66-1.471,1.475 s0.658,1.475,1.471,1.475C21.408,31.883,22.069,31.224,22.069,30.408z M27.06,30.408c0-0.815-0.656-1.478-1.466-1.478 c-0.812,0-1.471,0.662-1.471,1.478s0.658,1.477,1.471,1.477C26.404,31.885,27.06,31.224,27.06,30.408z M32.055,30.408 c0-0.815-0.66-1.475-1.469-1.475c-0.808,0-1.466,0.66-1.466,1.475s0.658,1.475,1.466,1.475 C31.398,31.883,32.055,31.224,32.055,30.408z M37.049,30.408c0-0.815-0.658-1.478-1.467-1.478c-0.812,0-1.469,0.662-1.469,1.478 s0.656,1.477,1.469,1.477C36.389,31.885,37.049,31.224,37.049,30.408z M42.039,30.408c0-0.815-0.656-1.478-1.465-1.478 c-0.811,0-1.469,0.662-1.469,1.478s0.658,1.477,1.469,1.477C41.383,31.885,42.039,31.224,42.039,30.408z M55.479,30.565 c-0.701-0.436-1.568-0.896-2.627-1.347c-0.613,0.289-1.551,0.476-2.73,0.476c-1.527,0-1.639,2.263,0.164,2.316 C52.389,32.074,54.627,31.373,55.479,30.565z",
          "symbolSize": [
            65,
            35
          ],
          "x": "飞机",
          "s": "glyph"
        },
        {
          "x": "高铁",
          "y": 18,
          "s": "hill"
        },
        {
          "y": 18,
          "symbol": "path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z  M14.544,40.764c1.143,0,2.07-0.927,2.07-2.07V35.59V25.237c0-1.145-0.928-2.07-2.07-2.07H-9.265c-1.143,0-2.068,0.926-2.068,2.07 v10.351v3.105c0,1.144,0.926,2.07,2.068,2.07H14.544L14.544,40.764z M8.333,26.272h3.105v4.141H8.333V26.272z M1.087,26.272h3.105 v4.141H1.087V26.272z M-6.159,26.272h3.105v4.141h-3.105V26.272z M-9.265,41.798h69.352v1.035H-9.265V41.798z",
          "symbolSize": [
            50,
            30
          ],
          "x": "高铁",
          "s": "glyph"
        },
        {
          "x": "轮船",
          "y": 12,
          "s": "hill"
        },
        {
          "y": 12,
          "symbol": "path://M16.678,17.086h9.854l-2.703,5.912c5.596,2.428,11.155,5.575,16.711,8.607c3.387,1.847,6.967,3.75,10.541,5.375 v-6.16l-4.197-2.763v-5.318L33.064,12.197h-11.48L20.43,15.24h-4.533l-1.266,3.286l0.781,0.345L16.678,17.086z M49.6,31.84 l0.047,1.273L27.438,20.998l0.799-1.734L49.6,31.84z M33.031,15.1l12.889,8.82l0.027,0.769L32.551,16.1L33.031,15.1z M22.377,14.045 h9.846l-1.539,3.365l-2.287-1.498h1.371l0.721-1.352h-2.023l-0.553,1.037l-0.541-0.357h-0.34l0.359-0.684h-2.025l-0.361,0.684 h-3.473L22.377,14.045z M23.695,20.678l-0.004,0.004h0.004V20.678z M24.828,18.199h-2.031l-0.719,1.358h2.029L24.828,18.199z  M40.385,34.227c-12.85-7.009-25.729-14.667-38.971-12.527c1.26,8.809,9.08,16.201,8.213,24.328 c-0.553,4.062-3.111,0.828-3.303,7.137c15.799,0,32.379,0,48.166,0l0.066-4.195l1.477-7.23 C50.842,39.812,45.393,36.961,40.385,34.227z M13.99,35.954c-1.213,0-2.195-1.353-2.195-3.035c0-1.665,0.98-3.017,2.195-3.017 c1.219,0,2.195,1.352,2.195,3.017C16.186,34.604,15.213,35.954,13.99,35.954z M23.691,20.682h-2.02l-0.588,1.351h2.023 L23.691,20.682z M19.697,18.199l-0.721,1.358h2.025l0.727-1.358H19.697z",
          "symbolSize": [
            50,
            35
          ],
          "x": "轮船",
          "s": "glyph"
        },
        {
          "x": "汽车",
          "y": 9,
          "s": "hill"
        },
        {
          "y": 9,
          "symbol": "path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.455,0.519,1.334,0.475c1.137-0.053,2.762,0,4.484,0.068 c0,0.476-0.018,0.697-0.018,0.697c-0.111,1.299-0.697,1.342-0.93,1.342h-3.7c-0.328,0-0.602,0-0.861-0.154 c-0.309-0.18-0.43-0.772-0.541-1.78c-0.018-0.146-0.027-0.336-0.035-0.56v-0.01c0-0.068-0.008-0.154-0.008-0.25V41.58l0,0 C6.057,41.348,6.057,41.09,6.057,40.883L6.057,40.883z M49.867,32.766c0-2.642-0.344-5.224-0.482-5.507 c-0.104-0.207-0.766-0.749-2.271-1.773c-1.522-1.042-1.487-0.887-1.766-1.566c0.25-0.078,0.492-0.224,0.639-0.241 c0.326-0.034,0.345,0.274,1.023,0.274c0.68,0,2.152-0.18,2.453-0.48c0.301-0.303,0.396-0.405,0.396-0.672 c0-0.268-0.156-0.818-0.447-1.146c-0.293-0.327-1.541-0.49-2.273-0.585c-0.729-0.095-0.834,0-1.022,0.121 c-0.304,0.189-0.32,1.919-0.32,1.919l-0.713,0.018c-0.465-1.146-1.11-3.452-2.117-5.269c-1.103-1.979-2.256-2.599-2.737-2.754 c-0.474-0.146-0.904-0.249-4.131-0.576c-3.298-0.344-5.922-0.388-8.262-0.388c-2.342,0-4.967,0.052-8.264,0.388 c-3.229,0.336-3.66,0.43-4.133,0.576s-1.633,0.775-2.736,2.754c-1.006,1.816-1.652,4.123-2.117,5.269L9.87,23.109 c0,0-0.008-1.729-0.318-1.919c-0.189-0.121-0.293-0.225-1.023-0.121c-0.732,0.104-1.98,0.258-2.273,0.585 c-0.293,0.327-0.447,0.878-0.447,1.146c0,0.267,0.094,0.379,0.396,0.672c0.301,0.301,1.773,0.48,2.453,0.48 c0.68,0,0.697-0.309,1.023-0.274c0.146,0.018,0.396,0.163,0.637,0.241c-0.283,0.68-0.24,0.524-1.764,1.566 c-1.506,1.033-2.178,1.566-2.271,1.773c-0.139,0.283-0.482,2.865-0.482,5.508s0.189,5.02,0.189,5.86c0,0.354,0,0.976,0.076,1.565 c0.053,0.354,0.129,0.697,0.268,0.966c0.232,0.473,0.447,0.516,1.334,0.473c1.137-0.051,2.779,0,4.477,0.07 c1.135,0.043,2.297,0.086,3.33,0.11c2.582,0.051,1.826-0.379,2.928-0.36c1.102,0.016,5.447,0.196,9.424,0.196 c3.976,0,8.332-0.182,9.423-0.196c1.102-0.019,0.346,0.411,2.926,0.36c1.033-0.018,2.195-0.067,3.332-0.11 c1.695-0.062,3.348-0.121,4.477-0.07c0.886,0.043,1.103,0,1.332-0.473c0.132-0.269,0.218-0.611,0.269-0.966 c0.086-0.592,0.078-1.213,0.078-1.565C49.678,37.793,49.867,35.408,49.867,32.766L49.867,32.766z M13.219,19.735 c0.412-0.964,1.652-2.9,2.256-3.244c0.145-0.087,1.426-0.491,4.637-0.706c2.953-0.198,6.217-0.276,7.73-0.276 c1.513,0,4.777,0.078,7.729,0.276c3.201,0.215,4.502,0.611,4.639,0.706c0.775,0.533,1.842,2.28,2.256,3.244 c0.412,0.965,0.965,2.858,0.861,3.116c-0.104,0.258,0.104,0.388-1.291,0.275c-1.387-0.103-10.088-0.216-14.185-0.216 c-4.088,0-12.789,0.113-14.184,0.216c-1.395,0.104-1.188-0.018-1.291-0.275C12.254,22.593,12.805,20.708,13.219,19.735 L13.219,19.735z M16.385,30.511c-0.619,0.155-0.988,0.491-1.764,0.482c-0.775,0-2.867-0.353-3.314-0.371 c-0.447-0.017-0.842,0.302-1.076,0.362c-0.23,0.06-0.688-0.104-1.377-0.318c-0.688-0.216-1.092-0.155-1.316-1.094 c-0.232-0.93,0-2.264,0-2.264c1.488-0.068,2.928,0.069,5.621,0.826c2.693,0.758,4.191,2.213,4.191,2.213 S17.004,30.357,16.385,30.511L16.385,30.511z M36.629,37.293c-1.23,0.164-6.386,0.207-8.794,0.207c-2.412,0-7.566-0.051-8.799-0.207 c-1.256-0.164-2.891-1.67-1.764-2.865c1.523-1.627,1.24-1.576,4.701-2.023C24.967,32.018,27.239,32,27.834,32 c0.584,0,2.865,0.025,5.859,0.404c3.461,0.447,3.178,0.396,4.699,2.022C39.521,35.623,37.887,37.129,36.629,37.293L36.629,37.293z  M48.129,29.582c-0.232,0.93-0.629,0.878-1.318,1.093c-0.688,0.216-1.145,0.371-1.377,0.319c-0.231-0.053-0.627-0.371-1.074-0.361 c-0.448,0.018-2.539,0.37-3.313,0.37c-0.772,0-1.146-0.328-1.764-0.481c-0.621-0.154-0.966-0.154-0.966-0.154 s1.49-1.464,4.191-2.213c2.693-0.758,4.131-0.895,5.621-0.826C48.129,27.309,48.361,28.643,48.129,29.582L48.129,29.582z",
          "symbolSize": [
            40,
            30
          ],
          "x": "汽车",
          "s": "glyph"
        },
        {
          "x": "跑步",
          "y": 2,
          "s": "hill"
        },
        {
          "y": 2,
          "symbol": "path://M13.676,32.955c0.919-0.031,1.843-0.008,2.767-0.008v0.007c0.827,0,1.659,0.041,2.486-0.019 c0.417-0.028,1.118,0.325,1.14-0.545c0.014-0.637-0.156-1.279-0.873-1.367c-1.919-0.241-3.858-0.233-5.774,0.019 c-0.465,0.062-0.998,0.442-0.832,1.069C12.715,32.602,13.045,32.977,13.676,32.955z M14.108,29.013 c1.47-0.007,2.96-0.122,4.414,0.035c1.792,0.192,3.1-0.412,4.273-2.105c-3.044,0-5.882,0.014-8.719-0.01 c-0.768-0.005-1.495,0.118-1.461,1C12.642,28.731,13.329,29.014,14.108,29.013z M23.678,36.593c-0.666-0.69-1.258-1.497-2.483-1.448 c-2.341,0.095-4.689,0.051-7.035,0.012c-0.834-0.014-1.599,0.177-1.569,1.066c0.031,0.854,0.812,1.062,1.636,1.043 c1.425-0.033,2.852-0.01,4.278-0.01v-0.01c1.562,0,3.126,0.008,4.691-0.005C23.614,37.239,24.233,37.174,23.678,36.593z  M32.234,42.292h-0.002c-1.075,0.793-2.589,0.345-3.821,1.048c-0.359,0.193-0.663,0.465-0.899,0.799 c-1.068,1.623-2.052,3.301-3.117,4.928c-0.625,0.961-0.386,1.805,0.409,2.395c0.844,0.628,1.874,0.617,2.548-0.299 c1.912-2.573,3.761-5.197,5.621-7.814C33.484,42.619,33.032,42.387,32.234,42.292z M43.527,28.401 c-0.688-1.575-2.012-0.831-3.121-0.895c-1.047-0.058-2.119,1.128-3.002,0.345c-0.768-0.677-1.213-1.804-1.562-2.813 c-0.45-1.305-1.495-2.225-2.329-3.583c2.953,1.139,4.729,0.077,5.592-1.322c0.99-1.61,0.718-3.725-0.627-4.967 c-1.362-1.255-3.414-1.445-4.927-0.452c-1.933,1.268-2.206,2.893-0.899,6.11c-2.098-0.659-3.835-1.654-5.682-2.383 c-0.735-0.291-1.437-1.017-2.293-0.666c-2.263,0.927-4.522,1.885-6.723,2.95c-1.357,0.658-1.649,1.593-1.076,2.638 c0.462,0.851,1.643,1.126,2.806,0.617c0.993-0.433,1.994-0.857,2.951-1.374c1.599-0.86,3.044-0.873,4.604,0.214 c1.017,0.707,0.873,1.137,0.123,1.849c-1.701,1.615-3.516,3.12-4.933,5.006c-1.042,1.388-0.993,2.817,0.255,4.011 c1.538,1.471,3.148,2.869,4.708,4.315c0.485,0.444,0.907,0.896-0.227,1.104c-1.523,0.285-3.021,0.694-4.538,1.006 c-1.109,0.225-2.02,1.259-1.83,2.16c0.223,1.07,1.548,1.756,2.687,1.487c3.003-0.712,6.008-1.413,9.032-2.044 c1.549-0.324,2.273-1.869,1.344-3.115c-0.868-1.156-1.801-2.267-2.639-3.445c-1.964-2.762-1.95-2.771,0.528-5.189 c1.394-1.357,1.379-1.351,2.437,0.417c0.461,0.769,0.854,1.703,1.99,1.613c2.238-0.181,4.407-0.755,6.564-1.331 C43.557,30.447,43.88,29.206,43.527,28.401z",
          "symbolSize": [
            40,
            50
          ],
          "x": "跑步",
          "s": "glyph"
        },
        {
          "x": "步行",
          "y": 1,
          "s": "hill"
        },
        {
          "y": 1,
          "symbol": "path://M29.902,23.275c1.86,0,3.368-1.506,3.368-3.365c0-1.859-1.508-3.365-3.368-3.365 c-1.857,0-3.365,1.506-3.365,3.365C26.537,21.769,28.045,23.275,29.902,23.275z M36.867,30.74c-1.666-0.467-3.799-1.6-4.732-4.199 c-0.932-2.6-3.131-2.998-4.797-2.998s-7.098,3.894-7.098,3.894c-1.133,1.001-2.1,6.502-0.967,6.769 c1.133,0.269,1.266-1.533,1.934-3.599c0.666-2.065,3.797-3.466,3.797-3.466s0.201,2.467-0.398,3.866 c-0.599,1.399-1.133,2.866-1.467,6.198s-1.6,3.665-3.799,6.266c-2.199,2.598-0.6,3.797,0.398,3.664 c1.002-0.133,5.865-5.598,6.398-6.998c0.533-1.397,0.668-3.732,0.668-3.732s0,0,2.199,1.867c2.199,1.865,2.332,4.6,2.998,7.73 s2.332,0.934,2.332-0.467c0-1.401,0.269-5.465-1-7.064c-1.265-1.6-3.73-3.465-3.73-5.265s1.199-3.732,1.199-3.732 c0.332,1.667,3.335,3.065,5.599,3.399C38.668,33.206,38.533,31.207,36.867,30.74z",
          "symbolSize": [
            40,
            50
          ],
          "x": "步行",
          "s": "glyph"
        }
      ]
    }
  }
}

• 効果

Publish と Deploy

DataV の Widget の開発が終わったら、開発されたパッケージを DataV へ Publishし、実際の DataV の Dashboard を使ってみます。

publish はとても簡単で、パッケージのフォルダに　datav publish コマンドを実行するだけです。

publish が成功したら、DataV のコンソールでアップロードされた Widget が見えるはずです。 一覧：

最後に Dashboard の編集画面で Widget 一覧を開くと、自分がアップロードした Widget が見えるはずです。

※ Widget をアップロードしてから表示されるまで、時々ブラウザの　Cache　の削除が必要です。

これで、取り込んだ Echarts の図を使用して、Dashboard を作成することができます。

https://datav.aliyuncs.com/share/cb5ac6659dfe3356721c2128d319078d

Alibaba Cloudを始めてみましょう

ソフトバンクは、Alibaba Cloudのアカウント開設から、サービス展開までをお手伝いします。

お問い合わせ窓口