四川省竞争优劣分布图echarts 地图配置项内容和展示
四川省竞争优劣分布图
配置项如下
// 前言：
//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
}
],
};
截图如下
