數據可視化優秀案例「阿里數據可視化產品」

《GitHub精選》是我們分享Github中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的是阿里基於商業場景下的數據可視化解決方案——BizCharts。

BizCharts是阿里基於 G2 封裝的 React 圖表庫，具有 G2、React 的全部優點，目前已經在阿里雲、天貓、淘寶、釘釘、飛豬等多個複雜業務場景中應用，在靈活性、易用性、豐富度上滿足常規圖表和高度自定義圖表的業務實現。

特點：

• 基於 G2、React
• 集成大量統計工具
• 強大的擴展能力
• 高自定義能力

快速開始：

1、安裝：

npm install bizcharts --save

2、使用：

創建容器

<div id="mountNode"></div>

使用組件生成圖表

• 引入圖表需要的組件
• 用組件組裝成需要的圖表
• 把圖表渲染到 mountNode 節點上

import React from 'react';import ReactDOM from 'react-dom';import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';// 數據源const data = [

{ genre: 'Sports', sold: 275, income: 2300 },

{ genre: 'Strategy', sold: 115, income: 667 },

{ genre: 'Action', sold: 120, income: 982 },

{ genre: 'Shooter', sold: 350, income: 5271 },

{ genre: 'Other', sold: 150, income: 3710 }

];// 定義度量const cols = { sold: { alias: '銷售量' }, genre: { alias: '遊戲種類' }

};// 渲染圖表ReactDOM.render((

<Chart width={600} height={400} data={data} scale={cols}>

<Axis name="genre" />

<Axis name="sold" />

<Legend position="top" dy={-20} />

<Tooltip />

<Geom type="interval" position="genre*sold" color="genre" />

</Chart>

), document.getElementById('mountNode'));

3、生成圖表

其他樣式：

• 柱狀圖

• 折線圖

• 條形圖

• 餅圖

• 點圖

• 面積圖

• 雷達圖

• 箱形圖

• 燭形圖

• 熱力圖

• 儀錶盤

• 漏斗圖

• 分面圖

• 關係圖

• 地圖