|
@@ -1,253 +0,0 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <div class="mapBg">
|
|
|
- <div class="worldMap" id="worldMap" ref="worldMap" height="300"></div>
|
|
|
- </div>
|
|
|
- <div v-if="dialogVisible" style="background:#fff;left:50%;top:30%;
|
|
|
- position:absolute;z-index:10000;border:1px oslid red;width:50%;height:300px;">
|
|
|
- <h1 align="center">这里是国家地图</h1>
|
|
|
- <button style="margin-top:30%;" @click="dialogVisible=false">关闭</button>
|
|
|
- </diV>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import * as echarts from 'echarts'
|
|
|
- import mapData from '../utils/map.js'
|
|
|
-
|
|
|
- var cityData = [{
|
|
|
- name: '长春',
|
|
|
- value: [125.299633, 43.914039, 10],
|
|
|
- }, ]
|
|
|
- var szPoinUrl = "";
|
|
|
-
|
|
|
- let imgBase64 = ''
|
|
|
- let tempData1 = [{
|
|
|
- name: '环境监测',
|
|
|
- value: [-73.97622, 40.757498],
|
|
|
- ph: 200,
|
|
|
- offset: [70, -58],
|
|
|
- padding: [12, 25, 56, 80],
|
|
|
- imgurl: '',
|
|
|
- }];
|
|
|
- export default {
|
|
|
- mounted() {
|
|
|
- var worldChart = echarts.init(this.$refs["worldMap"]);
|
|
|
- echarts.registerMap('world', mapData.registerMapData);
|
|
|
- worldChart.setOption(this.option);
|
|
|
-
|
|
|
- worldChart.on("georoam", function (params) {
|
|
|
- var option = worldChart.getOption(); //获得option对象
|
|
|
- if (params.zoom != null && params.zoom != undefined) {
|
|
|
- //捕捉到缩放时
|
|
|
- let mo = option.geo[0].zoom
|
|
|
- option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
|
|
|
- option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
|
|
|
- // // 改变标记点随地图放大缩小
|
|
|
- // // console.log(option.series)
|
|
|
- // let size = option.series[0].zoom/mo
|
|
|
- // if(option.series[0].zoom>mo){
|
|
|
- // // console.log(option.series)
|
|
|
- // option.series[2].symbolSize = [option.series[2].symbolSize[0]*size,option.series[2].symbolSize[1]*size]
|
|
|
- // option.series[1].symbolSize=option.series[1].symbolSize*size
|
|
|
- // option.series[1].label.fontSize=option.series[1].label.fontSize*size
|
|
|
- // }else{
|
|
|
- // option.series[2].symbolSize = [option.series[2].symbolSize[0]*size,option.series[2].symbolSize[1]*size]
|
|
|
- // option.series[1].symbolSize = option.series[1].symbolSize*size
|
|
|
- // option.series[1].label.fontSize = option.series[1].label.fontSize*size
|
|
|
- // }
|
|
|
- // // 改变标记点end
|
|
|
- } else {
|
|
|
- //捕捉到拖曳时
|
|
|
- option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
|
|
|
- }
|
|
|
- // myChart.dispatchAction({ //来用程序主动渲染选框
|
|
|
- // type: "restore",
|
|
|
- // });
|
|
|
- worldChart.setOption(option); //设置option
|
|
|
- });
|
|
|
-
|
|
|
- //
|
|
|
- worldChart.on('click', params => {
|
|
|
- console.log(111111111111)
|
|
|
- this.dialogVisible = true;
|
|
|
- })
|
|
|
- },
|
|
|
- computed: {
|
|
|
- series() {
|
|
|
- let res = [{
|
|
|
- type: "map",
|
|
|
- roam: true,
|
|
|
- animationDurationUpdate: true,
|
|
|
- label: {
|
|
|
- show: !1,
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- show: !1,
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- borderColor: "#0F6DAC",
|
|
|
- borderWidth: 0.2,
|
|
|
- areaColor: {
|
|
|
- type: "radial",
|
|
|
- x: 0.5,
|
|
|
- y: 0.5,
|
|
|
- r: 0.8,
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: "#061D35", // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "#061D35", // 100% 处的颜色
|
|
|
- },
|
|
|
- ],
|
|
|
- globalCoord: true, // 缺省为 false
|
|
|
- },
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- // show: !1,
|
|
|
- color: "#fff",
|
|
|
- },
|
|
|
- areaColor: "#05223D",
|
|
|
- // shadowColor: 'rgb(12,25,50)',
|
|
|
- borderWidth: 0.2,
|
|
|
- },
|
|
|
- },
|
|
|
- aspectScale: 0.65, //长宽比
|
|
|
- zoom: 1.12,
|
|
|
- // roam: false,
|
|
|
- map: "world", //使用
|
|
|
- // data: this.difficultData //热力图数据 不同区域 不同的底色
|
|
|
- }]
|
|
|
- tempData1.forEach(item => {
|
|
|
- res.push({
|
|
|
- type: 'scatter',
|
|
|
- coordinateSystem: 'geo',
|
|
|
- symbol: szPoinUrl,
|
|
|
- symbolSize: [20, 20],
|
|
|
- legendHoverLink: true,
|
|
|
- z: 99999,
|
|
|
- index: 99999,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- offset: item.offset, //偏移设置
|
|
|
- fontSize: 14,
|
|
|
- lineHeight: 23,
|
|
|
- backgroundColor: {
|
|
|
- image: item.imgurl,
|
|
|
- },
|
|
|
- borderColor: '#106EAD',
|
|
|
- padding: item.padding,
|
|
|
- formatter(value) {
|
|
|
- return `{name|${value.data.name}\nPH值:${value.data.ph}}`;
|
|
|
- },
|
|
|
-
|
|
|
- rich: {
|
|
|
- name: {
|
|
|
- fontWeight: 'bold',
|
|
|
- fontSize: 16,
|
|
|
- color: '#fff',
|
|
|
- height: 100,
|
|
|
- }
|
|
|
- },
|
|
|
- color: '#fff',
|
|
|
- },
|
|
|
- data: [item],
|
|
|
- showEffectOn: 'render',
|
|
|
- rippleEffect: {
|
|
|
- brushType: 'stroke',
|
|
|
- },
|
|
|
- hoverAnimation: true,
|
|
|
- zlevel: 9999,
|
|
|
- },
|
|
|
-
|
|
|
- )
|
|
|
- })
|
|
|
- return res
|
|
|
- },
|
|
|
-
|
|
|
- option() {
|
|
|
-
|
|
|
- return {
|
|
|
- // backgroundColor: '#051421',
|
|
|
- backgroundColor: 'transparent',
|
|
|
- tooltip: {
|
|
|
- trigger: "item",
|
|
|
- formatter: function (params, ticket, callback) {
|
|
|
- if (params.seriesType == "effectScatter") {
|
|
|
- return params.marker + params.data.name + "" + params.data.value[2];
|
|
|
- } else if (params.seriesType == "lines") {
|
|
|
- return params.data.fromName + " -> " + params.data.toName + "<br />" + params.data.value;
|
|
|
- } else {
|
|
|
- return params.name;
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- grid: {
|
|
|
- right: '8%',
|
|
|
- // top:'5%'
|
|
|
- },
|
|
|
- geo: {
|
|
|
- map: 'world',
|
|
|
- aspectScale: 0.65, //长宽比
|
|
|
- zoom: 1.12,
|
|
|
- show: true,
|
|
|
- tooltip: {
|
|
|
- show: !1,
|
|
|
- },
|
|
|
- scaleLimit: {
|
|
|
- min: 1,
|
|
|
- max: 5,
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: !1,
|
|
|
- },
|
|
|
- animationDurationUpdate: 0,
|
|
|
- roam: true,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- shadowColor: "#164A7C",
|
|
|
- shadowOffsetX: 5,
|
|
|
- shadowOffsetY: 5,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: "item",
|
|
|
- },
|
|
|
- zlevel: 999,
|
|
|
- series: this.series
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
- dialogVisible: false
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
- .worldMap {
|
|
|
- display: inline-block;
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
-
|
|
|
- background: #051421;
|
|
|
- position: absolute;
|
|
|
- z-index: -1;
|
|
|
- }
|
|
|
-
|
|
|
- .mapBg {
|
|
|
- /* background: #051421;
|
|
|
- position: absolute;
|
|
|
- z-index: -1; */
|
|
|
- }
|
|
|
-
|
|
|
-</style>
|