ECharts 地图实现
var myChart = echarts.init(document.getElementById('jyyddt_echarts'));
myChart.showLoading();
//$.get第一个参数，引入json文件
$.get('../../statics/jslib/echarts/json/jilin.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('jilin', geoJson);
myChart.setOption(option = {
title: {
text: '吉林各地市州',
subtext: '副标题',
textStyle: {//主标题文本样式
fontSize: 40
},
subtextStyle: {//副标题文本样式
fontSize: 20
}
},
geo: {
map: 'jilin',
// roam: true, //是否支持拖动
itemStyle: {
normal: {
borderColor: '#4b9b9c',
borderWidth: 6 //设置外层边框
}
}
},
series: [
{
type: 'map',
// roam: true, //是否支持拖动
mapType: 'jilin',
geoIndex: 1,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true,
textStyle: {
fontSize: 22,
color: '#333'
}
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle: {
fontSize: 30,
color: "#333"
}
}
},
itemStyle: {
normal: {
label: {
show: true
},
borderWidth: 1
}
},
data: [
{
name: '长春市',
itemStyle: {
normal: {
// areaColor: 'rgba(0,0,0,0)',
borderColor: '#3496c2',
borderWidth: 1
},
emphasis: {
areaColor: 'rgba(0,0,0,0)',
borderWidth: 3
}
}
},
{
name: '吉林市',
itemStyle: {
normal: {
// areaColor: 'rgba(0,0,0,0)',
borderColor: '#65a16f',
borderWidth: 1
},
emphasis: {
areaColor: 'rgba(0,0,0,0)',
borderWidth: 3
}
}
},
{
name: '四平市',
itemStyle: {
normal: {
// areaColor: 'rgba(0,0,0,0)',
borderColor: '#3496c2',
borderWidth: 1
},
emphasis: {
areaColor: 'rgba(0,0,0,0)',
borderWidth: 3
}
}
},
{
name: '辽源市',
itemStyle: {
normal: {
// areaColor: 'rgba(0,0,0,0)',
borderColor: '#3496c2',
borderWidth: 1
},
emphasis: {
areaColor: 'rgba(0,0,0,0)',
borderWidth: 3
}
}
},
{
name: '通化市',
itemStyle: {
normal: {
// areaColor: 'rgba(0,0,0,0)',
borderColor: '#65a16f',
borderWidth: 1
},
emphasis: {
areaColor: 'rgba(0,0,0,0)',
borderWidth: 3
}
}
},
{
name: '白山市',
itemStyle: {
normal: {
// areaColor: 'rgba(0,0,0,0)',
borderColor: '#65a16f',
borderWidth: 1
},
emphasis: {
areaColor: 'rgba(0,0,0,0)',
borderWidth: 3
}
}
},
{
name: '松原市',
itemStyle: {
normal: {
// areaColor: 'rgba(0,0,0,0)',
borderColor: '#3496c2',
borderWidth: 1
},
emphasis: {
areaColor: 'rgba(0,0,0,0)',
borderWidth: 3
}
}
},
{
name: '白城市',
itemStyle: {
normal: {
// areaColor: 'rgba(0,0,0,0)',
borderColor: '#3496c2',
borderWidth: 1
},
emphasis: {
areaColor: 'rgba(0,0,0,0)',
borderWidth: 3
}
}
},
{
name: '延边朝鲜族自治州',
itemStyle: {
normal: {
// areaColor: 'rgba(0,0,0,0)',
borderColor: '#65a16f',
borderWidth: 1
},
emphasis: {
areaColor: 'rgba(0,0,0,0)',
borderWidth: 3
}
}
}
]
}
]
});
});