jianguan
/
supervise-monitor-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

地图放大

master
1181364@qq.com 2 years ago
parent
6f62d1c2e0
commit
ad72fc46cd
1 changed files with 10 additions and 227 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 237
      src/views/dashboard/components/HomeMap.vue

237
src/views/dashboard/components/HomeMap.vue
View File

@ -1,17 +1,9 @@
<template>
<div ref="myEchart" class="content" :style="{ height: '100%', width: '100%', margin: '0px 10px 10px 10px' }"></div>
<div ref="myEchart" id="mapID" class="content"
:style="{ height: '100%', width: '100%', margin: '-50px 10px 10px 10px' }"></div>
</template>
<script>
// import {
// raiseOldWholeData,
// exceptionSituation,
// raiseOldmanSituation,
// weekDayCompare,
// getMapDataTongji,
// bindFuWuLiang
// } from '@/api/tongji/kanBanJuJiaYangLao'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
@ -53,47 +45,10 @@
},
methods: {
initChart() {
// getMapDataTongji().then(response => {
// if (response.code === 20000) {
// if (
// response.data !== null &&
// response.data !== '' &&
// response.data !== undefined
// ) {
// this.countyData = []
// for (var i = 0; i < response.data.length; i++) {
// var county = response.data[i]
// this.countyData.push({
// name: county.title,
// value: county.departmentCount,
// county: county
// })
// console.log('chartDatas2', this.chartDatas2)
// if (county.title === '邢东新区') {
// this.chartDatas2.push({
// name: '邢东新区',
// value: [
// 114.597268,
// 37.096124,
// county.departmentCount,
// county.personCount
// ]
// })
// }
// if (county.title === '经济开发区') {
// this.chartDatas2.push({
// name: '经济开发区',
// value: [
// 114.565733,
// 37.06169,
// county.departmentCount,
// county.personCount
// ]
// })
// }
// }
// console.log('chartDatas2aaaa', this.chartDatas2)
var _self = this
// this.$refs.myEchart.setOption({
// })
const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置
this.chart = myChart
window.onresize = myChart.resize
@ -170,38 +125,13 @@
)
}
},
// geo: {
// map: 'xingtai',
// aspectScale: 0.75,
// layoutCenter: ['50%', '50.5%'],
// layoutSize: '102%',
// silent: true,
// roam: false,
// z: 0,
// itemStyle: {
// normal: {
// areaColor: '#9db8d2',
// shadowColor: 'rgba(0, 0, 0, 1)',
// shadowBlur: 0,
// shadowOffsetX: 0,
// shadowOffsetY: 10,
// borderColor: 'rgba(0, 0, 0, 0.7)',
// borderWidth: 0.5
// },
// emphasis: {
// areaColor: '#2AB8FF',
// borderWidth: 1,
// color: 'green',
// label: {
// show: false
// }
// }
// }
// },
dataZoom: {
type: 'inside'
},
geo: {
show: true,
map: 'xingtai',
roam: false,
roam: true,
label: {
normal: {
show: false
@ -251,26 +181,10 @@
fontSize: 16
},
series: [
// {
// name: '机构数量',
// type: 'map',
// roam: true,
// map: 'xingtai',
// emphasis: {
// label: {
// show: true,
// },
// },
// label: {
// show: true,
// // formatter: '{b}:{@score}人'
// },
// data: this.countyData,
// },
{
name: '机构数量',
type: 'map',
roam: false,
roam: true,
map: 'xingtai',
label: {
show: false
@ -293,144 +207,13 @@
}
}
}
// {
// // 小图标圆圈
// symbol: 'circle',
// symbolSize: 20,
// label: {
// normal: {
// formatter: '{b}',
// position: 'right',
// show: true
// // textStyle: {
// // color: '#f00',
// // fontSize: 12
// // },
// },
// emphasis: {
// show: true
// }
// },
// itemStyle: {
// color: '#fa3008',
// opacity: 1,
// borderColor: '#9603ea',
// borderWidth: 1
// // normal: {
// // opacity : 1,
// // borderColor: '#fa3008',
// // borderWidth: 1,
// // color: '#ff'
// // }
// },
// name: 'light',
// type: 'scatter',
// coordinateSystem: 'geo',
// data: this.chartDatas2
// },
// {
// // 小图标老人数量
// name: 'Top 5',
// type: 'scatter',
// coordinateSystem: 'geo',
// // symbol: 'pin',
// // symbolSize: [50, 50],
// symbolOffset: [0, -12],
// symbol: 'image://home/markertu3.png',
// symbolSize: [30, 30],
// label: {
// normal: {
// show: false,
// textStyle: {
// color: '#ff0',
// fontSize: 12
// },
// formatter(value) {
// return value.data.value[2] //
// // return value.data.areaCount//
// }
// }
// },
// itemStyle: {
// normal: {
// opacity: 1,
// borderColor: '#fa3008',
// borderWidth: 1,
// color: '#d800ff'
// // color: '#D8BC37' // 标志颜色
// }
// },
// data: this.chartDatas2,
// showEffectOn: 'render',
// rippleEffect: {
// brushType: 'stroke'
// },
// hoverAnimation: true,
// zlevel: 1
// }
// {
// data: [
// { name: '宁晋县', value: [114.921027, 37.618956, 56] },
// { name: '襄都区', value: 0 },
// { name: '信都区', value: 0 },
// { name: '任泽区', value: 0 },
// { name: '南和区', value: 0 },
// { name: '临城县', value: 0 },
// { name: '内丘县', value: 0 },
// { name: '柏乡县', value: 0 },
// { name: '隆尧县', value: 0 },
// { name: '巨鹿县', value: 0 },
// { name: '新河县', value: 0 },
// { name: '广宗县', value: 0 },
// { name: '平乡县', value: 0 },
// { name: '威县', value: 0 },
// { name: '清河县', value: 0 },
// { name: '临西县', value: 0 },
// { name: '南宫市', value: 0 },
// { name: '沙河市', value: 0 }
// ],
// name: '点',
// type: 'effectScatter',
// coordinateSystem: 'geo',
// // symbol: 'pin', // 气泡
// symbolSize: 20,
// label: {
// normal: {
// show: true,
// formatter: function(params) {
// return params.data.value[2]
// },
// textStyle: {
// color: '#fff',
// fontSize: 9
// }
// }
// },
// itemStyle: {
// normal: {
// color: '#F62157' // 标志颜色'#F62157'
// }
// },
// zlevel: 6
// }
],
animation: true
}
myChart.setOption(option)
myChart.hideLoading()
myChart.on('click', function (params) {
var areaCode = params.data.county.areaCode
var name = params.name
var jwd = params.data.county.jwd
_self.$router.push({
path: '/kanban/jujiayanglao2',
query: { name: name, areaCode: areaCode, jwd: jwd }
})
})
setTimeout(() => {
myChart.resize()
// alert('ok')
}, 800)
var _this = this

Write Preview
Loading…
Cancel
Save