状态分析图echarts 1111'+dataItem[1].name); var geodata=geoCoordMap[dataItem[1].name].concat([dataItem[1].value]); console.log("2222"+geodata[0]); return { name: dataItem[1].name, //显示每个维度对应的名称 value: geodata, }; }), tooltip:{ formatter:'{b}:{a}' } }, { name: item[0], type: 'scatter配置项内容和展示
数据截止2018年11月9日
配置项如下
var geoCoordMap = {
'上海': [121.4648,31.2891],
'东莞': [113.8953,22.901],
'东营': [118.7073,37.5513],
'中山': [113.4229,22.478],
'临汾': [111.4783,36.1615],
'临沂': [118.3118,35.2936],
'丹东': [124.541,40.4242],
'丽水': [119.5642,28.1854],
'乌鲁木齐': [87.9236,43.5883],
'佛山': [112.8955,23.1097],
'保定': [115.0488,39.0948],
'兰州': [103.5901,36.3043],
'包头': [110.3467,41.4899],
'北京': [116.4551,40.2539],
'北海': [109.314,21.6211],
'南京': [118.8062,31.9208],
'南宁': [108.479,23.1152],
'南昌': [116.0046,28.6633],
'南通': [121.1023,32.1625],
'厦门': [118.1689,24.6478],
'台州': [121.1353,28.6688],
'合肥': [117.29,32.0581],
'呼和浩特': [111.4124,40.4901],
'咸阳': [108.4131,34.8706],
'哈尔滨': [127.9688,45.368],
'唐山': [118.4766,39.6826],
'嘉兴': [120.9155,30.6354],
'大同': [113.7854,39.8035],
'大连': [122.2229,39.4409],
'天津': [117.4219,39.4189],
'太原': [112.3352,37.9413],
'威海': [121.9482,37.1393],
'宁波': [121.5967,29.6466],
'宝鸡': [107.1826,34.3433],
'宿迁': [118.5535,33.7775],
'常州': [119.4543,31.5582],
'广州': [113.5107,23.2196],
'廊坊': [116.521,39.0509],
'延安': [109.1052,36.4252],
'张家口': [115.1477,40.8527],
'徐州': [117.5208,34.3268],
'德州': [116.6858,37.2107],
'惠州': [114.6204,23.1647],
'成都': [103.9526,30.7617],
'扬州': [119.4653,32.8162],
'承德': [117.5757,41.4075],
'拉萨': [91.1865,30.1465],
'无锡': [120.3442,31.5527],
'日照': [119.2786,35.5023],
'昆明': [102.9199,25.4663],
'杭州': [119.5313,29.8773],
'枣庄': [117.323,34.8926],
'柳州': [109.3799,24.9774],
'株洲': [113.5327,27.0319],
'武汉': [114.3896,30.6628],
'汕头': [117.1692,23.3405],
'江门': [112.6318,22.1484],
'沈阳': [123.1238,42.1216],
'沧州': [116.8286,38.2104],
'河源': [114.917,23.9722],
'泉州': [118.3228,25.1147],
'泰安': [117.0264,36.0516],
'泰州': [120.0586,32.5525],
'济南': [117.1582,36.8701],
'济宁': [116.8286,35.3375],
'海口': [110.3893,19.8516],
'淄博': [118.0371,36.6064],
'淮安': [118.927,33.4039],
'深圳': [114.5435,22.5439],
'清远': [112.9175,24.3292],
'温州': [120.498,27.8119],
'渭南': [109.7864,35.0299],
'湖州': [119.8608,30.7782],
'湘潭': [112.5439,27.7075],
'滨州': [117.8174,37.4963],
'潍坊': [119.0918,36.524],
'烟台': [120.7397,37.5128],
'玉溪': [101.9312,23.8898],
'珠海': [113.7305,22.1155],
'盐城': [120.2234,33.5577],
'盘锦': [121.9482,41.0449],
'石家庄': [114.4995,38.1006],
'福州': [119.4543,25.9222],
'秦皇岛': [119.2126,40.0232],
'绍兴': [120.564,29.7565],
'聊城': [115.9167,36.4032],
'肇庆': [112.1265,23.5822],
'舟山': [122.2559,30.2234],
'苏州': [120.6519,31.3989],
'莱芜': [117.6526,36.2714],
'菏泽': [115.6201,35.2057],
'营口': [122.4316,40.4297],
'葫芦岛': [120.1575,40.578],
'衡水': [115.8838,37.7161],
'衢州': [118.6853,28.8666],
'西宁': [101.4038,36.8207],
'西安': [109.1162,34.2004],
'贵阳': [106.6992,26.7682],
'连云港': [119.1248,34.552],
'邢台': [114.8071,37.2821],
'邯郸': [114.4775,36.535],
'郑州': [113.4668,34.6234],
'鄂尔多斯': [108.9734,39.2487],
'重庆': [107.7539,30.1904],
'金华': [120.0037,29.1028],
'铜川': [109.0393,35.1947],
'银川': [106.3586,38.1775],
'镇江': [119.4763,31.9702],
'长春': [125.8154,44.2584],
'长沙': [113.0823,28.2568],
'长治': [112.8625,36.4746],
'阳泉': [113.4778,38.0951],
'青岛': [120.4651,36.3373],
'韶关': [113.7964,24.7028]
};
// 数组中嵌套数组
var Ondata = [
[{name:'状态1'}, {name:'南京',value:randomData()}],
[{name:'状态1'}, {name:'广州',value:randomData()}],
[{name:'状态1'}, {name:'大连',value:randomData()}],
[{name:'状态1'}, {name:'南宁',value:randomData()}],
[{name:'状态1'}, {name:'南昌',value:randomData()}],
[{name:'状态1'}, {name:'拉萨',value:randomData()}],
[{name:'状态1'}, {name:'长春',value:randomData()}],
[{name:'状态1'}, {name:'包头',value:randomData()}],
[{name:'状态1'}, {name:'重庆',value:randomData()}],
[{name:'状态1'}, {name:'常州',value:randomData()}]
];
var Offdata = [
[{name:'状态2'}, {name:'葫芦岛',value:randomData()}],
[{name:'状态2'}, {name:'长沙',value:randomData()}],
[{name:'状态2'}, {name:'青岛',value:randomData()}],
[{name:'状态2'}, {name:'舟山',value:randomData()}],
];
var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [];
[['状态1', Ondata],['状态2', Offdata]].forEach(function (item, i) {
series.push(
{
// 有了name legend才能控制它！！
name: item[0],
type: "scatter",
coordinateSystem: "geo",
zlevel: 1,
label: {
normal: {
show: true,
position: "left",
formatter: "{b}",
textStyle: {
color: color[i]
}
},
emphasis: {
show: true
}
},
symbol: "circle",
symbolSize: 16,
itemStyle: {
normal: {
show: true,
color: color[i]
}
},
data: item[1].map(function (dataItem) {
console.log('1111'+dataItem[1].name);
var geodata=geoCoordMap[dataItem[1].name].concat([dataItem[1].value]);
console.log("2222"+geodata[0]);
return {
name: dataItem[1].name, //显示每个维度对应的名称
value: geodata,
};
}),
tooltip:{
formatter:'{b}:{a}'
}
},
{
name: item[0],
type: 'scatter',
// 使用的坐标系
coordinateSystem: 'geo',
zlevel: 2,
hoverAnimation:true,
label: {
normal: {
show: true,
formatter: function (params) {
console.log(params.data);
// value 是 [107.7539, 30.1904, Array(2) // 注意：contact 会把整个数组加进去
var value1 = params.data.value[2][0];
var value2 = params.data.value[2][1];
// console.log(value);
var all = '{up|数据1}\n{valueUp|' + value1 + '}' + '\n' +
'{up|数据2}\n{valueDown|' + value2 + '}';
console.log(all);
return all
},
// position: 'insideBottomleft',
position:[20,-20],
backgroundColor: '#fff',
padding: [4, 5],
borderRadius: 3,
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.5)',
color: '#777',
rich: {
valueUp: {
color: 'blue',
fontSize: 14,
align: 'center',
},
valueDown: {
color: 'red',
fontSize: 14,
align: 'center',
},
up: {
height: 14,
color:'black',
align: 'center',
},
}
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: color[i]
}
},
// map 映射
data: item[1].map(function (dataItem) {
var geodata=geoCoordMap[dataItem[1].name].concat([dataItem[1].value]);
console.log("2222"+geodata[0]);
return {
name: dataItem[1].name, //显示每个维度对应的名称
value: geodata,
};
}),
tooltip:{
formatter:'{b}:{a}'
},
animation:true,
});
});
option = {
backgroundColor:'#f5f3f0',
title:{
text:'状态分析图',
subtext:'数据截止2018年11月9日',
// left:'left',
left:10,
top:10,
textStyle:{
fontSize:24,
color:'#125993'
},
subtextStyle:{
fontSize:12,
color:'#9da2a3'
// color:'#c9c8c8
}
},
tooltip:{
// 提示框触发类型
trigger:'item'
},
legend: {
orient: 'horizontal',
top:10,
left: 'center',
data:[ '状态1','状态2'],
textStyle: {
color: '#4a4a4a'
},
// selectedMode: 'single',
},
geo: {
map: 'china',
label: {
// 高亮
emphasis: {
// 不显示标签
// show: false
}
},
// 缩放或平移
roam: true,
itemStyle: {
normal: {
areaColor: '#f5f3f0',
borderColor: '#50899c'
},
emphasis: {
areaColor: '#d0c9c0'
}
}
},
series: series
};
function randomData() {
var a = Math.random();
var b = Math.random();
var c = [Math.round(a * 10000), Math.round(b * 1000)];
return c;
}
setTimeout(function () {
myChart.on('mouseup', function (params) {
if (!down) {
return;
}
down = false;
var e = params.event;
var geoCoord = myChart.convertFromPixel('series', [e.offsetX, e.offsetY]);
myChart.setOption({
series: [{
center: geoCoord,
zoom: 4,
zlevel: 4,
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut'
},{
center: geoCoord,
zlevel: 5,
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut'
}]
});
});
var down;
myChart.on('mousedown', function () {
down = true;
});
myChart.on('mousemove', function () {
down = false;
});
}, 0);
截图如下
