四川省竞争优劣分布图ECharts Gallery

20:11:45图表已生成
代码
// 前言：
//bug:此图不知为何，默认全省没有铺满，在本地是可以的，
// 弄上平台以后就不行了，
//解决：
// 要想看到两个红点和两个黄点的地区的图
// （）
// 只要在勾选实时刷新的基础上，在上一行括号里随机输入一个数字就可以了
var uploadedDataURL = "/asset/get/s/data-1562556241456--GruQTFLr.json";

//返回城市
function getcitynametwo(name) {
    var namesth = name.length;
    switch (namesth) {
        case 3:
            name = name.substr(0, 2);
            break;
        case 4:
            name = '攀枝花';
            break;
        case 7:
            if (name == '甘孜藏族自治州') {
                name = '甘孜'
            } else if (name == '凉山彝族自治州') {
                name = '凉山'
            }
            break;
        case 9:
            if (name == '阿坝藏族羌族自治州') {
                name = '阿坝'
            }
            break;
        default:
            break;
    }
    return name
}

var cityarr = ['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州']
var madata = []
var maparr1 = [],
    maparr2 = [],
    maparr3 = [];
var data = [{
        city_code: "510100",
        name: "成都",
        ranking: 3,
        scene_type: "1",
        value: 95.62,
        value2: 95.72,
        value3: 89.09
    },
    {
        city_code: "510300",
        name: "自贡",
        ranking: 3,
        scene_type: "1",
        value: 98.48,
        value2: 96.74,
        value3: 92.75
    },
    {
        value2: 94.94,
        value3: 94.67,
        name: "攀枝花",
        city_code: "510400",
        ranking: 2,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 93.48,
        value3: 91.82,
        name: "泸州",
        city_code: "510500",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 97.83,
        value3: 92.19,
        name: "德阳",
        city_code: "510600",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 98.44,
        value3: 96.31,
        name: "绵阳",
        city_code: "510700",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 98.34,
        value3: 94.23,
        name: "广元",
        city_code: "510800",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 98.74,
        value3: 95.75,
        name: "遂宁",
        city_code: "510900",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 94.37,
        value3: 91.81,
        name: "内江",
        city_code: "511000",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 95.35,
        value3: 94.23,
        name: "乐山",
        city_code: "511100",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 97.88,
        value3: 90.31,
        name: "南充",
        city_code: "511300",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 97.59,
        value3: 98.14,
        name: "眉山",
        city_code: "511400",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 95.59,
        value3: 93.66,
        name: "宜宾",
        city_code: "511500",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 98.88,
        value3: 96.63,
        name: "广安",
        city_code: "511600",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 96.79,
        value3: 91.19,
        name: "达州",
        city_code: "511700",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 93.87,
        value3: 95.69,
        name: "雅安",
        city_code: "511800",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 98.27,
        value3: 92.42,
        name: "巴中",
        city_code: "511900",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 97.06,
        value3: 94.59,
        name: "资阳",
        city_code: "512000",
        ranking: 3,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 94.21,
        value3: 87.71,
        name: "阿坝",
        city_code: "513200",
        ranking: 2,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 89.41,
        value3: 92.21,
        name: "甘孜",
        city_code: "513300",
        ranking: 2,
        scene_type: "1",
        value: 95.62
    },
    {
        value2: 94.89,
        value3: 97.43,
        name: "凉山",
        city_code: "513400",
        ranking: 2,
        scene_type: "1",
        value: 95.62
    },
    //   {value2: 94.89, value3: 97.43, name: "重庆",   city_code: "513600", ranking: 2,scene_type: "1",value: 95.62  },

]
var sd = data;
for (var i = 0, len = sd.length; i < len; i++) {
    if (sd[i].ranking == 3) { //大于其他两个竞争对手
        maparr1.push({
            name: cityarr[i],
            value: sd[i].value,
            value2: sd[i].value2,
            value3: sd[i].value3
        })
    } else if (sd[i].ranking == 2) { //大于其他一个竞争对手
        maparr2.push({
            name: cityarr[i],
            value: sd[i].value,
            value2: sd[i].value2,
            value3: sd[i].value3
        })
    } else if (sd[i].ranking == 1) { //小于其他两个竞争对手
        maparr3.push({
            name: cityarr[i],
            value: sd[i].value,
            value2: sd[i].value2,
            value3: sd[i].value3
        })
    }
    madata.push({
        name: cityarr[i],
        value: sd[i].value,
        value2: sd[i].value2,
        value3: sd[i].value3
    })
}

$.get('/asset/get/s/data-1562552415519-p-DuWdTR2.json', function(geoJson) {
    echarts.registerMap('sichuan', geoJson);
})
option = {
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            var val = params.name + '</br>';
            for (var i = 0, len = madata.length; i < len; i++) {
                if (params.name == madata[i].name) {
                    val += '电信覆盖率 : ' + madata[i].value + '%' + '</br>' +
                        '移动覆盖率 : ' + madata[i].value2 + '%' + '</br>' +
                        '联通覆盖率 : ' + madata[i].value3 + '%' + '</br>'
                }
            }
            return val;
        }
    },
    roam: true,
    visualMap: {
        show: true,
        type: 'piecewise',
        pieces: [{
                min: 90,
                max: 100
            },
            {
                min: 80,
                max: 90
            },
            {
                min: 70,
                max: 80
            },
            {
                min: 0,
                max: 70
            },
        ],
        left: 'left',
        top: 'bottom',
        calculable: true,
        inRange: {
            color: ['#008CC1', '#3FCDF5']
        }
    },
    legend: {},
    series: [{
            type: 'map',
            mapType: 'sichuan', // 自定义扩展图表类型
            itemStyle: {
                normal: {
                    color: '#17FE01',
                    label: {
                        show: true,
                        textStyle: {
                            color: "#fff"
                        }
                    }
                },
            },
            label: {
                normal: {
                    formatter: function(params) {
                        var name = params.name;
                        var name2 = getcitynametwo(name);
                        return name2
                    },
                    position: 'right',
                },
                emphasis: {
                    show: true
                }
            },
            data: maparr1
        },
        {
            type: 'map',
            mapType: 'sichuan', // 自定义扩展图表类型
            itemStyle: {
                normal: {
                    color: '#F7FE03',
                    label: {
                        show: true,
                        textStyle: {
                            color: "#fff"
                        }
                    }
                },
            },
            label: {
                normal: {
                    formatter: function(params) {
                        var name = params.name;
                        var name2 = getcitynametwo(name);
                        return name2
                    },
                    position: 'right',
                },
                emphasis: {
                    show: true
                }
            },
            data: maparr2
        },
        {
            type: 'map',
            mapType: 'sichuan', // 自定义扩展图表类型
            itemStyle: {
                normal: {
                    color: '#F95D02',
                    label: {
                        show: true,
                        textStyle: {
                            color: "#fff"
                        }
                    }
                },
            },
            label: {
                normal: {
                    formatter: function(params) {
                        var name = params.name;
                        var name2 = getcitynametwo(name);
                        return name2
                    },
                    position: 'right',
                },
                emphasis: {
                    show: true
                }
            },
            data: maparr3
        }
    ],
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
