JavaScript自定义图表
更新时间: 2022-12-28 14:32:24
阅读 3887
1. 概述
利用大屏的自定义图表控件,编写JavaScript绘制自定义图表的过程与报告相同,这里给一个echarts 3D地图的案例。
2. 3D地图
将经纬度数据、想要展示的度量值,和地理坐标对应的城市名称维度拖入数据面板,然后利用外部请求获取地理位置信息,加上刚刚引入的数据,通过echarts gl绘制如下3D地图:
var barDataSet = dataSet.map(function (dataItem) {
return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
});
var maxValue = Math.max(...barDataSet.map(d => d[2]));
window.top.fetch('https://ydcdn.nosdn.127.net/echarts/assets/map/json/china.json').then(e => e.json()).then(chinaJson => {
echarts.registerMap('china', chinaJson);
myChart.setOption({
backgroundColor: 'transparent',
geo3D: {
map: 'china',
shading: 'lambert',
label: {
show: true,
textStyle: {
color: '#fff', //地图初始化区域字体颜色
fontSize: 12,
opacity: 1,
backgroundColor: 'rgba(0,0,0,0)'
},
},
light: {
main: {
intensity: 3,
shadow: true,
shadowQuality: 'high',
alpha: 30
},
ambient: {
intensity: 0.3
},
},
viewControl: {
distance: 80,
center: [0, -10, 0],
panMouseButton: 'left',
rotateMouseButton: 'right'
},
groundPlane: {
show: false,
color: '#999'
},
postEffect: {
enable: true,
bloom: {
enable: false
},
SSAO: {
radius: 1,
intensity: 1,
enable: true
},
depthOfField: {
enable: false,
focalRange: 10,
blurRadius: 10,
fstop: 1
}
},
temporalSuperSampling: {
enable: true
},
itemStyle: {
color: '#222535',
borderWidth: 1,
borderColor: '#4B516D',
},
regionHeight: 2
},
visualMap: {
max: maxValue,
calculable: true,
realtime: false,
inRange: {
color: ['#0B1F4C', '#303369', '#3D429A', '#A02B3B', '#C8352C', '#D04E32', '#D76638', '#E0823F', '#E89D46', '#EDAD49', '#F6C750']
},
outOfRange: {
colorAlpha: 0
}
},
series: [{
type: 'bar3D',
coordinateSystem: 'geo3D',
shading: 'lambert',
data: barDataSet,
barSize: 0.5,
minHeight: 0.2,
silent: false,
itemStyle: {
color: 'orange'
},
emphasis: {
label: {
show: true,
formatter: p => dataSet[p.dataIndex][3] + ': ' + p.data[2]
}
}
}]
});
})
绘制完成的3D地图如下:
3. 3D柱状地图
echarts图表控件不只能绘制echarts图表,实际上它有无尽的可能,你可以在里面绘制一个自己的表格,也可以引入外部插件,如d3,antv等可视化框架,完成你想要绘制的任何酷炫图表。下面以antv L7地理空间数据可视化框架为例,绘制一张3D柱状地图:
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/@antv/l7'; // 引入antv L7框架
document.getElementsByTagName('head')[0].appendChild(script);
script.onload = function () {
const map = document.querySelector('#main');
map.style = 'position:absolute;top:0;bottom:0;width:100%;'
emitter.emit('renderDone');
const scene = new L7.Scene({
id: 'main',
map: new L7.GaodeMap({
pitch: 35.210526315789465,
style: 'dark',
center: [ 104.288144, 31.239692 ],
zoom: 4.4
})
});
scene.on('loaded', () => emitter.emit('renderDone')); // 图表加载完成后手动触发图表renderDone
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json())
.then(data => {
const pointLayer = new L7.PointLayer({})
.source(data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w'
}
})
.shape('cylinder')
.size('t', function(level) {
return [ 1, 2, level * 2 + 20 ];
})
.active(true)
.color('t', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'
])
.style({
opacity: 1.0
});
scene.addLayer(pointLayer);
});
}
emitter.on('resize', () => {
// 在这里处理报表resize事件
});
绘制完成的3D地图如下:
需要注意的点是绘制非echarts时,需要手动在代码中监听图表的renderDone事件,保证有数能知道该自定义报表何时绘制完成,否则会影响该报表的导出截图、定时邮件功能;另外如果需要监听报表resize事件,可在代码中监听resize事件自行处理,以上2个事件在上述例子中均有代码实现说明。
文档反馈
以上内容对您是否有帮助?