echarts地图2.5D效果实现
<template>
<div class="Echarts">
<div id="main" style="width: 600px; height: 400px"></div>
</div>
</template>
<script>
import { zhoukouJson } from "../components/zhoukou";
export default {
data() {
return {
optionList: {
backgroundColor: "#FFFFFF",
title: {
text: "全国地图",
subtext: "纯属虚构",
x: "center",
},
tooltip: {
trigger: "item",
formatter: function (params) {
console.log(params);
return "qweq";
},
show: true,
backgroundColor: "red",
borderWidth: 0,
},
geo: {
map: "zhoukou",
// zoom: 1.7,
// top: "30%",
zlevel: 0,
label: {
show: false,
},
itemStyle: {
areaColor: "#07183F",
shadowColor: "#1863DE",
shadowOffsetY: 15,
shadowOffsetX: 2,
},
},
series: [
{
name: "随机数据",
type: "map",
mapType: "zhoukou",
// aspectScale: 1.2,
roam: true,
zlevel: 1,
label: {
normal: {
show: true,
},
// emphasis: {
// show: true,
// textStyle: {
// color: "#800080"
// }
// }
},
itemStyle: {
normal: {
borderWidth: 2, //边际线大小
borderColor: "#00ffff", //边界线颜色
areaColor: {
//地图色
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#1078B1", // 0% 处的颜色
},
{
offset: 0.2,
color: "#115A8C", // 0% 处的颜色
},
{
offset: 0.5,
color: "#15528C",
},
{
offset: 1,
color: "#124074", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
data: [],
},
],
},
};
},
mounted() {
this.getDataMark();
},
methods: {
getDataMark() {
console.log(zhoukouJson);
let arr = [];
zhoukouJson.features.forEach((item, index) => {
const ele = {
name: item.properties.name,
value: 1,
};
arr.push(ele);
});
this.$echarts.registerMap("zhoukou", { geoJSON: zhoukouJson });
this.optionList.series[0].data = arr;
console.log(this.optionList.series);
var chart = this.$echarts.init(document.getElementById("main"));
chart.setOption(this.optionList);
},
},
};
</script>
<style>
</style>
