//label中formatter无法使用html引入imgECharts Gallery

20:11:45图表已生成
代码
  //label中formatter无法使用html引入img
  //请大哥移至132行代码

var geoCoordMap = {
    '济南市': [117.121225, 36.682785],
    '菏泽市': [115.480656, 35.23375],
    '济宁市': [116.59, 35.38],
    '德州市': [116.39, 37.45],
    '聊城市': [115.97, 36.45],
    '泰安市': [117.13, 36.18],
    '临沂市': [118.35, 35.05],
    '淄博市': [118.05, 36.78],
    '枣庄市': [117.57, 34.86],
    '滨州市': [118.03, 37.36],
    '潍坊市': [119.1, 36.62],
    '东营市': [118.49, 37.46],
    '青岛市': [120.3, 36.62],
    '烟台市': [120.9, 37.32],
    '威海市': [122.1, 37.2],
    '日照市': [119.1, 35.62],
    '济宁市': [116.7, 35.42],
    '莱芜市': [117.70, 36.28],
}


var data = {
    "济南市": "370100",
    "青岛市": "370200",
    "淄博市": "370300",
    "枣庄市": "370400",
    "东营市": "370500",
    "烟台市": "370600",
    "潍坊市": "370700",
    "济宁市": "370800",
    "泰安市": "370900",
    "威海市": "371000",
    "日照市": "371100",
    "莱芜市": "371200",
    "临沂市": "371300",
    "德州市": "371400",
    "聊城市": "371500",
    "滨州市": "371600",
    "菏泽市": "371700",
};

function convertData(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });

        }
    }
    return res;
};

function renderMap(map) {
    var option = {
            tooltip: {
                show: true,
                backgroundColor: '#020933', //'#45A3EF', RGB(69,163,239)  rgba(69,163,239,1)
                trigger: 'item',
                formatter: function(params) {
                    var res = '';
                    var myseries = option.series;
                    for (var j = 0; j < myseries[0].data.length; j++) {
                        if (myseries[0].data[j].name == params.name) {
                            res += myseries[0].data[j].name +
                                '</br><img src="./modules/iomc/homepage/images/首页展示-10.png"  style="margin-bottom: 5px;">  ' + myseries[0].data[j].value +
                                '</br><img src="./modules/iomc/homepage/images/首页展示-11.png"  style="margin-bottom: 5px;">  ' + myseries[0].data[j].value2 +
                                '</br><img src="./modules/iomc/homepage/images/首页展示-12.png"  style="margin-bottom: 5px;">  ' + myseries[0].data[j].value3;
                        }
                    }
                    return res;
                }
            },
            geo: {
                show: true,
                roam: true,
                top: '40px',
                map: map,
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false,
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'white', //地图边界线颜色  
                        borderWidth: 1, //边界线宽度 
                        areaColor: '#B8D7FA', //背景颜色
                    },
                    //鼠标悬停事件
                    emphasis: {
                        borderColor: '#020933', //鼠标移动地区边框显示颜色   #A1DFF2
                        borderWidth: 1,
                        areaColor: '#178CEB', //背景颜色								
                    }
                },
            },
            series: [{
                        name: map,
                        type: 'map',
                        /*center: ['50%', '50%'],*/
                        aspectScale: 0.75, //长宽比. default: 0.75  
                        data: loadCityData,
                        geoIndex: 0,
                        map: map,
                    }, {
                        name: 'light',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        roam: true,
                        data: convertData(loadCityData),
                        symbolSize: function(val) {
                            var i = parseInt(val[2]);
                            if (i < 520) {
                                return 0.1;
                            } else {
                                return 20;
                            }

                        },
                        //label中formatter无法使用html引入img
                        label: {
                            normal: {
                                color: '#000000',
                                  //label中formatter无法使用html引入img
                                formatter: function(params) {
                                    var res = '';
                                    var myseries = option.series;
                                    for (var j = 0; j < myseries[0].data.length; j++) {
                                        if (myseries[0].data[j].name == params.name) {
                                              //label中formatter无法使用html引入img
                                            res += myseries[0].data[j].name +
                                                '</br><img src="./modules/iomc/homepage/images/首页展示-10.png"  style="margin-bottom: 5px;">  ' + myseries[0].data[j].value +
                                                '</br><img src="./modules/iomc/homepage/images/首页展示-11.png"  style="margin-bottom: 5px;">  ' + myseries[0].data[j].value2 +
                                                '</br><img src="./modules/iomc/homepage/images/首页展示-12.png"  style="margin-bottom: 5px;">  ' + myseries[0].data[j].value3;
                                        }
                                    }
                                    return res;
                                },

                                position: 'right',
                                show: true,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: function(sb) {
                                    debugger;
                                    var i = parseInt(sb.data.value[2]);
                                    if (i > 520) {
                                        return '#F4E925';
                                    } else {
                                        return 'red';
                                    }

                                }
                            }
                        }
                    },
                    ]
    };
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
