echarts之map_echarts map

作者：盐析白兔 | 2024-02-18 15:13:52
踩
echarts map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.js"></script>
    <script src="jquery.js"></script>
</head>
<body>
    <div id="main" style="height: 900px;height: 600px;"></div>
    <script>
        $.get('china.json', function (chinaJson) {
            echarts.registerMap('china', chinaJson);
            var chart = echarts.init(document.getElementById('main'));
            chart.setOption({
                legend:{},
                series: [{
                    type: 'map',
                    map: 'china',
                    roam:true,
                    center:[115.97,29.71],
                    boundingCoords: [//二维数组，定义定位的左上角以及右下角分别所对应的经纬度
                        // 定位左上角经纬度
                        [-180, 90],
                        // 定位右下角经纬度
                        [180, -90]
                    ],
                    zoom:2,//当前视角的缩放比例
                    scaleLimit:{//滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1。
                        min:10,
                        max:100,
                    },
                    nameMap:{//自定义地区的名称映射  如：把江苏改为了中国
                        '江苏':'中国'
                    },
                    selectedMode:'multiple',//选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
                    label:{//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                        emphasis:{
                            show:true,
                             //position:[10,10],
                        },
                        normal:{
                            show:false
                        }
                    },
                    itemStyle:{//地图区域的多边形 图形样式。
                        normal:{
                            areaColor:'red',//整体颜色
                        },
                        emphasis:{
                            areaColor:'blue'//点击区域的颜色
                        }
                    },
                    zlevel:0,//zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，
                            // Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁
                            // （例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的
                            // Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
                            // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
                    z:2,//组件的所有图形的z值。控制图形的前后顺序。z值小的图形会
                        // 被z值大的图形覆盖。
                        // z相比zlevel优先级更低，而且不会创建新的 Canvas。+
                    left:'auto',
                    top:'auto',
                    right:'auto',
                    bottom:'auto',//组件距离容器上下左右的距离
                    layoutCenter:['30%','30%'],//layoutCenter 和 layoutSize 提供了
                    // 除了 left/right/top/bottom/width/height 之外的布局手段。
                    // 在使用 left/right/top/bottom/width/height 的时候，
                    // 可能很难在保持地图高宽比的情况下把地图放在某个盒形区域的
                    // 正中间，并且保证不超出盒形的范围。此时可以通过 layoutCenter
                    // 属性定义地图中心在屏幕中的位置，layoutSize 定义地图的大小。如下示例
                    layoutSize:100,
                    geoIndex:null,//默认情况下，map series 会自己生成内部专用的 geo 组件。
                    // 但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series
                    // （例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个
                    // map series 控制，从而用 visualMap 来更改。当设定了 geoIndex 后，
                    // series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，
                    // 而是采用 geo 中的相应属性。
                    mapValueCalculation:'sum',//多个拥有相同地图类型的系列会使用同一个地图展现，
                    // 如果多个系列都在同一个区域有值，ECharts 会对这些值统计得到一个数据。
                    // 这个配置项就是用于配置统计的方式，
                    // 目前有： 'sum' 取和。'average' 取平均值。'max' 取最大值。'min' 取最小值。
                    showLegendSymbol:true,//在图例相应区域显示图例的颜色标识（系列标识的小圆点），存在 legend 组件时生效。
                    data:[
                        {}
                    ]
                }]
            });
        });
    </script>
</body>
</html>
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】