amos-viz
v1.6.1
Published
amos viz
Downloads
35
Readme
amos-viz
some charts for react wrapper.
extra:
- dragdesign
- svg
- canvas
- fusioncharts
- board
- media
- echarts plugin [ 'wordcloud', 'liquidfill' ]
- filetools
dependencies
file-saver use to save file, such as export cvs,json...
add
svg.js
to support svg animate since[email protected]
. use@svgdotjs/svg.js@3
install
npm i --save amos-viz
usage
echarts
basic use
import AmosEcharts from 'amos-viz/lib/echarts';
// render echarts option.
<AmosEcharts option={this.getOption()} />
bar demo
import React, { Component } from 'react';
import { BarChart } from 'amos-viz/lib/echarts';
import BarOptions from 'amos-viz/lib/echarts/options/bar';
import { barMock } from './../datas';
class BarDemo extends Component {
getOptions = () => {
return BarOptions.singleBarOption(barMock.xdata, barMock.ydata);
}
render() {
const option = this.getOptions();
return (
<BarChart
option={option}
/>
);
}
}
export default BarDemo;
line demo
import React, { Component } from 'react';
import { LineChart } from 'amos-viz/lib/echarts';
import LineOptions from 'amos-viz/lib/echarts/options/line';
import { lineMock } from './../datas';
class BarDemo extends Component {
getOptions = () => {
return LineOptions.singleLineOption(lineMock.xdata, lineMock.ydata);
}
render() {
const option = this.getOptions();
return (
<LineChart
option={option}
/>
);
}
}
export default BarDemo;
附录
mockdatas
const randomData = () => {
return Math.round(Math.random() * 1000);
};
export const barMock = {
xdata: [ 0, 1, 2, 3, 4, 5, 6 ],
ydata: [ 2.1, 4.9, 5.1, 6.3, 4.1, 5.5 ]
};
export const lineMock = {
xdata: [ 0, 1, 2, 3, 4, 5, 6 ],
ydata: [ 2.1, 4.9, 5.1, 6.3, 4.1, 5.5 ]
};
export const mapMock = [
{ name: '北京', value: randomData() },
{ name: '天津', value: randomData() },
{ name: '上海', value: randomData() },
{ name: '重庆', value: randomData() },
{ name: '河北', value: randomData() },
{ name: '河南', value: randomData() },
{ name: '云南', value: randomData() },
{ name: '辽宁', value: randomData() },
{ name: '黑龙江', value: randomData() },
{ name: '湖南', value: randomData() },
{ name: '安徽', value: randomData() },
{ name: '山东', value: randomData() },
{ name: '新疆', value: randomData() },
{ name: '江苏', value: randomData() },
{ name: '浙江', value: randomData() },
{ name: '江西', value: randomData() },
{ name: '湖北', value: randomData() },
{ name: '广西', value: randomData() },
{ name: '甘肃', value: randomData() },
{ name: '山西', value: randomData() },
{ name: '内蒙古', value: randomData() },
{ name: '陕西', value: randomData() },
{ name: '吉林', value: randomData() },
{ name: '福建', value: randomData() },
{ name: '贵州', value: randomData() },
{ name: '广东', value: randomData() },
{ name: '青海', value: randomData() },
{ name: '西藏', value: randomData() },
{ name: '四川', value: randomData() },
{ name: '宁夏', value: randomData() },
{ name: '海南', value: randomData() },
{ name: '台湾', value: randomData() },
{ name: '香港', value: randomData() },
{ name: '澳门', value: randomData() }
];
export const pieMock = {
data: [ 100, 200, 300, 400, 189 ],
legends: [ 'fed','bed','pro','full','other' ]
};
let count = 51;
export const dynamicMock = (option) => {
let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
option.title.text = `动态刷新demo,刷新秒数:${new Date().getSeconds()}`;
let data0 = option.series[0].data;
let data1 = option.series[1].data;
data0.shift();
data0.push(Math.round(Math.random() * 1000));
data1.shift();
data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
option.xAxis[0].data.shift();
option.xAxis[0].data.push(axisData);
option.xAxis[1].data.shift();
option.xAxis[1].data.push(count++);
return option;
};
widgets
widgetClass
- constructor(params)
- isLegal()
- detectValidate()
- getWidgetOptions()
- completeParams()
- beforeStart()
- afterStart()
- beforeRender()
- afterRender()
- beforeEnd()
- afterEnd()
architect
- WidgetApp
- SketchApp
初始化:
import { WidgetApp, SketchApp } from 'amos-viz/lib/widgets/architect';
WidgetApp.use([], 'basic/g1');
WidgetApp.use([], 'basic/g2');
WidgetApp.use([], 'basic/g3');
WidgetApp.use([], 'basic/g4');
WidgetApp.custom((plugins, wa) => {
...
});
// sketch
SketchApp.use({
a: ACom,
b: BCom,
...
});
使用时:
import { WidgetApp, SketchApp } from 'amos-viz/lib/widgets/architect';
WidgetApp.plugins; // Map
SketchApp.sketches; // {}
createWidgets
const params = {
// 图形 key
key: 'basic-line',
category: category.deviceWidgets,
// label
label: '直线',
name: '直线',
nodeType: 'line',
// class name
displayName: 'BasicLine',
descr: {
title: '直线',
content: ['绘制直线', '元素之间的连线']
},
// 缩略图 (图形列表中展示的图标)
thumb: thumbMapping.deviceWidgets.zhixian,
// 效果图 (画布上展示的图形)
sketch: '',
style: {
width: 300,
height: 50
},
template: templates.svg,
// html or svg component tag
tag: 'line',
// 组件设置
compomentSetting: {
// 显示设置
display: [
{ key: 'direction', label: '方向', type: 'radio',data: { radios: lineDirection } }
],
assembledForm: [
{ key: 'svgDisplay', component: 'svgDisplay', descr: 'svg类型通用显示form' }
]
},
// 数据设置
dataSetting: {
// form feilds
feilds: [
],
// 已组装好的界面
assembledForm: [
]
}
};
const all = createWidgets([
params
]);
validate widgets
注意,显示配置信息、数据绑定信息,禁止存放在初始化控件配置信息中,即
dataConfig 和 visualParams
键禁止在系统初始化中出现。同时数据绑定或者显示设置form中需要的初始化数据,禁止设置在dataConfig 和 visualParams
中。
// 默认一个widget 配置项,必须包含的key值(如果param中缺乏该系列键,则校验不合格)如下:
const schemaKey = [
'key',
'category',
'label',
'name',
'nodeType',
'displayName',
'descr',
'thumb',
'sketch',
'template',
'tag',
'compomentSetting',
'dataSetting'
];
// 排除校验的key值(如下键为非必须键,部分widget可以进行设置)如下:
const exceptKey = [
'style',
'widgetApi',
'devicesApi',
'chartOption',
'tables',
'extraConfig' // 除以上键,还仍需设置额外自定义键,则统一放在 `extraConfig` 键下
];
registerSketch
- registerSketch(key: String, Component: React.Component)
- registerSketchAll(obj: { key: String, Component: React.Component })
- getSketchByKey(key: string, Unknown?: React.Component)
commonRegister
/**
* 内部 类型
*/
const innerModularType = {
sketchComponent: 'sketchComponent',
dynamicForm: 'dynamicForm',
assembledForm: 'assembledForm',
extendChart: 'extendChart',
bizForm: 'bizForm'
};
/**
* 卸载模块
*
* @param {any} key
* @returns {boolean} 卸载结果
*/
uninstallModulars(key)
/**
* 卸载所有模块
*/
uninstallAll()
/**
* 获取所有的modular
*/
getAllModulars()
/**
* 获取指定 type 类型的所有 modulars
* @param {string} type
*/
getModularsByType(type)
/**
* 获取指定 type 类型的所有 modulars, 返回 object
* @param {string} type
*/
getObjModularsByType(type)
/**
* 转化为 object
* @param {Map} mapInstance
*/
convert2object(mapInstance)
/**
* 返回指定模块类型及别名是否已被注册。
* @param {string} modularType
* @param {string} modularAlias
*/
hasModularClass(modularType, modularAlias)
/**
* 注册指定模块类型及别名对应的类。
* @param {string} modularType
* @param {string} modularAlias
* @param {class} modularClass
*/
registerModularClass(modularType, modularAlias, modularClass)
/**
* 返回指定模块类型及别名对应的类。
* @param {string} modularType
* @param {string} modularAlias
* @param {Component} defaultModular
*/
getModularClass(modularType, modularAlias, defaultModular)
/**
* 注册具体的 sketch component
* @param {string} modularType
* @param {string} modularAlias
*/
registerSketchComponent(modularAlias, modularClass)
/**
* 注册动态表单类,用于扩展原有的动态 form
* @param {string} modularType
* @param {string} modularAlias
*/
registerDynamicForm(modularAlias, modularClass)
/**
* 注册适配好的 form,用于实现固定form
* @param {string} modularType
* @param {string} modularAlias
*/
registerAssembledForm(modularAlias, modularClass)
/**
* 注册扩展的 chart,用于扩展已有的chart
* @param {string} modularType
* @param {string} modularAlias
*/
registerExtendChart(modularAlias, modularClass)
/**
* 注册业务form,用于填充业务 form
* @param {string} modularType
* @param {string} modularAlias
*/
registerBizForm(modularAlias, modularClass)
// 注册 temp 组件
commonRegister.registerBizForm('temp', Component);
// 使用 temp 组件
const Temp = commonRegister.getModularClass(innerModularType.bizForm , 'temp');
filetools
exportFile
/**
* 导出blob
*
* @param {object} content
* @param {string} filename
* @param {string} extname
*/
exportBlob(content, filename = '', extname = defaultExtName)
/**
* 下载数据
*
* @param {string} content
* @param {string} filename
* @param {string} extname
*/
downloadContent(content, filename = '', extname = defaultExtName)
importFile
/**
* 导入 blob
* @param {any} selectedFile
* @param {object} param
*/
importBlob(selectedFile, { accept = 'dat' , success = noop, error = noop })
/**
* 导入 text
* @param {any} selectedFile
* @param {object} param
*/
importText(selectedFile, { accept = 'dat' , success = noop, error = noop })
toZipFile
使用到了 JSZip 插件,更多文档与demo移步 JSZip 文档
import { toZipFile } from 'amos-viz/lib/filetools';
// or
// import { toZipFile } from 'amos-viz/lib/filetools/toZipFile';
/**
* 将文件生成为 zip
* @param {array} fileList
* @param {string} toName
*/
toZipFile(fileList, toName)
const fileList = [
{ filename: 'hello.txt', content: 'balabalabala...' },
{ filename: 'index.js', content: 'var age = 22' },
{ filename: 'aa/bb.txt', content: 'balabalabala....' }
];
const toName = 'demo.zip'
App
Application
自动组装 router-component,依赖于 react-router v4 react-router-dom
import Application from 'amos-viz/lib/app/Application';
const app = new Application({
...
});
app.start({
routes: [
{
path: '*',
component: Demo,
},
],
container: 'app' // id
});
createApp
import createApp from 'amos-viz/lib/app/createApp';
createApp({
routes: [
{
path: '*',
component: Demo,
},
],
container: 'app' // id
});
SingleApp
import SingleApp from 'amos-viz/lib/app/SingleApp';
// 直接启动
new SingleApp().start({ spa: MyComponent, container: '__demo__' });
// 延后渲染
const SPA = new SingleApp({ container: '__demo__' });
SPA.start({ spa: YourComponent });
createSPA
import createSPA from 'amos-viz/lib/app/createSPA';
createSPA({
spa: MyDemo,
container: 'app'
});
docsite
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>doc</title>
<script src="./node_modules/amos-viz/docsite/amosvizdoc.js"></script>
</head>
<body>
<div id="app"></div>
<script>
console.log(AmosVizDoc);
var createUI = window.AmosVizDoc;
createUI();
</script>
</body>
</html>
注意事项
amos-viz
库中,集中处理所有的可视化工程,因此,不建议直接导出默认模块。具体使用那些模块,直接定位至相应模块即可。如:
import { BarChart } from 'amos-viz/lib/echarts';
import DragDesign from 'amos-viz/lib/dragdesign';
import AdaptiveBoard from 'amos-viz/lib/board/AdaptiveBoard';
umd 模块支持
since v1.4.0 版本之后,新增 echarts umd 模式支持,内部所有的 echarts 模块,均需要采用该方式单独引入。
umd/viz-echarts.umd.js
全局暴露:VizEcharts = {...}
const = {
BarChart,
BarOptions,
HistogramOptions,
LineChart,
LineOptions,
LiquidfillOptions,
MapChart,
MapOptions,
PieChart,
PieOptions,
Pipeline,
RadarOptions,
ReactEcharts,
WcloudOptions,
chartType,
chartUtils,
customColors,
defaultColors,
echarts,
// connectCharts 模块
connectCharts,
DATA_TYPES,
emptyProcessor,
chartDefaultsConfig,
operateType
} = VizEcharts;
建议直接使用 externals 的方式,使用 umd 模块。
自行加入 react、react-dom、prop-types
const externals = {
'amos-viz/lib/echarts/umd': 'VizEcharts'
};
组件内部使用:
import {
BarChart,
BarOptions,
HistogramOptions,
LineChart,
LineOptions,
LiquidfillOptions,
MapChart,
MapOptions,
PieChart,
PieOptions,
Pipeline,
RadarOptions,
ReactEcharts,
WcloudOptions,
chartType,
chartUtils,
customColors,
defaultColors,
echarts
} from 'amos-viz/lib/echarts/umd';
注意,since v1.5.0 之后版本,umd 支持独立引入外部的
echarts、echarts map、echarts-liquidfill、echarts-wordcloud
,其中,umd 目录下支持上述3.8
版本的相关脚本。
<!-- 引入公共脚本 -->
<script src="/node_modules/react/umd/react.development.js"></script>
<script src="/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="/node_modules/prop-types/prop-types.js"></script>
<script src="./umd/echarts.min.js"></script>
<script src="./umd/echarts-liquidfill.min.js"></script>
<script src="./umd/echarts-wordcloud.min.js"></script>
<script src="./umd/viz-echarts.split.js"></script>
<!-- 使用 map 数据 -->
<script src="./umd/map/china.js"></script>
online demo
changelog
2018-12-6 v1.0.21
modify register class check.
2018-11-5 v1.0.20
add editor add widget validate
extraConfig
key2018-11-1 v1.0.19
add toZipFile
2018-10-23 v1.0.18
add widgets core, plugin core
Lecense
MIT