博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

EChart显示地图信息例子

Posted on 2022-07-25 15:31  火冰·瓶  阅读(374)  评论(0编辑  收藏  举报
<div class="cen-top map" id="kangding_map"></div>

  

    function map() {

        var data = [
            { name: '炉城镇', value: [101.963055, 30.004495, 0] },
            { name: '惠拓', value: [101.402891, 29.666276, 0] },
            { name: '建云', value: [102.27789, 30.359193, 0] },
            { name: '益瑞', value: [102.05873, 30.102842, 0] }            
        ]      

        var myChart = echarts.init(document.getElementById('kangding_map'));

        $.getJSON("/lib/geojson/513301.json", function (geoJson) {//geojson数据来源于:http://datav.aliyun.com/portal/school/atlas/area_selector

            echarts.registerMap('康定市', geoJson);//#2

            option = {
                geo: {
                    map: '康定市',
                    itemStyle: {
                        normal: {//普通状态
                            areaColor: '#cfcfcf',
                            borderColor: '#fff',
                            show: false
                        },
                        emphasis: {//高亮状态
                            areaColor: '#cfcfcf',
                            borderColor: '#fff',
                            show: false
                        }
                    }
                },
                series: [
                    {
                        coordinateSystem: 'geo', // series坐标系类型
                        type: 'scatter', //散点图
                        data: data,
                        roam: false,
                        symbol: 'path://M512 736.981333L775.68 896l-69.76-299.904L938.666667 394.410667l-306.816-26.325334L512 85.333333 392.149333 368.085333 85.333333 394.410667l232.746667 201.685333L248.32 896z',  //五角星
                        symbolSize: 16,
                        encode: {
                            value: 2
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            formatter: '{b}',
                            position: 'right',
                            lineHeight: 15,
                            show: true,
                            emphasis: {
                                textStyle: {
                                    color: '#EC652A' //设置活动状态下字体样式,会跟随散点高亮
                                }
                            }
                        },
                        itemStyle: {
                            normal: {			// 散点图标普通状态下的样式
                                color: '#333'
                            },
                            emphasis: {			// 散点图标高亮状态下的样式
                                color: '#EC652A',
                            },
                            shadowBlur: 10,
                            shadowColor: '#333'
                        },
                        zlevel: 1
                    }
                ]
            }

            
            myChart.setOption(option);

            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                // 使用 dataIndex 来定位节点。(定义的数据的下标)
                dataIndex: 0
            });
        })



        window.addEventListener("resize", function () {
            myChart.resize();
        });

        // end基于准备好的dom,初始化echarts实例
    }