• EChart显示地图信息例子


    <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实例
        }
    

      

  • 相关阅读:
    .net core Docker 整套部署流程
    Mysql 关键字 ESCAPE
    ZJOI2022 题解
    多项式全家桶
    THUPC2022 游记
    FidderComposer(自定义请求)
    Postman使用详解
    FiddlerAutoResponder(自动响应器)
    Fiddler—工具栏
    Fiddler—过滤器(Filters)
  • 原文地址:https://www.cnblogs.com/fireicesion/p/16517535.html
Copyright © 2020-2023  润新知