大屏

html,body,#container {
margin: 0;
padding: 0;
width: 5376px;
height: 1944px;
background-color: #000;
}

踩坑

现有的echarts amap插件非官方提供，巨坑，现排雷。

echarts-extension-amap插件使用，存在的问题：（推荐使用这个）

layer.render无效，echart动效无法随amap的移动同步渲染，有延迟

    //layer = myChart.getModel().getComponent('amap').getLayer();//下面是确保高德地图渲染的时候，echarts同时也需要再次渲染一次，保持位置的同步//layer.render = function() {//   myChart.setOption({//      series: series//  });//  }myChart.setOption({ animation: false});
function initMapOn() {map.on('dragging', ()=>{myChart.setOption({series: series});})
}

echarts图层和amap元素图层的事件，只能触发一个图层的事件

 // echarts-extension-amap.js插件渲染的图层，覆盖掉了amap渲染的Marks图层的光标事件// 大屏一般都是做展示用，很少需要click，故这个坑可以合理避免————将点击事件集中到Marks图层上。#container .amap-maps{>div:last-child {pointer-events: none !important;}}

echarts-amap插件使用，存在的问题：
4. 不兼容2.0版本的高德地图

//插件无升级打算。
老大：可能是人升官了，所以不升级了，就是这么现实！
我：震惊！！！我好菜，我不配！！！

echarts图层和amap元素图层的事件，只能触发一个图层的事件

代码

<script src="./util/jquery-3.6.0.min.js" charset="utf-8"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=【你的key】"></script>
<script src="./util/AmapUI.js" type="text/javascript" charset="utf-8"></script>
<script src="./util/echarts.min.js"></script>
<script src="./util/echarts-extension-amap.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="./util/echarts-amap.min.js" type="text/javascript" charset="utf-8"></script>--><script src="./data/markers.js" charset="utf-8"></script>
<script src="js/initEchartMap.js" charset="utf-8"></script>
<script src="./js/index.js" charset="utf-8"></script>

$(function () {// initMap();// initMapLayer();initEchartMap();initMapPlugin()initMapOn();drawMapMakers();drawEchartScatter();addMarkerLabelAnimate();
});

