大數據系列 | 阿里雲datav數據可視化（使用json文件生成可視化動態圖標）

簡介

DataV 數據可視化是搭建每年天貓雙十一作戰大屏的幕後功臣，ECharts 是廣受數據可視化從業者推崇的開源圖表庫。從今天開始，DataV 企業版接入了 ECharts 圖表組件，當你使用 DataV 搭建可視化項目時，可以輕鬆地插入 ECharts，這意味着更豐富多樣的圖表效果，也讓編程小白們可以通過圖形界面而非代碼配置 ECharts。

DataV 首批接入的 ECharts 圖表總共有15種。囊括了關係、柱形、熱力圖、儀表盤等各種常用圖形。

官方地址：https://help.aliyun.com/document_detail/141443.html

配置

直接按照這個教程：https://help.aliyun.com/document_detail/86926.html

json數據（直播觀看在線人數統計）

[
    {
        "timer": "2022-05-11 09:01:01",
        "viewer": "89"
    },
    {
        "timer": "2022-05-11 09:02:01",
        "viewer": "98"
    },
    {
        "timer": "2022-05-11 09:03:01",
        "viewer": "101"
    },
    {
        "timer": "2022-05-11 09:04:01",
        "viewer": "103"
    },
    {
        "timer": "2022-05-11 09:05:01",
        "viewer": "106"
    },
    {
        "timer": "2022-05-11 09:06:01",
        "viewer": "107"
    },
    {
        "timer": "2022-05-11 09:07:01",
        "viewer": "110"
    },
    {
        "timer": "2022-05-11 09:08:01",
        "viewer": "112"
    },
    {
        "timer": "2022-05-11 09:09:01",
        "viewer": "114"
    },
    {
        "timer": "2022-05-11 09:10:01",
        "viewer": "114"
    },
    {
        "timer": "2022-05-11 09:11:01",
        "viewer": "114"
    },
    {
        "timer": "2022-05-11 09:12:01",
        "viewer": "115"
    },
    {
        "timer": "2022-05-11 09:13:01",
        "viewer": "115"
    },
    {
        "timer": "2022-05-11 09:14:01",
        "viewer": "115"
    },
    {
        "timer": "2022-05-11 09:15:01",
        "viewer": "115"
    },
    {
        "timer": "2022-05-11 09:16:01",
        "viewer": "114"
    },
    {
        "timer": "2022-05-11 09:17:01",
        "viewer": "115"
    },
    {
        "timer": "2022-05-11 09:18:01",
        "viewer": "114"
    },
    {
        "timer": "2022-05-11 09:19:01",
        "viewer": "114"
    },
    {
        "timer": "2022-05-11 09:20:01",
        "viewer": "114"
    },
    {
        "timer": "2022-05-11 09:21:01",
        "viewer": "114"
    },
    {
        "timer": "2022-05-11 09:22:01",
        "viewer": "113"
    },
    {
        "timer": "2022-05-11 09:23:01",
        "viewer": "115"
    },
    {
        "timer": "2022-05-11 09:24:01",
        "viewer": "115"
    },
    {
        "timer": "2022-05-11 09:25:01",
        "viewer": "116"
    },
    {
        "timer": "2022-05-11 09:26:01",
        "viewer": "116"
    },
    {
        "timer": "2022-05-11 09:27:01",
        "viewer": "116"
    },
    {
        "timer": "2022-05-11 09:28:01",
        "viewer": "116"
    },
    {
        "timer": "2022-05-11 09:29:01",
        "viewer": "116"
    },
    {
        "timer": "2022-05-11 09:30:01",
        "viewer": "117"
    },
    {
        "timer": "2022-05-11 09:31:01",
        "viewer": "116"
    },
    {
        "timer": "2022-05-11 09:32:01",
        "viewer": "114"
    },
    {
        "timer": "2022-05-11 09:33:01",
        "viewer": "116"
    },
    {
        "timer": "2022-05-11 09:34:01",
        "viewer": "116"
    },
    {
        "timer": "2022-05-11 12:04:01",
        "viewer": "107"
    }
]

 

圖形選擇

數據源配置

 注意：這裏的x、y需要映射成自己json數據的timer、viewer

設置數據源

最後工作臺展示要過

發佈後，通過分享預覽圖