mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
259 lines
7.0 KiB
JavaScript
259 lines
7.0 KiB
JavaScript
export default {
|
||
title: '图表示例',
|
||
body: [
|
||
{
|
||
type: 'grid',
|
||
columns: [
|
||
{
|
||
type: 'panel',
|
||
title: '本地配置示例 支持交互',
|
||
name: 'chart-local',
|
||
body: [
|
||
{
|
||
type: 'chart',
|
||
config: {
|
||
title: {
|
||
text: '极坐标双数值轴'
|
||
},
|
||
legend: {
|
||
data: ['line']
|
||
},
|
||
polar: {
|
||
center: ['50%', '54%']
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross'
|
||
}
|
||
},
|
||
angleAxis: {
|
||
type: 'value',
|
||
startAngle: 0
|
||
},
|
||
radiusAxis: {
|
||
min: 0
|
||
},
|
||
series: [
|
||
{
|
||
coordinateSystem: 'polar',
|
||
name: 'line',
|
||
type: 'line',
|
||
showSymbol: false,
|
||
data: [
|
||
[0, 0],
|
||
[0.03487823687206265, 1],
|
||
[0.06958655048003272, 2],
|
||
[0.10395584540887964, 3],
|
||
[0.13781867790849958, 4],
|
||
[0.17101007166283433, 5],
|
||
[0.2033683215379001, 6],
|
||
[0.2347357813929454, 7],
|
||
[0.26495963211660245, 8],
|
||
[0.2938926261462365, 9],
|
||
[0.3213938048432697, 10]
|
||
]
|
||
}
|
||
],
|
||
animationDuration: 2000
|
||
},
|
||
clickAction: {
|
||
actionType: 'dialog',
|
||
dialog: {
|
||
title: '详情',
|
||
body: [
|
||
{
|
||
type: 'tpl',
|
||
tpl: '<span>当前选中值 ${value|json}<span>'
|
||
},
|
||
|
||
{
|
||
type: 'chart',
|
||
api: '/api/mock2/chart/chart1'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'panel',
|
||
title: '远程图表示例(返回值带function)',
|
||
name: 'chart-remote',
|
||
body: [
|
||
{
|
||
type: 'chart',
|
||
api: '/api/mock2/chart/chart1'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'panel',
|
||
title: 'Form+chart组合',
|
||
body: [
|
||
{
|
||
type: 'form',
|
||
title: '过滤条件',
|
||
target: 'chart1,chart2',
|
||
submitOnInit: true,
|
||
className: 'm-b',
|
||
wrapWithPanel: false,
|
||
mode: 'inline',
|
||
body: [
|
||
{
|
||
type: 'input-date',
|
||
label: '开始日期',
|
||
name: 'starttime',
|
||
value: '-8days',
|
||
maxDate: '${endtime}'
|
||
},
|
||
|
||
{
|
||
type: 'input-date',
|
||
label: '结束日期',
|
||
name: 'endtime',
|
||
value: '-1days',
|
||
minDate: '${starttime}'
|
||
},
|
||
{
|
||
type: 'input-text',
|
||
label: '条件',
|
||
name: 'name',
|
||
addOn: {
|
||
type: 'submit',
|
||
label: '搜索',
|
||
level: 'primary'
|
||
}
|
||
}
|
||
],
|
||
actions: []
|
||
},
|
||
{
|
||
type: 'divider'
|
||
},
|
||
{
|
||
type: 'grid',
|
||
className: 'm-t-lg',
|
||
columns: [
|
||
{
|
||
type: 'chart',
|
||
name: 'chart1',
|
||
initFetch: false,
|
||
api: '/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}'
|
||
},
|
||
{
|
||
type: 'chart',
|
||
name: 'chart2',
|
||
initFetch: false,
|
||
api: '/api/mock2/chart/chart2?name=$name'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'chart',
|
||
mapURL: '/api/map/HK',
|
||
mapName: 'HK',
|
||
height: 600,
|
||
config: {
|
||
title: {
|
||
text: 'Population Density of Hong Kong （2011）',
|
||
subtext: 'Data from Wikipedia'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}<br/>{c} (p / km2)'
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
orient: 'vertical',
|
||
left: 'right',
|
||
top: 'center',
|
||
feature: {
|
||
dataView: {readOnly: false},
|
||
restore: {},
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
visualMap: {
|
||
min: 800,
|
||
max: 50000,
|
||
text: ['High', 'Low'],
|
||
realtime: false,
|
||
calculable: true,
|
||
inRange: {
|
||
color: ['lightskyblue', 'yellow', 'orangered']
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '香港18区人口密度',
|
||
type: 'map',
|
||
map: 'HK',
|
||
label: {
|
||
show: true
|
||
},
|
||
data: [
|
||
{name: '中西区', value: 20057.34},
|
||
{name: '湾仔', value: 15477.48},
|
||
{name: '东区', value: 31686.1},
|
||
{name: '南区', value: 6992.6},
|
||
{name: '油尖旺', value: 44045.49},
|
||
{name: '深水埗', value: 40689.64},
|
||
{name: '九龙城', value: 37659.78},
|
||
{name: '黄大仙', value: 45180.97},
|
||
{name: '观塘', value: 55204.26},
|
||
{name: '葵青', value: 21900.9},
|
||
{name: '荃湾', value: 4918.26},
|
||
{name: '屯门', value: 5881.84},
|
||
{name: '元朗', value: 4178.01},
|
||
{name: '北区', value: 2227.92},
|
||
{name: '大埔', value: 2180.98},
|
||
{name: '沙田', value: 9172.94},
|
||
{name: '西贡', value: 3368},
|
||
{name: '离岛', value: 806.98}
|
||
],
|
||
// 自定义名称映射
|
||
nameMap: {
|
||
'Central and Western': '中西区',
|
||
'Eastern': '东区',
|
||
'Islands': '离岛',
|
||
'Kowloon City': '九龙城',
|
||
'Kwai Tsing': '葵青',
|
||
'Kwun Tong': '观塘',
|
||
'North': '北区',
|
||
'Sai Kung': '西贡',
|
||
'Sha Tin': '沙田',
|
||
'Sham Shui Po': '深水埗',
|
||
'Southern': '南区',
|
||
'Tai Po': '大埔',
|
||
'Tsuen Wan': '荃湾',
|
||
'Tuen Mun': '屯门',
|
||
'Wan Chai': '湾仔',
|
||
'Wong Tai Sin': '黄大仙',
|
||
'Yau Tsim Mong': '油尖旺',
|
||
'Yuen Long': '元朗'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
type: 'chart',
|
||
loadBaiduMap: true,
|
||
ak: 'LiZT5dVbGTsPI91tFGcOlSpe5FDehpf7',
|
||
config: {
|
||
bmap: {
|
||
center: [116.414, 39.915],
|
||
zoom: 14,
|
||
roam: true
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|