vue-cli使⽤echarts系列之涟漪效果地图effectScatter 项⽬githup地址
效果图
实现步骤
1.下载地图json数据到项⽬中，我的地图下载地址
2.在项⽬中引⼊
import xilinguole from '@/utils/map/xilinguole.json' // 有⼦级区域
3.提供echarts展⽰的DOM元素，注册地图
<template>
<div class="container">
<div id="lineChart" ></div>
</div>
</template>
<script>
import xilinguole from '@/utils/map/xilinguole.json' // 有下级区域
// import xilinguole from '@/utils/map/xilinguo2.json' // ⽆下级区域
export default {
name: 'effectScatter',
data() {
return {
option: {
tooltip: {},
geo: {
map: 'city',
zoom: 1.2,
roam: true,
itemStyle: {
areaColor: '#4474ec', // 区域颜⾊
borderColor: '#fff' // 区域边线颜⾊
},
label: {
show: true// 是否展⽰名称
},
emphasis: {
label: {
// show: false
},
itemStyle: {
areaColor: '#4474ec', // ⾼亮时区域颜⾊
}
}
}
},
mapChart: ''
}
},
mounted() {
},
methods: {
// echarts初始化
getMapChart() {
this.mapChart = this.$echart.ElementById('lineChart'))
this.$isterMap('city', xilinguole);
this.mapChart.setOption(this.option)
}
}
}
</script>
4.完成第三步就能在页⾯中看到地图了
5.增加涟漪效果, data中value数据的坐标就是下载的地图json数据中的center数值
series: [
{ // 涟漪效果
name: 'Top 6',
type: 'effectScatter',
coordinateSystem: 'geo', // 该系列使⽤的坐标系
data: [{ // 数据映射
name: "苏尼特左旗", // 对应地图中的name
value: [113.653412, 43.854108, 4500] // value值，前⾯两个是X轴,Y轴坐标, 后⾯的数据⾃定义，可以设置多个        },
{
name: "⼆连浩特市",
value: [111.97981, 43.652895, 3560]
},
{
name: "阿巴嘎旗",
value: [114.970618, 44.022728, 3300]
},
{
name: "苏尼特右旗",
value: [112.65539, 42.746662, 2800]
},
{
name: "正镶⽩旗",
value: [115.031423, 42.286807, 2100]
},
{
name: "太仆寺旗",
value: [115.28728, 41.895199, 1900]
}
]
,
symbolSize: function (val) { // 涟漪图⼤⼩ val就是data中value数组
return val[2] / 200;
},
encode: {
value: 2 // 可以定义 data 的哪个维度被编码成什么.这⾥的意思是把data数据的第2项(从0开始)编译为value      },
showEffectOn: 'render', // 配置何时显⽰特效
rippleEffect: {
brushType: 'stroke',
color: 'red'
},
emphasis: {
scale: false
},
label: {
formatter: '{b}',
position: 'right',
show: false
},
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(230, 10, 10, 1)',
color: 'red'
},
zlevel: 1
}
]
6.这样就完成⼀个涟漪效果的地图了，以官⽹的地图为例，看⼀下配置对应的效果
完整代码:
<template>
<div class="container">
<div id="lineChart" ></div>
</div>
</template>
<script>
import xilinguole from '@/utils/map/xilinguole.json' // 有下级区域
// import xilinguole from '@/utils/map/xilinguo2.json' // ⽆下级区域
export default {
name: 'effectScatter',
data() {
return {
option: {
tooltip: {},
geo: {
map: 'city',
zoom: 1.2,
roam: true,
itemStyle: {
areaColor: '#4474ec',
borderColor: '#fff'
},
label: {
show: true
},
emphasis: {
label: {setoption
// show: false
},
itemStyle: {
areaColor: '#4474ec',
}
}
},
series: [
{ // 涟漪效果
name: 'Top 6',
type: 'effectScatter',
coordinateSystem: 'geo',
data: [{
name: "苏尼特左旗",
value: [113.653412, 43.854108, 4500]
},
{
name: "⼆连浩特市",
value: [111.97981, 43.652895, 3560]
},
{
name: "阿巴嘎旗",
value: [114.970618, 44.022728, 3300]
},
{
name: "苏尼特右旗",
value: [112.65539, 42.746662, 2800]
},
{
name: "正镶⽩旗",
value: [115.031423, 42.286807, 2100]
},
{
name: "太仆寺旗",
value: [115.28728, 41.895199, 1900]
}
],
symbolSize: function (val) {
return val[2] / 200;
},
encode: {
value: 2
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke',
color: 'red'
},
emphasis: {
scale: false
},
label: {
formatter: '{b}',
position: 'right',
show: false
},
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(230, 10, 10, 1)',
color: 'red'
},
zlevel: 1
}
]
},
mapChart: ''
}
},
mounted() {
},
methods: {
// echarts初始化
getMapChart() {
this.mapChart = this.$echart.ElementById('lineChart')) this.$isterMap('city', xilinguole);
this.mapChart.setOption(this.option)
}
}
}
</script>
echarts系列⽂章:
vue-cli项⽬使⽤echarts系列
vue-cli使⽤echarts系列之K线图Candlestick  vue-cli使⽤echarts系列之地图type: map