echarts之map常用属性
赵禄
首先，数据需要提供
1、
mapData=[ {name: '海门', value: 9},
{name: '鄂尔多斯', value: 12},
{name: '招远', value: 12},
{name: '舟山', value: 12},
{name: '齐齐哈尔', value: 14},
{name: '盐城', value: 15},
{name: '赤峰', value: 16},
{name: '青岛', value: 18},
{name: '乳山', value: 18},
{name: '金昌', value: 19},
{name: '泉州', value: 21},
{name: '莱西', value: 21},
{name: '日照', value: 21},
{name: '胶南', value: 22},
{name: '南通', value: 23},
{name: '拉萨', value: 24},
{name: '云浮', value: 24},
{name: '梅州', value: 25},
{name: '文登', value: 25},
{name: '上海', value: 25},
{name: '攀枝花', value: 25},
{name: '威海', value: 25},
{name: '承德', value: 25},
{name: '厦门', value: 26},
{name: '汕尾', value: 26},
{name: '潮州', value: 26},
{name: '丹东', value: 27},
{name: '太仓', value: 27},
{name: '曲靖', value: 27},
{name: '烟台', value: 28},
{name: '福州', value: 29},
{name: '瓦房店', value: 30},
{name: '即墨', value: 30}
]
2、
geoCoordMap: {
'海门':[121.15,31.89],
'鄂尔多斯':[109.781327,39.608266],
'招远':[120.38,37.35],
'舟山':[122.207216,29.985295],
'齐齐哈尔':[123.97,47.33],
'盐城':[120.13,33.38],
'赤峰':[118.87,42.28],
'青岛':[120.33,36.07],
'乳山':[121.52,36.89],
'金昌':[102.188043,38.520089],
'泉州':[118.58,24.93],
'莱西':[120.53,36.86],
'日照':[119.46,35.42],
'胶南':[119.97,35.88],
'南通':[121.05,32.08],
'拉萨':[91.11,29.97],
'云浮':[112.02,22.93],
'梅州':[116.1,24.55],
'文登':[122.05,37.2],
'上海':[121.48,31.22],
'攀枝花':[101.718637,26.582347],
'威海':[122.1,37.5],
'承德':[117.93,40.97],
'厦门':[118.1,24.46],
'汕尾':[115.375279,22.786211],
'潮州':[116.63,23.68],
'丹东':[124.37,40.13],
'太仓':[121.1,31.45],
'曲靖':[103.79,25.51],
'烟台':[121.39,37.52],
'福州':[119.3,26.08],
'瓦房店':[121.979603,39.627114],
'即墨':[120.45,36.38]
}
option = {
color: ['#B0EEF4', 'yellow', '#d8e050'],
tooltip: {
trigger: 'item', // 数据项图形触发方式，主要在散点图，饼图等无类目轴的图表中使用。
formatter: format //函数，提供参数params，返回的是tip上的html片段，常用params.data
},
geo: {
show: true,
map: '辽宁', //地图范围数据，通过echarts.registerMap引入(在node_modules里)
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: false, //鼠标平移或者缩放
itemStyle: { //每个点的样式
normal: {
areaColor: 'transparent',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255, 0.5)',
shadowBlur: 30
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series: [
{
name: 'light',
type: 'scatter', //设置普通点样式，scatter为单色实心圆形
coordinateSystem: 'geo', //使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
data: convertData(mapData),
/*var convertData = function (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;
};*/
//把 { name: '齐齐哈尔', value: 14 } { '齐齐哈尔':[123.97,47.33] } 格式的数据合并转换为 { "name":"齐齐哈尔","value":[114.854101942,33.8237408181,5000] }
symbolSize: function (val) {
return val[2] / 1000;
},
// symbolSize:15,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
textStyle: {
fontFamily: "微软雅黑",
fontSize: 12,
fontWeight: 'bold',
color: '#007277'
}
},
emphasis: {
show: true
}
}
},
{
name: 'point', //点名称
type: 'map',
mapType: '辽宁', //地图省份
roam: false,
mapLocation: { x: 'center', y: '2%' }, //在v2以上作废，改用top left right bottom
selectedMode: 'single', //选点模式，单选
label: {
normal: {
show: false
},
textStyle: {
color: '#fff'
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#89d6d9',
borderColor: '#b1b1b1'
},
emphasis: {
areaColor: '#99e3e6',
label: {
// show: true
}
}
},
data: mapData,
heatmap: {
minAlpha: 0.5,
data: heatData
},
},
{
name: 'Top 5',
type: 'effectScatter', //雷达样式点
coordinateSystem: 'geo',
data: convertData(mapData.sort(function (a, b) {
return b.dayOrderTotal - a.dayOrderTotal; //数据排序，取前五
}).slice(0, 5)),
symbolSize: function (val) { //点的大小，根据数据值来定
return val[2] / 1000;
},
showEffectOn: 'render', //何时显示特效，'render' 绘制完成后显示，'emphasis'鼠标放上去后显示。
rippleEffect: { //涟漪特效相关配置
brushType: 'stroke' //波纹的绘制方式，可选 'stroke' 和 'fill'。
},
hoverAnimation: false, //是否开启鼠标hover效果
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
textStyle: {
fontFamily: "微软雅黑",
fontSize: 12,
fontWeight: 'bold',
color: '#007277'
}
}
},
itemStyle: {
normal: {
color: '#ff0000',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
},
]
};
类似资料：