echarts 3d地图-成都
Posted 晚星@
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts 3d地图-成都相关的知识，希望对你有一定的参考价值。
<template>
<div class="right_main_under"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<!-- //中间地图 -->
<div class="centermap">
<div class="Mapcenter1">
<el-button type="primary"
size="mini"
v-if="oldmaploading"
@click="fanhui"
class="btn"><span class="el-icon-back"></span>返回上一级</el-button>
<div id="myEcharts"
ref="chartmap"
style="width: 1200px; height: 600px"></div>
</div>
</div>
</div>
</template>
<script >
import chengdou from "@/static/jsonmap/chengdou";
import chenghua from "@/static/jsonmap/chenghua";
import chongzhou from "@/static/jsonmap/chongzhou";
import dayi from "@/static/jsonmap/dayi";
import doujiangyan from "@/static/jsonmap/doujiangyan";
import jianyang from "@/static/jsonmap/jianyang";
import jinjiang from "@/static/jsonmap/jinjiang";
import jinniu from "@/static/jsonmap/jinniu";
import jintang from "@/static/jsonmap/jintang";
import longquanyi from "@/static/jsonmap/longquanyi";
import pengzhou from "@/static/jsonmap/pengzhou";
import pidou from "@/static/jsonmap/pidou";
import pujiang from "@/static/jsonmap/pujiang";
import qingbaijiang from "@/static/jsonmap/qingbaijiang";
import qingyang from "@/static/jsonmap/qingyang";
import qionglai from "@/static/jsonmap/qionglai";
import shuangliu from "@/static/jsonmap/shuangliu";
import wenjiang from "@/static/jsonmap/wenjiang";
import wuhou from "@/static/jsonmap/wuhou";
import xindou from "@/static/jsonmap/xindou";
import xinjin from "@/static/jsonmap/xinjin";
import dayjs from "dayjs";
export default {
data () {
return {
mapName1: "",
totalPages1: "",
gridData: [],
mypageable1: {
pageNum1: 1,
pageSize1: 10,
},
total1: 1,
dialogTableVisible: false,
loading: false,
loading1: false,
oldmaploading: false,
cityName: "成都市",
jxmap: {
成都市: chengdou,
锦江区: jinjiang,
青羊区: qingyang,
金牛区: jinniu,
武侯区: wuhou,
成华区: chenghua,
龙泉驿区: longquanyi,
青白江区: qingbaijiang,
新都区: xindou,
温江区: wenjiang,
双流区: shuangliu,
郫都区: pidou,
金堂县: jintang,
大邑县: dayi,
蒲江县: pujiang,
新津区: xinjin,
都江堰市: doujiangyan,
彭州市: pengzhou,
邛崃市: qionglai,
崇州市: chongzhou,
简阳市: jianyang,
},
newdomainSimpleVo: {
dateValue_find1: "",
},
whiteSearchList1: {
startCreateTime1: dayjs()
.subtract(1, "month")
.format("YYYY-MM-DD HH:mm:ss"),
endCreateTime1: dayjs().format("YYYY-MM-DD HH:mm:ss"),
},
leftarrX: [],
leftarrY: [],
//左侧柱状
visits: [],
sourceip: [],
//右侧柱状
url: [],
urlvisits: [],
//下折线
disDate: [],
disvisits: [],
mapName: "",
dataDi: [],
max: 0,
min: 0,
xinarr: [],
};
},
mounted () { },
created () {
this.mapquan();
},
methods: {
//统计全部地区地图显示
async mapquan () {
let discoverCountVo = {
address: "",
endTime: this.whiteSearchList1.endCreateTime1,
startTime: this.whiteSearchList1.startCreateTime1,
};
const { data: res } = await this.$http.requests.get(
"/discover/countAddressByDate"
);
// console.log(res,'地图');
if (res.code == 200) {
if (res.data.length > 0) {
var newarr = res.data.map((item) => {
return {
name: item.address,
value: item.visits,
};
});
newarr.forEach((element) => {
element.name = (element.name || "").split("成都市")[1];
});
this.xinarr = newarr;
let max = newarr.sort((a, b) => {
return b.value - a.value;
});
this.max = max[0] ? max[0]["value"] : 0;
// console.log(this.max);
this.dataDi = newarr;
setTimeout(() => {
this.mineMap();
}, 500);
} else {
this.$message("地图访问量无数据");
this.loading = false;
}
}
},
//中间地图
mineMap () {
var self = this;
var mapChart = this.$echarts.init(document.getElementById("myEcharts"));
// let dataDi = [
// { name: "锦江区", value: 15 },
// { name: "青羊区", value: 1000 },
// { name: "金牛区", value: 20000 },
// { name: "武侯区", value: 43562 },
// { name: "成华区", value: 15896 },
// { name: "龙泉驿区", value: 9756 },
// { name: "青白江区", value: 1356 },
// { name: "新都区", value: 25863 },
// { name: "温江区", value: 1235 },
// { name: "双流区", value: 5643 },
// { name: "郫都区", value: 25863 },
// { name: "金堂县", value: 1235 },
// { name: "大邑县", value: 15 },
// { name: "蒲江县", value: 1000 },
// { name: "新津区", value: 20000 },
// { name: "都江堰市", value: 43562 },
// { name: "彭州市", value: 15896 },
// { name: "邛崃市", value: 9756 },
// { name: "崇州市", value: 1356 },
// { name: "简阳市", value: 25863 },
// ];
let mapName = this.jxmap[this.cityName] + "";
this.$echarts.registerMap(mapName, this.jxmap[this.cityName]);
var mapOption = {
geo: [
{
show: true,
zoom: 1,
map: mapName,
// center: [104.08, 30.69],
silent: true,
aspectScale: 0.75, //长宽比,默认0.75
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
roam: false,
itemStyle: {
normal: {
areaColor: "rgba(0,0,0,0)",
borderColor: "rgba(80,210,252,0.5)",
// areaColor: 'yellow',
borderWidth: 3, //设置外层边框
// borderColor: '#fff',
// shadowColor: "red", //#A0A2A5 外边框阴影色
// shadowBlur: 10, //外边框阴影
opacity: 1,
},
},
// layoutCenter:["54.50%", "51%"], //左下
layoutCenter: ["52.50%", "51%"], //右下
layoutSize: "100%",
},
{
show: true,
zoom: 1,
map: mapName,
// center: [104.08, 30.71] ,
silent: true,
aspectScale: 0.75, //长宽比,默认0.75
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
roam: false,
itemStyle: {
normal: {
areaColor: "rgba(0,0,0,0)",
borderColor: "rgba(80,210,252,0.5)",
// areaColor: 'yellow',
borderWidth: 3, //设置外层边框
// borderColor: '#fff',
// shadowColor: "red", //#A0A2A5 外边框阴影色
// shadowBlur: 10, //外边框阴影
opacity: 1,
},
},
// layoutCenter:["54%", "52%"], //左下
layoutCenter: ["53%", "52%"], //右下
layoutSize: "100%",
},
],
tooltip: {
trigger: "item",
backgroundColor: "#fff",
borderWidth: 1,
// borderColor:",
formatter: (params) => {
return `
<section style='width:100px;height:45px;color:#333333';>
<div style='color:#333333;font-size: 12px;'>
${params.name}
</div>
<div>
<span style="font-size: 12px;color:#808080">${params.seriesName
}:</span>
<span style="font-size: 16px;color: #4298F3;">${isNaN(params.value) == true ? "0" : params.value
}</span>
</div>
</section>`;
},
},
//距离左右，上下距离的百分比
visualMap: {
padding: [0, 0, 0, 30],
textStyle: {
color: "white",
},
min: this.min,
max: this.max,
text: ["最高值", "最低值"],
itemWidth: 15,
itemHeight: 100,
align: "auto",
realtime: false,
calculable: true,
inRange: {
color: ["#2B91B7", "#5DBADE", "#D84B61"],
},
},
series: [
{
name: "访问量",
type: "map",
data: this.dataDi,
// map: this.mapData1,
map: mapName,
// center: [104.080989, 30.657689],
// center: [104.103077,30.660275],
componentType: "geo",
// symbolOffset: [0, "-50%"],
roam: false,
layoutSize: "100%", //大小
layoutCenter: ["52%", "50%"],
// data: this.dataDi,
aspectScale: 0.75,
zoom: 1,
itemStyle: {
normal: {
borderColor: "#64E0FC",
borderWidth: 3,
areaColor: "#2B91B7",
label: {
show: true,
color: "#fff",
formatter: function (data) {
var a = data.name;
// var b = data.value;
// return a + "\\n" + b;
return a;
},
},
},
emphasis: {
areaColor: "#00669C",
label: {
show: true,
color: "#fff",
formatter: function (data) {
var a = data.name;
// var b = data.value;
// return a + "\\n" + b;
return a;
},
},
},
},
},
// {
// name: '散点',
// type: 'scatter',
// coordinateSystem: 'geo',
// symbolOffset: [0, "-50%"],
// data: convertData(_this.mapData),
// symbolSize: (v) => {
// // if (v[3] === 0) {
// // return [0, 0]
// // }
// // if (v[3] <= _this.max / 4) {
// // return [20, 30]
// // } else if (v[3] <= _this.max / 4 * 2 && v[3] > _this.max / 4) {
// // return [20, 60]
// // } else if (v[3] <= _this.max / 4 * 3 && v[3] > _this.max / 4 * 2) {
// // return [20, 90]
// // } else {
// // return [20, 120]
// // }
// },
// symbol: (pa) => {
// console.log(pa);
// // if (pa[3] < _this.max / 4) {
// // return `image://${require('../../assets/img/lower.png')}`
// // } else if (pa[3] < _this.max / 4 * 2) {
// // return `image://${require('../../assets/img/low.png')}`
// // } else if (pa[3] < _this.max / 4 * 3) {
// // return `image://${require('../../assets/img/high.png')}`
// // } else {
// // return `image://${require('../../assets/img/higher.png')}`
// // }
// }
// }
],
};
this.loading = false;
// console.log(mapOption);
mapChart.setOption(mapOption);
window.addEventListener("resize", function () {
mapChart.resize();
});
mapChart.off("click");
mapChart.on("click", function (params) {
// console.log(params.name);
let name = params.name;
self.handlerChange(name);
});
//去除默认的鼠标事件
document.oncontextmenu = function () {
return false;
};
//新加上鼠标右击事件
mapChart.on("contextmenu", function (params) {
// console.log("我是右键");
let name = params.name;
self.one(name);
});
},
handlerChange (name) {
this.cityName = name;
// console.log( this.cityName);
this.mineMap();
this.oldmaploading = true;
this.mapName = name;
// myChart.setOption(option);
this.ipxuan();
},
one (name) {
this.mapName1 = name;
this.fangwenl();
},
//-=-==--=-=-=--=-=--=-=--=-=-==---=-=-=-=--=-=-=-=-=-=-=-=-=-=
handleClose (done) {
this.mypageable1.pageNum1 = 1;
this.dialogTableVisible = false;
},
// 时间
dataCreate_change1 (val) {
if (val && val != "") {
this.whiteSearchList1.startCreateTime1 = val[0];
this.whiteSearchList1.endCreateTime1 = val[1];
} else {
this.whiteSearchList1.startCreateTime1 = dayjs()
.subtract(1, "month")
.format("YYYY-MM-DD HH:mm:ss");
this.whiteSearchList1.endCreateTime1 = dayjs().format(
"YYYY-MM-DD HH:mm:ss"
);
}
},
//返回
fa以上是关于echarts 3d地图-成都的主要内容，如果未能解决你的问题，请参考以下文章