echarts地圖2.5D效果實現
阿新 • • 發佈：2022-03-03
<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>
<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>