阿里数据可视化产品(数据可视化优秀案例)

发布日期:2025-03-21 14:30:19     手机:https://m.xinb2b.cn/baike/news5718.html    违规举报
核心提示:《GitHub精选》是我们分享Github中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是阿里基于商业场景下的数据可视化解决方案——BizCharts。 BizCharts是阿里基于 G2 封装的 React 图表库,具

阿里数据可视化产品(数据可视化优秀案例)

《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、生成图表

其他样式:

柱状图 折线图 条形图 饼图 点图 面积图 雷达图 箱形图 烛形图 热力图 仪表盘 漏斗图 分面图 关系图 地图
 
 
本文地址:https://xinb2b.cn/baike/news5718.html,转载请注明出处。

推荐图文
推荐百科经验
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  违规举报  |  蜀ICP备18010318号-4  |  百度地图  | 
Processed in 0.065 second(s), 81 queries, Memory 0.51 M