<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图</title>
<script src="../JS/echarts.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px">
<script>
var mCharts = echarts.init(document.querySelector("div"))
var dataMap = [{
name: '北京',
value: 1867},{
name: '天津',
value: 2550},{
name: '上海',
value: 4409},{
name: '重庆',
value: 1356},{
name: '河北',
value: 1826},{
name: '河南',
value: 3398},{
name: '云南',
value: 4872},
{
name: '辽宁',
value: 2713},{
name: '黑龙江',
value: 2183},{
name: '湖南',
value: 3635},{
name: '安徽',
value: 2340},{
name: '山东',
value: 3548},{
name: '新疆',
value: 3174},{
name: '江苏',
value: 1506},
{
name: '浙江',
value: 3958},{
name: '江西',
value: 3165},{
name: '湖北',
value: 4427},{
name: '广西',
value: 3224},{
name: '甘肃',
value: 3900},{
name: '山西',
value: 3320},{
name: '内蒙古',
value: 3649},
{
name: '陕西',
value: 1138},{
name: '吉林',
value: 1240},{
name: '福建',
value: 3205},{
name: '贵州',
value: 2830},{
name: '广东',
value: 1770},{
name: '青海',
value: 3803},{
name: '西藏',
value: 4037},
{
name: '四川',
value: 1624}, {
name: '宁夏',
value: 3522},{
name: '海南',
value: 2895},{
name: '台湾',
value: 2883},{
name: '香港',
value: 3173},{
name: '澳门',
value: 4978}]
var scatterData = [
{
value: [
104.005192,
30.56183]},
{
value: [
114.298572,
30.584355]}
]
$.get('china.json',function(chinaJson){
echarts.registerMap('chinaMap',chinaJson)
var option = {
geo:{
type:'map',
map:'chinaMap',
label:{
show:true
}
},
visualMap: {
min: 1000,
max: 5000,
calculable: true,
inRange: {
color:[
'white',
'red']
}
},
series:[
{
name:'各省销量',
type:'map',
geoIndex:0,
data:dataMap
},
{
// 图形类型为涟漪图
type: 'effectScatter',
// 涟漪的坐标数据
data: scatterData,
// 以geo为坐标进行显示
coordinateSystem: 'geo',
// 涟漪特效的配置
rippleEffect: {
scale: 5
},
itemStyle:{
color:'green'
}
}
]
}
mCharts.setOption(option)
})
</script>
</body>
</html>
设置涟漪效果颜色为绿色没有效果却仍旧显示白色是为什么呢?