From 0d13cde22e04bf62270b160060f1ad6947aa542a Mon Sep 17 00:00:00 2001 From: yma16 <17685043634@163.com> Date: Mon, 10 Jul 2023 21:44:46 +0800 Subject: [PATCH] perf:no cdn --- src/App.vue | 2 +- src/components/weather/echarts/Map.vue | 283 ++++++++++++------------- 2 files changed, 139 insertions(+), 146 deletions(-) diff --git a/src/App.vue b/src/App.vue index 13ed6c4..1689e0b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -80,7 +80,7 @@
- + 注销 diff --git a/src/components/weather/echarts/Map.vue b/src/components/weather/echarts/Map.vue index f352b3d..51bdc0a 100644 --- a/src/components/weather/echarts/Map.vue +++ b/src/components/weather/echarts/Map.vue @@ -98,169 +98,162 @@ export default { this.initOptionData() }, initOptionData: function () { - const echarts = this.$echarts - if (!echarts) return - let that = this + // const echarts = this.$echarts + // if (!echarts) return + const that = this // 置空 that.linesCoord = [] - function task1 () { - let that = this + async function task1 () { return new Promise((resolve) => { - setTimeout(() => { - console.log('第1个任务geojson获取') - this.$axios - .get('https://yongma16.xyz/static/json/map/guizhou.json') - .then(function (response) { - let res = response.data - that.gisData = res - console.log('贵州数据', res) - let itemData = res.features - let length = itemData.length - that.aimPointData = [] - for (let loc = 0; loc < length; ++loc) { - let name = itemData[loc].properties.name - that.aimPointData.push({ - value: name - }) - let center = itemData[loc].properties.center - // 中心位置 - if (name === that.focusCity) { - that.centerLoction = center - } + that.$axios + .get('https://yongma16.xyz/static/json/map/guizhou.json') + .then(function (response) { + let res = response.data + that.gisData = res + console.log('贵州数据', res) + let itemData = res.features + let length = itemData.length + that.aimPointData = [] + for (let loc = 0; loc < length; ++loc) { + let name = itemData[loc].properties.name + that.aimPointData.push({ + value: name + }) + let center = itemData[loc].properties.center + // 中心位置 + if (name === that.focusCity) { + that.centerLoction = center } - for (let loc = 0; loc < length; ++loc) { - let name = itemData[loc].properties.name - let number = (Math.random() * 100).toFixed(2) - let center = itemData[loc].properties.center - that.locationGis.push({ - value: center - }) - // eslint-disable-next-line eqeqeq - if (name !== that.focusCity) { - that.linesCoord.push([center, that.centerLoction]) - } - // eslint-disable-next-line eqeqeq - if (name && name !== '') { - let temp = { - name: `${name}`, - value: Number(number) - } - that.airData.push(temp) + } + for (let loc = 0; loc < length; ++loc) { + let name = itemData[loc].properties.name + let number = (Math.random() * 100).toFixed(2) + let center = itemData[loc].properties.center + that.locationGis.push({ + value: center + }) + // eslint-disable-next-line eqeqeq + if (name !== that.focusCity) { + that.linesCoord.push([center, that.centerLoction]) + } + // eslint-disable-next-line eqeqeq + if (name && name !== '') { + let temp = { + name: `${name}`, + value: Number(number) } - continue + that.airData.push(temp) } - console.log('测试热力处理', that.airData) - echarts.registerMap('geoJson', res) - }) - resolve('第一个任务') - }, 1000) - }).catch((error) => { - throw Error(error) + continue + } + console.log('测试热力处理', that.airData) + echarts.registerMap('geoJson', res) + resolve('第一个任务') + }).catch(r => { + resolve(r) + }) }) } - function task2 () { + async function task2 () { return new Promise((resolve) => { - setTimeout(() => { - console.log('第2个任务option配置') - that.option = { - title: { - text: '贵州省地图', - subtext: 'geoJson' - }, - geo: { - // 经纬度中心 - center: that.centerLoction, + that.option = { + title: { + text: '贵州省地图', + subtext: 'geoJson' + }, + geo: { + // 经纬度中心 + center: that.centerLoction, + type: 'map', + map: 'geoJson', // 这里的值要和上面registerMap的第一个参数一致 + roam: true, // 拖拽 + nameProperty: 'name', + // 悬浮标签 + label: { type: 'map', map: 'geoJson', // 这里的值要和上面registerMap的第一个参数一致 - roam: true, // 拖拽 + // roam: false, // 拖拽 nameProperty: 'name', - // 悬浮标签 - label: { - type: 'map', - map: 'geoJson', // 这里的值要和上面registerMap的第一个参数一致 - // roam: false, // 拖拽 - nameProperty: 'name', - show: true, - color: '#fff', - backgroundColor: '#546de5', - align: 'center', - fontSize: 10, - width: (function () { - // let n = parseInt(Math.random() * 10) - return 110 - })(), - height: 50, - shadowColor: 'rgba(0,0,0,.7)', - borderRadius: 10 + show: true, + color: '#fff', + backgroundColor: '#546de5', + align: 'center', + fontSize: 10, + width: (function () { + // let n = parseInt(Math.random() * 10) + return 110 + })(), + height: 50, + shadowColor: 'rgba(0,0,0,.7)', + borderRadius: 10 + }, + zoom: 1.2 + }, + series: [ + // 坐标点的热力数据 + { + data: that.airData, + geoIndex: 0, // 将热力的数据和第0个geo配置关联在一起 + type: 'map' + }, + { + type: 'effectScatter', + // 渲染显示 + zlevel: 2, + showEffectOn: 'render', + data: that.locationGis, // 配置散点的坐标数据 + coordinateSystem: 'geo', // 指明散点使用的坐标系统 + rippleEffect: { + // 缩放 + scale: 4, + // 涟漪的颜色 + color: '#cf6a87', + // 波纹数量 + number: 2, + // 扩散方式 stroke(线条) fill（区域覆盖） + brushType: 'fill' }, - zoom: 1.2 + // 形状 + symbol: 'circle' }, - series: [ - // 坐标点的热力数据 - { - data: that.airData, - geoIndex: 0, // 将热力的数据和第0个geo配置关联在一起 - type: 'map' + // 飞线层 + { + // name: '贵阳市飞线', + type: 'lines', + coordinateSystem: 'geo', + polyline: true, + zlevel: 3, + effect: { + show: true, + period: 5, + trailLength: 0, // 拖尾 + symbol: 'arrow', // 箭头 + color: 'red', // 样式颜色 + symbolSize: 5 }, - { - type: 'effectScatter', - // 渲染显示 - zlevel: 2, - showEffectOn: 'render', - data: that.locationGis, // 配置散点的坐标数据 - coordinateSystem: 'geo', // 指明散点使用的坐标系统 - rippleEffect: { - // 缩放 - scale: 4, - // 涟漪的颜色 - color: '#cf6a87', - // 波纹数量 - number: 2, - // 扩散方式 stroke(线条) fill（区域覆盖） - brushType: 'fill' - }, - // 形状 - symbol: 'circle' + lineStyle: { + color: '#000', + width: 2, + type: 'solid', + dashOffset: 0 + // cap: butt, + // join: bevel }, - // 飞线层 - { - // name: '贵阳市飞线', - type: 'lines', - coordinateSystem: 'geo', - polyline: true, - zlevel: 3, - effect: { - show: true, - period: 5, - trailLength: 0, // 拖尾 - symbol: 'arrow', // 箭头 - color: 'red', // 样式颜色 - symbolSize: 5 - }, - lineStyle: { - color: '#000', - width: 2, - type: 'solid', - dashOffset: 0 - // cap: butt, - // join: bevel - }, - // 飞线层数据 - data: that.linesCoord - } - ], - visualMap: { - min: 0, - max: 100, - inRange: { - color: ['white', '#0984e3'] // 控制颜色渐变的范围 - }, - calculable: false // 出现滑块 + // 飞线层数据 + data: that.linesCoord } + ], + visualMap: { + min: 0, + max: 100, + inRange: { + color: ['white', '#0984e3'] // 控制颜色渐变的范围 + }, + calculable: false // 出现滑块 } - resolve('2') - }, 1000) + } + resolve('echarts options') }) } async function allTasks () { @@ -274,7 +267,7 @@ export default { }) }, initMapGis: function (optionParams) { - let that = this + const that = this try { // 基于准备好的dom，初始化echarts实例 console.log('echarts_map渲染') -- GitLab