echarts3 地图写法区别于 echarts2

【1】echarts3 地图写法:全国地图和省份地图用的是同一个option

[1] areaMapPy:echarts的json包,全国:china, 省份:省份的拼音

[2]areaMapName: 全国:china, 省份:省份名称,不带 ‘省’

var myChart_map = echarts.init(document.getElementById('地图div ID'), 'shine');
var option_map;
$.get('${platform}/js/lib/echarts3/map/'+areaMapPy+'.json', function(mapJson) {
    echarts.registerMap(areaMapName, mapJson);    
    
    option_map = {
            title : {
                text: (areaMapName == 'china' ? '全国': areaMapName)+'-销售额(万元)预警',
                subtext: '数据截止日期:1990-01-01',
                x:'center',
                textStyle : {
                    color: '#000'
                }
            },
            tooltip : {
                trigger: 'item',
                showDelay: 0,//显示延时,添加显示延时可以避免频繁切换
                borderRadius: 8,//边框圆角
                backgroundColor:'rgba(14, 148, 234, 0.9)',
                //transitionDuration: 0,
                enterable: true,
                formatter: sellMapTooltip    //提示框方法
            },
            dataRange: {
                textStyle : {
                    color : '#000'
                },
                splitList : [ {
                    start : 1,
                    end : 1,
                    label : '一级预警',
                    color : '#ff4500'
                }, {
                    start : 2,
                    end : 2,
                    label : '二级预警',
                    color : '#ffa500'
                }, {
                    start : 3,
                    end : 3,
                    label : '三级预警',
                    color : '#adff2f'
                } ],
                calculable : false,
                color : [ '#adff2f', '#ffa500', '#ff4500' ],
                y: 'top'
            },
            toolbox: {
                show : true,
                orient : 'vertical',
                x : 'right',
                y : 'center',
                feature : {
                    mark : {
                        show : false
                    },
                    dataView : {
                        show : false,
                        readOnly : false
                    },
                    restore : {
                        show : true
                    }
                }
            },
            series : [
                {
                    type: 'map',
                    mapType: areaMapName,
                    itemStyle:{
                        normal:{
                          label:{show:true},
                          borderColor : 'rgba(100,149,237,1)',
                          borderWidth : 0.5,
                          areaStyle : {
                              color : 'rgba(0, 0, 0, 0)'
                          }
                        },
                        emphasis:{label:{show:true}}
                    },
                    data:[],
                    roam: false    //地图缩放
                }
              
            ],
            animation: false
        };
});

 

地图数据格式:

var areaAll = [];    //所有的省份
    for (var i in data) {
        var area = {};
        area.name = data[i].areaname;
        area.code = data[i].areacode;
        area.value = data[i].warnlevel;   //这个地方是为了让他显示不同的颜色等级
        areaAll.push(area);
    }
    option_map.series[0].data = areaAll;

全国地图效果:省份名称不带省

省份地图效果:注意里面的地市的名称,是不带市的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值