Echarts立体地图加3D柱图可点击可高亮选中的开发
2021/10/30 6:10:49
本文主要是介绍Echarts立体地图加3D柱图可点击可高亮选中的开发,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
注意
- echarts请使用v5.1.0以上版本,低版本会无法显示,或者无法触发点击事件。
- 若有闪屏bug,不要设置
temporalSuperSampling
属性。 - 注意图层顺序。
实现原理
借助 echarts 和 echarts-gl:
- 实现立体地图使用
geo3d
。 - 立体柱图使用
bar3d
。 - 在
geo3d
的这层click
事件无法触发,遂在其上添加map3d层。 map3d
无选中的配置,dispatchAction
触发highlight
,select
对其不生效。变通办法:将map3d
层设为透明,通过动态设置geo3d
层的regions
达到选中高亮的效果。
主要代码实现
预览地址:https://www.makeapie.com/editor.html?c=xelBBd_iFR&v=1
具体细节可看注释及代码。
// 部分测试数据 var originalDatas = { dataMap: [ { name: '目标数', field: 'mbs', unit: '万人' }, { name: '完成数', field: 'wcs', unit: '万人' }, ], datas: [ { adcode: 330100, name: '杭州市', lng: '119.053576', lat: '29.887459', wcs: 10, mbs: 50, wcl: 100, } } // zjJsonUrl为地图的geoJson $.get(zjJsonUrl, (res) => { echarts.registerMap('map', res); var series = [ { type: 'map3D', map: 'map', // 设置为透明 itemStyle: { color: [1, 1, 1, 0], }, emphasis: { itemStyle: { color: [1, 1, 1, 0], }, }, data: originalDatas.datas, viewControl: { beta: 45, //x轴旋转 alpha: 45, //Y轴旋转 } }, ]; $.each(originalDatas.dataMap, function (i, seriesItem) { series.push({ name: seriesItem.name, type: 'bar3D', coordinateSystem: 'geo3D', shading: 'lambert', label: { show: true, position: 'top', formatter: (params) => { return params.value[2]; }, }, data: originalDatas.datas.map((item) => { item.value = [ i == 0 ? item.lng - 0 + 0.05 : item.lng - 0.05, item.lat, item[seriesItem.field], seriesItem.unit, ]; return JSON.parse(JSON.stringify(item)); }), barSize: 2, minHeight: 1, itemStyle: { color: i == 0 ? '#FFB239' : '#5E5FFF', }, emphasis: { label: { show: true }, }, // zlevel: i }); }); option = { tooltip: { trigger: 'item', formatter: function (params) { if (params.seriesType == 'bar3D') { return [params.seriesName, params.name + ':' + params.value[2] + (params.value[3] || '')].join( '<br />' ); } }, }, geo3D: { show: true, map: 'map', viewControl: { beta: 45, //x轴旋转 alpha: 45, //Y轴旋转 panMouseButton: 'right', //平移操作使用的鼠标按键 rotateMouseButton: 'left', //旋转操作使用的鼠标按键 }, light: { main: { color: '#ffffff', intensity: 1, shadow: false, }, }, itemStyle: { color: '#4D96FA', borderWidth: 1, borderColor: '#fff', opcity: 1, }, shading: 'realistic', label: { show: true, color: '#fff', distance: 5, }, emphasis: { label: { show: true }, itemStyle: { color: '#36A8FF' }, }, groundPlane: false, data: originalDatas.datas, // 将geo3d放在最底层 zlevel:-1 }, series: series, }; myChart.setOption(option); myChart.off('click'); myChart.on('click', function (params) { // 点击获取data中的数据 console.log(params); // 设置选中高亮 let regions = [ { itemStyle: { color: '#36A8FF', opacity: 1 }, label: { show: true }, }, ]; regions[0].name = params.name; option.geo3D.regions = regions; myChart.setOption(option); }); });
这篇关于Echarts立体地图加3D柱图可点击可高亮选中的开发的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-03微信支付提示下单账户与支付账户不一致-icode9专业技术文章分享
- 2024-07-03微信支付提示订单号重复-icode9专业技术文章分享
- 2024-07-02微服务启动nacos注册上去了,但是一直没有收到请求-icode9专业技术文章分享
- 2024-07-02如何检查文件的编码格式-icode9专业技术文章分享
- 2024-07-02sublime 更改编码格式-icode9专业技术文章分享
- 2024-06-30uniAPP 实现全屏左右滚动滚动的效果-icode9专业技术文章分享
- 2024-06-30如何在本地使用授权或插件-icode9专业技术文章分享
- 2024-06-30伪静态规则配置方法汇总-icode9专业技术文章分享
- 2024-06-29易优CMS安装常见问题汇总-icode9专业技术文章分享
- 2024-06-28易优新手必读安装教程-icode9专业技术文章分享