4
回答
ECharts地图中formatter显示多个值,data内的值怎么放
滴滴云服务器,限时包月0.9元,为开发者而生>>>   

@Kener-林峰    您好,想跟你请教个问题:

data : [
             {name: "元朗", value: 4178},
             {name: "屯门", value: 5881}
]

formatter显示:
元朗 
总人数:4178

屯门 
总人数:5881


若想显示:
元朗 
总人数:4178
男性:2000
女性:2178

那2000和2178该如何添加到data的value中呢?谢谢!


举报
香腮雪
发帖于3年前 4回/15K+阅
共有4个答案 最后回答: 2年前
@SilvaShi @曼丽 @少年游派:不好意思,才看到评论。
自定义想要添加的数据(如下data_man和data_woman),后fomatter中使用function调用自定义的数据。

http://echarts.baidu.com/doc/example/map6.html

// 自定义扩展图表类型:mapType = HK
require('echarts/util/mapData/params').params.HK = {
    getGeoJson: function (callback) {
        $.getJSON('geoJson/HK_geo.json',callback);
    }
}


var data_man = [
                {name: '中西区', value: 10000},
                {name: '湾仔', value: 20000},
                {name: '东区', value: 30000},
                {name: '南区', value: 40000},
                {name: '油尖旺', value: 50000},
                {name: '深水埗', value: 60000},
                {name: '九龙城', value: 70000},
                {name: '黄大仙', value: 80000},
                {name: '观塘', value: 90000},
                {name: '葵青', value: 100000},
                {name: '荃湾', value: 110000},
                {name: '屯门', value: 120000},
                {name: '元朗', value: 130000},
                {name: '北区', value: 140000},
                {name: '大埔', value: 150000},
                {name: '沙田', value: 160000},
                {name: '西贡', value: 170000},
                {name: '离岛', value: 180000}
              ]


var data_woman = [
                {name: '中西区', value: 210000},
                {name: '湾仔', value: 220000},
                {name: '东区', value: 230000},
                {name: '南区', value: 240000},
                {name: '油尖旺', value: 250000},
                {name: '深水埗', value: 260000},
                {name: '九龙城', value: 270000},
                {name: '黄大仙', value:280000},
                {name: '观塘', value: 290000},
                {name: '葵青', value: 2100000},
                {name: '荃湾', value: 2110000},
                {name: '屯门', value: 2120000},
                {name: '元朗', value: 2130000},
                {name: '北区', value: 2140000},
                {name: '大埔', value: 2150000},
                {name: '沙田', value: 2160000},
                {name: '西贡', value: 2170000},
                {name: '离岛', value: 2180000}
              ]
option = {
    title : {
        text : '香港18区人口密度 (2011)',
        subtext: '人口密度数据来自Wikipedia',
        sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
    },
    tooltip : {
        trigger: 'item',
        formatter: function(a){
         res = a[1] + '</br>' + a[2] + '(p / km2)';
         for (var i = 0; i < data_man.length; i++) {
           if(a[1] == data_man[i].name){
             res +=  '</br>男性:' + data_man[i].value;
           }
           if(a[1] == data_woman[i].name){
             res +=  '</br>女性:' + data_woman[i].value;
           }
         }                   
        return res;
        }
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataRange: {
        min: 800,
        max: 50000,
        text:['High','Low'],
        realtime: false,
        calculable : true,
        color: ['orangered','yellow','lightskyblue']
    },
    series : [
        {
            name: '香港18区人口密度',
            type: 'map',
            mapType: 'HK', // 自定义扩展图表类型
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[
                {name: '中西区', value: 20057.34},
                {name: '湾仔', value: 15477.48},
                {name: '东区', value: 31686.1},
                {name: '南区', value: 6992.6},
                {name: '油尖旺', value: 44045.49},
                {name: '深水埗', value: 40689.64},
                {name: '九龙城', value: 37659.78},
                {name: '黄大仙', value: 45180.97},
                {name: '观塘', value: 55204.26},
                {name: '葵青', value: 21900.9},
                {name: '荃湾', value: 4918.26},
                {name: '屯门', value: 5881.84},
                {name: '元朗', value: 4178.01},
                {name: '北区', value: 2227.92},
                {name: '大埔', value: 2180.98},
                {name: '沙田', value: 9172.94},
                {name: '西贡', value: 3368},
                {name: '离岛', value: 806.98}
            ],
            // 自定义名称映射
            nameMap: {
                'Central and Western':'中西区',
                'Eastern':'东区',
                'Islands':'离岛',
                'Kowloon City':'九龙城',
                'Kwai Tsing':'葵青',
                'Kwun Tong':'观塘',
                'North':'北区',
                'Sai Kung':'西贡',
                'Sha Tin':'沙田',
                'Sham Shui Po':'深水埗',
                'Southern':'南区',
                'Tai Po':'大埔',
                'Tsuen Wan':'荃湾',
                'Tuen Mun':'屯门',
                'Wan Chai':'湾仔',
                'Wong Tai Sin':'黄大仙',
                'Yau Tsim Mong':'油尖旺',
                'Yuen Long':'元朗'
            },
            // 文本位置修正
            textFixed : {
                'Yau Tsim Mong' : [-10, 0]
            },
            // 文本直接经纬度定位
            geoCoord : {
                'Islands' : [113.95, 22.26]
            }
        }
    ]

};


       

echarts地图,图例与显示数据联动及自定义显示数据


在地图代码中怎么实现,对比了很多例子都不好使


求教!!!

顶部