echarts_部分圖表配置_地圖的配置

 

function echarts_map (thisId,data){
    $.get('map/json/henan.json', function (chinaJson) {
        echarts.registerMap('henan', chinaJson);
        var chart = echarts.init(document.getElementById(thisId));
        chart.setOption({

            visualMap: {
                show:false,//不顯示也有顏色區分的效果
                min: 0,
                max: 50000,
                left: 'left',
                top: 'bottom',
                text: ['高','低'], // 文本，默認為數值文本
                calculable: false,//是否顯示可拖動的句柄
                inRange: {
                    color: ['rgba(15,220,150,.5)','#00415a',]
                }
            },
            tooltip: {
                trigger: 'item',
                showDelay: 0,
                backgroundColor: '#c6e8e9',//浮框背景色
                transitionDuration: 0.2,
                formatter: function (params) {//設置提示框內的文字
                    var p = '<h3 style="color:#29667b;text-align:center;font-size:14px;font-weight:bold;line-height:20px;">['+params.name+']</h3>'+
                        '<p style="color:#26677b;font-size:12px;">今日累計用戶數：'+params.data.uv+'</p>'+
                        '<p style="color:#26677b;font-size:12px;">當前活躍用戶數：'+params.data.iuv+'</p>'
                    return p;
                }
            },           
            series: [{
                type: 'map',
                map: 'henan',
                roam: false,//標識是否可以縮放和拖動
                aspectScale:1.1,//設置地圖的長寬比 數值越大 高度越小 數值越小 寬度越小
                zoom:1.25,//定義當前視角的縮放比
                label: {
                    normal: {
                        show: false,//標示是否顯示提示文字
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle:{
                    normal:{
                        areaColor:'rgba(15,220,150,.5)'
                    }
                },
                data:data
            }]
        });
        chart.on('mouseover', function (e) {
            e.event.target.style.fill = '#00415a';
        });
    });
};