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

      

  • 相关阅读:
    针对小程序for循环绑定数据,实现toggle切换效果(交流QQ群:604788754)
    小程序中bindtap绑定函数,函数参数event对数据的处理
    小程序中data数据的处理方法总结(小程序交流群:604788754)
    Power OFF and ON USB device in linux (ubuntu)
    linux控制USB的绑定/解绑
    卡内操作系统COS
    Linux内核:sk_buff解析
    skb_store_bits() 和 skb_copy_bits()
    skb详细解析【转】
    TCP:WireShark分析,序列号Seq和确认号Ack
  • 原文地址:https://www.cnblogs.com/fireicesion/p/16517535.html
Copyright © 2020-2023  润新知