var myChart = '';
var series = [];var map = '';
var clerkMarker = '';function initEchartMap() {myChart = echarts.init(document.getElementById('container'));myChart.setOption({title: {show: false,text: '',subtext: '',left: 'center',textStyle: {color: '#fff'}},amap: {viewMode: '3D',center: [70, 30],resizeEnable: true,pitchEnable: true,buildingAnimation: true,expandZoomRange: true,animateEnable: false,defaultCursor: 'pointer',zIndex:1000,zoom: 4,zooms: [3, 6],pitch: 0,},animation: false,series: []});map = myChart.getModel().getComponent('amap').getAMap();
}function initMap() {map = new AMap.Map('container', {center: [70, 30],resizeEnable: true,pitchEnable: true,buildingAnimation: true,expandZoomRange: true,animateEnable: false,defaultCursor: 'pointer',zoom: 4,zooms: [3, 6],pitch: 0,});
}function initMapLayer() {let disCountry = new AMap.DistrictLayer.Country({zIndex: 3,depth: 1,SOC: 'CHN',opacity: 1,styles: {'stroke-width': 2,'nation-stroke': 'rgba(255,255,59,1)','province-stroke': '#afafaf','coastline-stroke': '','fill': '',}});let satellite = new AMap.TileLayer.Satellite({opacity: 1,zIndex: 2,detectRetina: true});map.setLayers([disCountry, satellite]);
}function initMapPlugin() {AMap.plugin('AMap.DistrictLayer',function(){//异步加载插件initMapLayer();});
}function drawMapMakers(value) {var markers;if (typeof (value) === 'undefined') {markers = getRealPoints();} else {markers = value;}markers.forEach((marker, index) => {let isRotate = '';let anchor = 'bottom-left';let direction = 'right';let offsetY = -58;let cirleStyle = '';let font = 'font-weight: 500;font-size: 32px;';if (marker.value === 'YongKang') {anchor = 'bottom-right';isRotate = 'transform:rotateY(180deg)';direction = 'left';cirleStyle = 'transform: scale(2);background-color: #2271c0;';font = 'font-weight: 700;font-size: 40px;';}if (marker.value === 'Hangzhou' || marker.value === 'Shenzhen') {anchor = 'top-left';isRotate = 'transform:rotateX(180deg)';offsetY = 58;}let markerDom = `<div class="custom-marker" style="${isRotate}">
<div class="circle">
<span  style="${cirleStyle}"></span>
</div><img class="line" src="./images/line.png"/></div>`;let labelDom = `<div class="label" style="${font}">${marker.name}</div>`;clerkMarker = new AMap.Marker({map: map,offset: new AMap.Pixel(0, 0),visible: true,content: markerDom,position: marker.coord,anchor: anchor,label: {offset: new AMap.Pixel(0, offsetY),content: labelDom,direction: direction,}});clerkMarker.value = marker.value;clerkMarker.classIndex = index;clerkMarker.on('click', show3DPanel);})
}function drawEchartScatter(value) {let scatters;if (typeof (value) === 'undefined') {scatters = getRealPoints();} else {scatters = value;}series.push({type: 'effectScatter',coordinateSystem: 'amap',zlevel: 0,rippleEffect: { //涟漪特效 ---改动前color: '#ddd',period: 4, //动画时间，值越小速度越快brushType: 'stroke', //波纹绘制方式 stroke, fillscale: 8 //波纹圆环最大限制，值越大波纹越大},label: {normal: {show: false,position: 'right', //显示位置offset: [5, 0], //偏移设置formatter: "{custom|{b}}",rich: {custom: {fontSize: 24,fontFamily: '思源黑体 CN Medium',lineHeight: 41,color: 'rgba(244,188,37,1)',opacity: 1}}},emphasis: {show: true}},symbol: 'circle',symbolSize: 18,itemStyle: {normal: {show: false,color: 'white'}},data: scatters.map(function (dataItem) {return {value: dataItem.coord.concat([1000]),};}),});myChart.setOption({series: series});
}function show3DPanel(e) {let value = e.target.value || e;if (typeof (bindcmd) != "undefined") {if (e.target.value) {bindcmd.show3DPanel(value);} else {bindcmd.show3DPanel('');}} else {(async function () {await CefSharp.BindObjectAsync("bindcmd");if (e.target.value) {bindcmd.show3DPanel(e.target.value);} else {bindcmd.show3DPanel('');}})();}e.target.setzIndex(e.target.getzIndex() + 1);
}function initMapOn() {map.on('dragging', ()=>{console.log(1);myChart.setOption({series: series});})
}function addMarkerLabelAnimate() {let labels = $(".amap-marker-label");// $(".amap-marker-label").animate({'width':'0'},1500);// $(".amap-marker-label").animate({'width':'100%'},1500);
}

【大屏】 amap + echarts 踩坑以及避免办法相关推荐

汽车中控屏显示com点android,老车遇上安卓大屏导航中控的坑
老车遇上安卓大屏导航中控的坑 2020-11-22 23:20:11 2点赞 0收藏 3评论起因事发在前天,我开着13款经典福去加油,加完之后打火,发现用了6年的飞歌车机不亮了.本来以为重新打火就 ...
智慧农业系统 - 可视化大屏（Echarts）管理系统（HTTP(S)协议）物联网平台（MQTT协议）
一.平台功能特点农业数据实时监控,实时视频监控,历史数据分析: 支持电子地图,设备地理位置精确定位: 支持多级组织结构管理,满足集团大客户需求: 可视化大屏展示,数据指标一目了然,彰显企业数字化建设 ...
【ECharts系列|04可视化大屏】ECharts可视化经典案例总结
收集整理一些ECharts实现可视化大屏效果的一些经典案例,方便在工作的时候及时的响应客户,及修改展示,根据业务需求在此基础修改即可. 第一篇为Echarts入门文档,如果没有Echarts基础,理解 ...
大华摄像头的踩坑之路
之前用的海康,基本上没遇到过啥问题.因为这次需求海康旗舰店没有货,因此买的大华,这就是自己给自己挖坑.第一:大华搜寻设备软件configtools基本上只支持win7,win10和linux基本上都不 ...
PyCharm+PyQt5(5.15.2)+mysql， PyQt5连接mysql，踩坑与解决办法
这里写目录标题 1.连接数据库代码 2.错误与解决办法 3.链接 1.连接数据库代码 db = QSqlDatabase.addDatabase('QMYSQL')db.setHostName('lo ...
Flask+Echarts搭建全国疫情可视化大屏
Flask+Echarts搭建全国疫情可视化大屏 1.前言 2.实现 2.1 搭建flask应用 2.2 编写html及其对应css代码 2.3 可视化展示 2.3.1 左上角板块 2.3.2 中间上 ...
js大屏导出图片_整理了30个实用可视化大屏模板，附源文件+工具
最近新接手了一个大屏项目,从前期的调研需求到原型设计再到模型开发,前前后后折腾了大半个月,这个过程中也踩了不少坑,深感大屏项目开发的不易(领导要求实在是太高),也借此把我之前收集的可视化大屏模板分享给 ...
大数据可视化大屏实例
最近得到公司的一个任务,就是开发可视化大屏,这个我也没有弄过啊,所以当时是有一点手足无措的感觉,然后在进行借助搜索之后,发现数据大屏其实也就是那样,一般最经典的数据大屏就是图加背景然后加数据就搞定了 ...
Oracle 11g的踩坑日记
Oracle 11g相对来说卸载起来比19好卸载多了.来自一个直接莽着下完19再下11g的憨憨怨念. 单单就sql语句来说,感觉和mysql差别不是很大.然后是踩坑比较多的dblink, 首先是要确保 ...

【大屏】 amap + echarts 踩坑以及避免办法

amap + echarts 踩坑以及避免办法

大屏

踩坑

代码

【大屏】 amap + echarts 踩坑以及避免办法相关推荐

最新文章

热门文章