vue+echarts同时实现地图热力图与线图(解决重叠问题)+markPoint属性巧用

效果展示

需求解读
分辨率自适应左右框内标题及内容都可动态配置同时包括地图热力图与地图线图出发点添加涟漪动画markPoint根据数据不同动态展示是否高亮热力图颜色数值范围由返回数据动态控制
难点分析
series.type为lines或effectScatter显示的前提为geo属性有值，而展示热力图却需要series.type为map，就涉及到geo与map两属性重叠与z轴level问题线图需要准确知道起点与终点坐标，若边框、标题和边框内元素都脱离在canvas画布外会导致无法准确定位，分辨率变化后出现偏差的情况同起点和终点，同类型的线分散，导致线图错乱
难点解决方案
geo属性在上层，但地图item颜色为透明，即可不遮挡map的同时又使lines和effectScatter位于canvas最上层将边框、标题和边框内元素都以markPoint的方式在map的海上打标定点，并根据markPoin

vue+echarts同时实现地图热力图与线图(解决重叠问题)+markPoint属性巧用最先出现在Python成神之路。