[JavaScript知识库]echarts地图下钻可缩放

echarts地图下钻可缩放

在geo中写相关属性
点击查看geo相关属性

geo 地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。

   geo: {
            map: map,
            // center: [115.97, 29.71],//当前视角的中心点
            zoom: 1.2, //当前视角的缩放比例
            roam: true, //是否开启平游或缩放
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 5,
            },
            //图形上的文本标签，可用于说明图形的一些数据信息
            label: {
              show: true,
              fontSize: "12",
              align: "center",
              position: ["50%", "50%"],
              color: "rgba(0,0,0,0.9)",
            },
            //地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
            //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
            emphasis: { 
              //normal 是图形在默认状态下的样式；
              borderColor: "rgba(0, 0, 0, 0.2)",
              itemStyle: {
                areaColor: "#F3B329",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },

解决Echarts图标在浏览器缩放后位置偏移

当你打开地图后可能会发现地图下钻到第二级（市）地图并不在容器内，这是因为我们将echarts地图放大缩小拖拽后，导致再次渲染时偏移出了原来的容器
我们可以在渲染之前重置chart，取消状态即可

 myChart.setOption(option, true);