- 获取json格式的地图数据
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
<template>
<!-- 设置一个地图 + scatter轮播 -->
<div class="box flex-center">
<div class="content" ref="chart"></div>
</div>
</template>
<script>
import mapJson from "@/assets/json/hubei.json";
import { debounce } from "lodash"; //js工具类,按需加载
export default {
data() {
return {
timeTicket: null,
count: 0,
len: 0, // 轮播数组的长度, 通过 count % len 可以得到[0, len-1] 数组下标
};
},
beforeDestroy() {
clearTimeout(this.timeTicket);
window.removeEventListener("resize", this.resize);
},
mounted() {
this.initChart(); // 初始化
this.updateChart(); // 更新数据,散点轮播显示
this.mouseMove(); // 鼠标移入移出效果
window.addEventListener("resize", debounce(this.resize, 2000)); // 使用事件捕获,由外层向内
},
methods: {
initChart() {
this.$echarts.registerMap("HUMAP", mapJson); // 注册map
this.myChart = this.$echarts.init(this.$refs.chart); // echarts容器实例化
let initOption = {
// 提示框
tooltip: {
formatter: "{a}<br/>{b}<br/>{c}",
position: "top",
},
visualMap: {
type: "continuous",
showLabel: true,
left: "10",
min: 0,
inRange: {
color: ["#0B3B79", "#146fd7"],
},
},
// 设置geo坐标系
geo: {
map: "HUMAP",
itemStyle: {
borderColor: "#2FB5FA",
borderWidth: 2,
shadowColor: "#01273F",
shadowOffsetX: 0,
shadowOffsetY: 10,
},
emphasis: {
areaColor: "#2C7FD6",
},
label: {
show: false,
fontSize: 0,
},
},
series: [
// series[0] 为地图坐标系
{
type: "map",
map: "HUMAP",
roam: false,
// geoIndex: 0, geoIndex 指定一个 geo 组件。这样的话,map 和 其他 series(例如散点图)就可以共享一个 geo 组件了。
data: null,
label: {
show: false,
fontSize: 0,
},
},
// series[1] 为散点图, 需要轮播高亮显示
{
name: "light",
type: "effectScatter",
coordinateSystem: "geo", // 注意坐标系的设置
data: null,
symbolSize: [8, 4],
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
color: "#0efacc",
period: 9,
scale: 5,
},
label: {
show: true,
color: "#FFF",
formatter: "{b}",
offset: [0, -12],
},
emphasis: {
// 设置高亮显示的状态
scale: 8,
itemStyle: {
color: "pink",
},
},
},
],
};
this.myChart.setOption(initOption);
},
updateChart() {
// 地图数据
let mapData = mapJson.features.map((item) => {
return {
name: item.properties.name,
value: Math.round(Math.random() * 100),
centroid: item.properties.centroid,
adcode: item.properties.adcode,
};
});
// 散点数据
let scatterData = mapData.map((item) => {
return {
name: item.name,
value: item.centroid
? item.centroid.concat(item.value)
: item.centroid, // [经, 纬度, 值]
itemStyle: {
color: "red",
},
// adcode: item.adcode,
};
});
let updateOption = {
series: [
{
data: mapData, // type: 'map'
},
{
data: scatterData, // type: 'effectScatter'
},
],
};
this.len = updateOption.series[1].data.length; //此处设置的是需要轮播的次数
this.myChart.setOption(updateOption);
this.autohover();
},
mouseMove() {
// 当鼠标移入,终止轮播,高亮显示当前区域
this.myChart.on("mouseover", (params) => {
clearInterval(this.timeTicket);
this.myChart.dispatchAction({
type: "downplay",
seriesIndex: 1,
});
this.myChart.dispatchAction({
type: "highlight",
seriesIndex: 1,
dataIndex: params.dataIndex,
});
this.myChart.dispatchAction({
type: "showTip",
seriesIndex: 1,
dataIndex: params.dataIndex,
});
});
// 当鼠标移出,轮播继续开始
this.myChart.on("mouseout", this.autohover);
},
autohover() {
clearInterval(this.timeTicket);
this.timeTicket = setInterval(() => {
// 1. 取消上次的高亮
this.myChart.dispatchAction({
type: "downplay",
seriesIndex: 1,
});
// 2. 显示当前高亮
this.myChart.dispatchAction({
type: "highlight",
seriesIndex: 1,
dataIndex: this.count % this.len,
});
// 3. 显示提示框中的信息
this.myChart.dispatchAction({
type: "showTip",
seriesIndex: 1,
dataIndex: this.count % this.len,
});
this.count++;
}, 2000);
},
resize() {
this.myChart.resize();
},
},
};
</script>
<style lang="scss" scoped>
.box {
height: 100vh;
.content {
width: 800px;
height: 600px;
border: 1px solid red;
}
}
</style>