var uploadedDataURL = “/asset/get/s/data-1528971808162-BkOXf61WX.json”;
/**
此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存,来达到hover散点和区域显示tooltip的效果
默认情况下,map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话,map 和 其他 series(例如散点图)就可以共享一个 geo 组件了。并且,geo 组件的颜色也可以被这个 map series 控制,从而用 visualMap 来更改。
当设定了 geoIndex 后,series-map.map 属性,以及 series-map.itemStyle 等样式配置不再起作用,而是采用 geo 中的相应属性。
http://echarts.baidu.com/option.html#series-map.geoIndex
并且加了pin气泡图标以示数值大小
*/
//煤炭
var meitanArr = [{
name: ‘石家庄’,
value: [114.528833, 38.03888, 100],
type: ‘meitan’
}
];
// 电石
var dianshiArr = [{
name: ‘邢台’,
value: [114.501237, 37.086934, 100],
type: ‘dianshi’
}
];
//原盐
var yuanyanArr = [{
name: ‘衡水’,
value: [115.697061, 37.747281, 100],
type: ‘yuanyan’
}
];
//烧碱
var shaojianArr = [{
name: ‘邯郸’,
value: [114.556429, 36.61379, 100],
type: ‘shaojian’
},
{
name: ‘长治市’,
value: [113.126874, 36.200568, 100],
type: ‘shaojian’
}
];
//PVC
var PVCArr = [{
name: ‘保定’,
value: [115.476293, 38.877914, 100],
type: ‘PVC’
}
];
// 纸浆
var zhijiangArr = [{
name: ‘沧州’,
value: [116.874488, 38.329313, 100],
type: ‘zhijiang’
}
];
//印染
var yinranArr = [{
name: ‘连云港市’,
value: [119.22891, 34.602487, 100],
type: ‘yinran’
}
];
//氧化铝
var yanghualvArr = [{
name: ‘朔州市’,
value: [112.440236, 39.336887, 100],
type: ‘yanghualv’
}
];
//粘胶纤维
var zhanjiaoxianweiArr = [{
name: ‘张家口’,
value: [114.905977, 40.76455, 100],
type: ‘zhanjiaoxianwei’
}
];
//洗涤剂
var xidijiArr = [{
name: ‘绍兴市’,
value: [120.586914, 30.03662, 100],
type: ‘xidiji’
}
];
var points = [{
name:‘宜宾市’,
value: [104.6494037048691, 28.75800702855183],
itemStyle: {
color: ‘#00FFF0’
}
}, {
name:‘乐山市’,
value: [103.7725376036347, 29.55794071745811],
itemStyle: {
color: ‘#00FFF0’
}
}, {
name:‘昭通市’,
value: [103.72351177196889, 27.34408386024681],
itemStyle: {
color: ‘#00FFF0’
}
},{
name:‘太原市’,
value: [112.55639149167205, 37.87698902884778],
itemStyle: {
color: ‘#00FFF0’
}
},
{
name:‘绵阳市’,
value: [104.6855618607612, 31.473663048745864],
itemStyle: {
color: ‘#F0E93C’
}
},
{
name:‘攀枝花’,
value: [101.72554117091441, 26.58803317333301],
itemStyle: {
color: ‘#F0E93C’
}
},
{
name:‘云阳’,
value: [108.70344750000172, 30.93661127197471],
itemStyle: {
color: ‘#00FFF0’
}
},
{
name:‘铜仁市’,
value: [109.19643889817665, 27.73778645640524],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘临沧市’,
value: [100.09544042014869, 23.89046855627851],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘盐城市’,
value: [120.167544265761, 33.355100917626199],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘台州市’,
value: [121.42743470427969, 28.66219405599615],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘河源市’,
value: [114.70744627290641, 23.749684370959753],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘榆林市’,
value: [109.74161603381396, 38.290883835484049],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘邯郸市’,
value: [117.20359278135502, 39.15348514470478],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘邵阳市’,
value: [111.474432885931, 27.245270272808566],
itemStyle: {
color: ‘#F0E93C’
}
}]
// var uploadedDataURL = “/asset/get/s/data-1482909892121-BJ3auk-Se.json”;
myChart.showLoading();
let index = -1;
$.getJSON(uploadedDataURL, function(geoJson) {
echarts.registerMap('china', geoJson);
myChart.hideLoading();
var max = 480,
min = 9;
var maxSize4Pin = 100,
minSize4Pin = 20;
option = {
backgroundColor: '#183D6B',
geo: {
map: 'china',
center: [108.70344750000172,30.93661127197471],
aspectScale: 0.75, //长宽比
zoom: 2.5,
roam: false,
},
series: [{
type: 'map',
map: 'china', //使用
center: [108.70344750000172,30.93661127197471],
roam: false,
zoom: 2.5,
selectedMode: 'single',
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(255,255,255,0.5)'
}
},
emphasis: {
textStyle: {
color: 'rgba(255,255,255,0.5)'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(41, 97, 177, 0.2)',
borderWidth: 1,
areaColor: '#0C172F'
},
emphasis: {
areaColor: '#0C172F',
// borderColor: '#00FFF0',
// // shadowColor: 'rgb(12,25,50)',
// borderWidth: 2
}
},
// roam: false,
data: [{
name: '四川',
label: {
normal: {
show: true,
textStyle: {
color: '#1DE9B6'
}
},
emphasis: {
itemStyle:{
areaColor: 'red',
},
textStyle: {
color: '#fff',
fontSize:18
}
}
},
selected: true,
itemStyle: {
borderColor: '#00FFF0',
shadowColor: '#36BFF7',
shadowBlur: 10,
borderWidth: 3,
areaColor: 'red'
}
} // selected:true 默认选中
]
// data: this.difficultData //热力图数据 不同区域 不同的底色
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',