From d83609fd58b5d30396866ab540b526e4a1eb9a27 Mon Sep 17 00:00:00 2001 From: xuhuajiao <13476289682@163.com> Date: Wed, 17 Jul 2024 17:02:14 +0800 Subject: [PATCH] =?UTF-8?q?echarts=E7=9B=B8=E5=85=B3=E8=A1=A8=E5=8C=B9?= =?UTF-8?q?=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 2 +- src/assets/styles/index.scss | 1 + src/components/echart/barEcharts.vue | 245 ++++++++-------- src/components/echart/todayCircle.vue | 304 +++++++++++--------- src/components/echart/yearCircle.vue | 333 +++++++++++++--------- src/views/map/index.vue | 389 +++++++++++++------------- src/views/pageThree/index.vue | 2 + 7 files changed, 714 insertions(+), 562 deletions(-) diff --git a/.env.development b/.env.development index 41e54d6..22f2394 100644 --- a/.env.development +++ b/.env.development @@ -3,7 +3,7 @@ ENV = 'development' # 接口地址 # 许镇-本地服地址 -VUE_APP_BASE_API = 'http://192.168.99.67:8080' +VUE_APP_BASE_API = 'http://192.168.99.67:7070' # VUE_APP_BASE_API = 'http://27.19.209.92:13244' VUE_APP_LIB_API = 'http://118.253.150.248:8099' diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 2fba1fc..8751d20 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -7,6 +7,7 @@ color: #fff; overflow: hidden; background: url('~@/assets/images/bg2.png') no-repeat top center #02061a; + background-size: 100% 100%; font-family: 'DingTalk_JinBuTi_Regular'; } diff --git a/src/components/echart/barEcharts.vue b/src/components/echart/barEcharts.vue index 8716a8f..5012d0d 100644 --- a/src/components/echart/barEcharts.vue +++ b/src/components/echart/barEcharts.vue @@ -91,131 +91,158 @@ export default { } this.chart.setOption({ - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - legend: { // 图例 - right: 20, - top: 10, - icon: 'rect', - itemHeight: 6, - itemWidth: 11, - textStyle: { - color: '#fff', - fontSize: 18 + baseOption: { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } }, - data: [ - { - name: '借出', - icon: 'rect', - textStyle: { - color: '#41A3FF', - fontFamily: 'DingTalk_JinBuTi_Regular' + legend: { // 图例 + right: 20, + top: 10, + icon: 'rect', + itemHeight: 6, + itemWidth: 11, + textStyle: { + color: '#fff', + fontSize: 18 + }, + data: [ + { + name: '借出', + icon: 'rect', + textStyle: { + color: '#41A3FF', + fontFamily: 'DingTalk_JinBuTi_Regular' + } + }, + { + name: '归还', + icon: 'rect', + textStyle: { + color: '#FFD050', + fontFamily: 'DingTalk_JinBuTi_Regular' + } + } + ] + }, + grid: { + left: '3%', + right: '3%', + bottom: '8%', + top: '17%', + containLabel: true + }, + xAxis: [{ + type: 'category', + axisTick: { show: false }, + data: date, + axisLine: { // 轴线的颜色以及宽度 + lineStyle: { + color: '#113D72' } }, - { - name: '归还', - icon: 'rect', + axisLabel: { // x轴文字的配置 + show: true, + interval: 0, textStyle: { - color: '#FFD050', + color: '#79B8FF', + fontSize: 16, fontFamily: 'DingTalk_JinBuTi_Regular' } + }, + splitLine: { // 分割线配置 + lineStyle: { + color: '#113D72', + type: 'solid' + } } - ] - }, - grid: { - left: '3%', - right: '3%', - bottom: '8%', - top: '17%', - containLabel: true - }, - xAxis: [{ - type: 'category', - axisTick: { show: false }, - data: date, - axisLine: { // 轴线的颜色以及宽度 - lineStyle: { - color: '#113D72' - } - }, - axisLabel: { // x轴文字的配置 - show: true, - interval: 0, - textStyle: { - color: '#79B8FF', - fontSize: 16, - fontFamily: 'DingTalk_JinBuTi_Regular' - } - }, - splitLine: { // 分割线配置 - lineStyle: { - color: '#113D72', - type: 'solid' - } - } - }], - yAxis: [{ - min: 0, - max: function(value) { - return Math.ceil(value.max + (value.max - value.min) * 0.2) - }, - minInterval: 1, - type: 'value', - axisLine: { // 轴线的颜色以及宽度 - show: false - }, - axisLabel: { // 轴文字的配置 - show: true, - interval: 'auto', - formatter: function(value) { - // 使用formatter保证即使在缩放时也只显示整数 - return Math.round(value) + }], + yAxis: [{ + min: 0, + max: function(value) { + return Math.ceil(value.max + (value.max - value.min) * 0.2) }, - textStyle: { - color: '#79B8FF', - fontSize: 16, - fontFamily: 'DingTalk_JinBuTi_Regular' + minInterval: 1, + type: 'value', + axisLine: { // 轴线的颜色以及宽度 + show: false + }, + axisLabel: { // 轴文字的配置 + show: true, + interval: 'auto', + formatter: function(value) { + // 使用formatter保证即使在缩放时也只显示整数 + return Math.round(value) + }, + textStyle: { + color: '#79B8FF', + fontSize: 16, + fontFamily: 'DingTalk_JinBuTi_Regular' + } + }, + axisTick: { // 刻度线隐藏 + show: false + }, + splitLine: { // 分割线配置 + lineStyle: { + color: 'rgba(66, 139, 221, 0.2)', + type: 'solid' + } } - }, - axisTick: { // 刻度线隐藏 - show: false - }, - splitLine: { // 分割线配置 - lineStyle: { - color: 'rgba(66, 139, 221, 0.2)', - type: 'solid' + }], + series: [ + { + name: '借出', + type: 'bar', + barWidth: 14, // 柱图宽度 + barGap: '30%', + emphasis: { + focus: 'series' + }, + data: outchartWeeklyData, + itemStyle: { + color: '#41A3FF' + } + }, + { + name: '归还', + type: 'bar', + barWidth: 14, // 柱图宽度 + emphasis: { + focus: 'series' + }, + data: inchartWeeklyData, + itemStyle: { + color: '#FFD14F' + } } - } - }], - series: [ + ] + }, + media: [ { - name: '借出', - type: 'bar', - barWidth: 14, // 柱图宽度 - barGap: '30%', - emphasis: { - focus: 'series' - }, - data: outchartWeeklyData, - itemStyle: { - color: '#41A3FF' + option: { + series: [ + { + type: 'pie', + left: '-50%' + } + ] } }, { - name: '归还', - type: 'bar', - barWidth: 14, // 柱图宽度 - emphasis: { - focus: 'series' + query: { + maxWidth: 675 }, - data: inchartWeeklyData, - itemStyle: { - color: '#FFD14F' + option: { + xAxis: [{ + data: date.map(dateStr => { + const parts = dateStr.split('/') + return parts.slice(1).join('/') // 只保留月份和日期部分 + }) + }] } } ] diff --git a/src/components/echart/todayCircle.vue b/src/components/echart/todayCircle.vue index b94aac6..0b815c2 100644 --- a/src/components/echart/todayCircle.vue +++ b/src/components/echart/todayCircle.vue @@ -54,150 +54,194 @@ export default { } var centerImg = require('@/assets/images/circle-bg.png') const option = { - tooltip: { - show: false, - trigger: 'item', - position: 'bottom', - textStyle: { - color: '#EEF6FF', - fontSize: '18' - } + baseOption: { + tooltip: { + show: false, + trigger: 'item', + position: 'bottom', + textStyle: { + color: '#EEF6FF', + fontSize: '18' + } // backgroundColor: 'rgba(74, 144, 226, 0.84)', // formatter: (params) => { // return `
${params.seriesName}
${params.data.name}：${this.$parent.formatter(params.data.value)} (${params.percent}%)
` // } - }, - legend: { - orient: 'vertical', - right: 70, - top: 55, - // textStyle: { - // color: '#EEF6FF', - // padding: [20, 0, 18, 4], - // fontSize: '14' - // }, - itemWidth: 10, - itemHeight: 10, - icon: 'circle', - selectedMode: false, - data: ['总馆', '分馆'], - formatter: (name) => { + }, + legend: { + orient: 'vertical', + right: 70, + top: 55, + // textStyle: { + // color: '#EEF6FF', + // padding: [20, 0, 18, 4], + // fontSize: '14' + // }, + itemWidth: 10, + itemHeight: 10, + icon: 'circle', + selectedMode: false, + data: ['总馆', '分馆'], + formatter: (name) => { // `${name} ${((flag.value / count).toFixed(2)) * 100 + '%'}` - const count = arrCount(optionData) - if (optionData) { - const flag = optionData?.find(item => name === item.name) - if (flag) { - const percentage = count > 0 ? ((flag.value / count) * 100).toFixed(0) + '%' : '0%' - return [`{name|${name}}`, `{num|${percentage}}`] + const count = arrCount(optionData) + if (optionData) { + const flag = optionData?.find(item => name === item.name) + if (flag) { + const percentage = count > 0 ? ((flag.value / count) * 100).toFixed(0) + '%' : '0%' + return [`{name|${name}}`, `{num|${percentage}}`] + } + } + return name + }, + textStyle: { + rich: { + name: { + fontSize: 18, + color: '#EEF6FF', + padding: [20, 0, 20, 4], + fontFamily: 'DingTalk_JinBuTi_Regular' + }, + num: { + fontSize: 20, + fontWeight: 600, + padding: [20, 0, 20, 15], + color: '#4C90FF', + fontFamily: 'DingTalk_JinBuTi_Regular' + } } } - return name }, - textStyle: { - rich: { - name: { - fontSize: 18, - color: '#EEF6FF', - padding: [20, 0, 20, 4], - fontFamily: 'DingTalk_JinBuTi_Regular' - }, - num: { - fontSize: 20, - fontWeight: 600, - padding: [20, 0, 20, 15], - color: '#4C90FF', - fontFamily: 'DingTalk_JinBuTi_Regular' + // 中心图片配置(关键代码) + graphic: [ + { + type: 'image', + id: 'logo', + left: '8.5%', // 调整图片位置 + top: '22%', // 调整图片位置 + z: -10, + bounding: 'raw', + rotation: 0, // 旋转 + origin: [64.5, 32.5], // 中心点 + scale: [1.0, 1.0], // 缩放 + // 设置图片样式 + style: { + image: centerImg, + width: 132, + height: 131, + opacity: 1 } } - } - }, - // 中心图片配置(关键代码) - graphic: [ - { - type: 'image', - id: 'logo', - left: '8.5%', // 调整图片位置 - top: '22%', // 调整图片位置 - z: -10, - bounding: 'raw', - rotation: 0, // 旋转 - origin: [64.5, 32.5], // 中心点 - scale: [1.0, 1.0], // 缩放 - // 设置图片样式 - style: { - image: centerImg, - width: 132, - height: 131, - opacity: 1 - } - } - ], - series: [ - { - name: '今日累计借阅', - type: 'pie', - left: '-50%', - radius: ['60%', '70%'], - avoidLabelOverlap: false, - - label: { - show: false, - position: 'center' - }, - labelLine: { - show: true - }, - itemStyle: { - borderWidth: 2, - borderColor: 'rgba(16,16,21,0.4)' - }, - emphasis: { + ], + series: [ + { + name: '今日累计借阅', + type: 'pie', + left: '-50%', + radius: ['60%', '70%'], + avoidLabelOverlap: false, label: { - show: true, - // 自定义文字显示，函数默认params接受当前指向所有属性 - formatter: function(params) { - const { value, name } = params - return [ - `{c| ${value}}`, - `{b| ${name}}` - ].join('\n') // 换行 - }, - rich: { - c: { - fontSize: 24, - fontWeight: 600, - color: '#317FFF', - fontFamily: 'DingTalk_JinBuTi_Regular', - // color: { - // type: 'linear', - // x: 0, - // y: 0, - // x2: 0, - // y2: 1, - // colorStops: [ - // { - // offset: 0, - // color: 'red' // 0% 处的颜色 - // }, - // { - // offset: 1, - // color: 'yellow' // 100% 处的颜色 - // } - // ], - // globalCoord: false // 缺省为 false - // }, - lineHeight: 34 + show: false, + position: 'center' + }, + labelLine: { + show: true + }, + itemStyle: { + borderWidth: 2, + borderColor: 'rgba(16,16,21,0.4)' + }, + emphasis: { + label: { + show: true, + // 自定义文字显示，函数默认params接受当前指向所有属性 + formatter: function(params) { + const { value, name } = params + return [ + `{c| ${value}}`, + `{b| ${name}}` + ].join('\n') // 换行 }, - b: { - fontSize: 18, - color: '#fff', - fontFamily: 'DingTalk_JinBuTi_Regular' + rich: { + c: { + fontSize: 24, + fontWeight: 600, + color: '#317FFF', + fontFamily: 'DingTalk_JinBuTi_Regular', + lineHeight: 34 + }, + b: { + fontSize: 18, + color: '#fff', + fontFamily: 'DingTalk_JinBuTi_Regular' + } } } - } + }, + color: ['#317FFF', '#31DFFF'], + data: optionData + } + ] + }, + media: [ + { + query: { + maxWidth: 317 }, - color: ['#317FFF', '#31DFFF'], - data: optionData + option: { + legend: { + right: 30, + top: 'center', + textStyle: { + rich: { + name: { + fontSize: 14 + }, + num: { + fontSize: 16 + } + } + } + }, + // 中心图片配置(关键代码) + graphic: [ + { + left: '8%', // 调整图片位置 + top: '26%', // 调整图片位置 + z: -10, + bounding: 'raw', + rotation: 0, // 旋转 + origin: [64.5, 32.5], // 中心点 + scale: [1.0, 1.0], // 缩放 + // 设置图片样式 + style: { + image: centerImg, + width: 110, + height: 110, + opacity: 1 + } + } + ], + series: [ + { + type: 'pie', + radius: ['50%', '55%'], + emphasis: { + label: { + rich: { + c: { + fontSize: 22, + lineHeight: 28 + }, + b: { + fontSize: 16 + } + } + } + } + } + ] + } } ] } @@ -216,7 +260,7 @@ export default { // }) // }, 1000) - this.$LoopShowTooltip(myChart, option, { loopSeries: true, interval: 4000 }) + this.$LoopShowTooltip(myChart, option.baseOption, { loopSeries: true, interval: 4000 }) } } } diff --git a/src/components/echart/yearCircle.vue b/src/components/echart/yearCircle.vue index 318c8e6..c9f2d28 100644 --- a/src/components/echart/yearCircle.vue +++ b/src/components/echart/yearCircle.vue @@ -54,161 +54,224 @@ export default { } var centerImg = require('@/assets/images/circle-bg.png') const option = { - tooltip: { - show: false, - trigger: 'item', - position: 'bottom', - textStyle: { - color: '#EEF6FF', - fontSize: '18' - } + baseOption: { + tooltip: { + show: false, + trigger: 'item', + position: 'bottom', + textStyle: { + color: '#EEF6FF', + fontSize: '18' + } // backgroundColor: 'rgba(74, 144, 226, 0.84)', // formatter: (params) => { // return `
${params.seriesName}
${params.data.name}：${this.$parent.formatter(params.data.value)} (${params.percent}%)
` // } - }, - legend: { - orient: 'vertical', - right: 70, - top: 55, - // textStyle: { - // color: '#EEF6FF', - // padding: [20, 0, 18, 4], - // fontSize: '14' - // }, - itemWidth: 10, - itemHeight: 10, - icon: 'circle', - selectedMode: false, - data: ['总馆', '分馆'], - formatter: (name) => { - // `${name} ${((flag.value / count).toFixed(2)) * 100 + '%'}` - const count = arrCount(optionData) - if (optionData) { - const flag = optionData?.find(item => name === item.name) - if (flag) return [`{name|${name}}`, `{num|${((flag.value / count).toFixed(2)) * 100 + '%'}}`] - } else return name }, - textStyle: { - rich: { - name: { - fontSize: 18, - color: '#EEF6FF', - fontFamily: 'DingTalk_JinBuTi_Regular', - padding: [20, 0, 20, 4] - }, - num: { - fontSize: 20, - fontWeight: 600, - padding: [20, 0, 20, 15], - color: '#4C90FF', - fontFamily: 'DingTalk_JinBuTi_Regular' + legend: { + orient: 'vertical', + right: 70, + top: 55, + // textStyle: { + // color: '#EEF6FF', + // padding: [20, 0, 18, 4], + // fontSize: '14' + // }, + itemWidth: 10, + itemHeight: 10, + icon: 'circle', + selectedMode: false, + data: ['总馆', '分馆'], + formatter: (name) => { + // `${name} ${((flag.value / count).toFixed(2)) * 100 + '%'}` + const count = arrCount(optionData) + if (optionData) { + const flag = optionData?.find(item => name === item.name) + if (flag) return [`{name|${name}}`, `{num|${((flag.value / count).toFixed(2)) * 100 + '%'}}`] + } else return name + }, + textStyle: { + rich: { + name: { + fontSize: 18, + color: '#EEF6FF', + fontFamily: 'DingTalk_JinBuTi_Regular', + padding: [20, 0, 20, 4] + }, + num: { + fontSize: 20, + fontWeight: 600, + padding: [20, 0, 20, 15], + color: '#4C90FF', + fontFamily: 'DingTalk_JinBuTi_Regular' + } } } - } - // formatter: function(name) { - // let tarValue - // const count = arrCount(optionData) - // for (let i = 0; i < optionData.length; i++) { - // if (data[i].name === name) { - // tarValue = data[i].value - // } - // } + // formatter: function(name) { + // let tarValue + // const count = arrCount(optionData) + // for (let i = 0; i < optionData.length; i++) { + // if (data[i].name === name) { + // tarValue = data[i].value + // } + // } // return [`{name|${name}}`, `{num|${((tarValue / count).toFixed(2)) * 100 + '%'}}`].join('\n') // } - }, - // 中心图片配置(关键代码) - graphic: [ - { - type: 'image', - id: 'logo', - left: '8.5%', // 调整图片位置 - top: '22%', // 调整图片位置 - z: -10, - bounding: 'raw', - rotation: 0, // 旋转 - origin: [64.5, 32.5], // 中心点 - scale: [1.0, 1.0], // 缩放 - // 设置图片样式 - style: { - image: centerImg, - width: 132, - height: 131, - opacity: 1 + }, + // 中心图片配置(关键代码) + graphic: [ + { + type: 'image', + id: 'logo', + left: '8.5%', // 调整图片位置 + top: '22%', // 调整图片位置 + z: -10, + bounding: 'raw', + rotation: 0, // 旋转 + origin: [64.5, 32.5], // 中心点 + scale: [1.0, 1.0], // 缩放 + // 设置图片样式 + style: { + image: centerImg, + width: 132, + height: 131, + opacity: 1 + } } - } - ], - series: [ - { - name: '本年累计借阅', - type: 'pie', - left: '-50%', - radius: ['60%', '70%'], - avoidLabelOverlap: false, - label: { - show: false, - position: 'center' - }, - labelLine: { - show: true - }, - itemStyle: { - borderWidth: 2, - borderColor: 'rgba(16,16,21,0.4)' - }, - emphasis: { + ], + series: [ + { + name: '本年累计借阅', + type: 'pie', + left: '-50%', + radius: ['60%', '70%'], + avoidLabelOverlap: false, label: { - show: true, - // 自定义文字显示，函数默认params接受当前指向所有属性 - formatter: function(params) { - const { value, name } = params - return [ - `{c| ${value}}`, - `{b| ${name}}` - ].join('\n') // 换行 - }, - rich: { - c: { - fontSize: 24, - fontWeight: 600, - color: '#317FFF', - fontFamily: 'DingTalk_JinBuTi_Regular', - // color: { - // type: 'linear', - // x: 0, - // y: 0, - // x2: 0, - // y2: 1, - // colorStops: [ - // { - // offset: 0, - // color: 'red' // 0% 处的颜色 - // }, - // { - // offset: 1, - // color: 'yellow' // 100% 处的颜色 - // } - // ], - // globalCoord: false // 缺省为 false - // }, - lineHeight: 34 + show: false, + position: 'center' + }, + labelLine: { + show: true + }, + itemStyle: { + borderWidth: 2, + borderColor: 'rgba(16,16,21,0.4)' + }, + emphasis: { + label: { + show: true, + // 自定义文字显示，函数默认params接受当前指向所有属性 + formatter: function(params) { + const { value, name } = params + return [ + `{c| ${value}}`, + `{b| ${name}}` + ].join('\n') // 换行 }, - b: { - fontSize: 18, - color: '#fff', - fontFamily: 'DingTalk_JinBuTi_Regular' + rich: { + c: { + fontSize: 24, + fontWeight: 600, + color: '#317FFF', + fontFamily: 'DingTalk_JinBuTi_Regular', + // color: { + // type: 'linear', + // x: 0, + // y: 0, + // x2: 0, + // y2: 1, + // colorStops: [ + // { + // offset: 0, + // color: 'red' // 0% 处的颜色 + // }, + // { + // offset: 1, + // color: 'yellow' // 100% 处的颜色 + // } + // ], + // globalCoord: false // 缺省为 false + // }, + lineHeight: 34 + }, + b: { + fontSize: 18, + color: '#fff', + fontFamily: 'DingTalk_JinBuTi_Regular' + } } } - } + }, + color: ['#317FFF', '#31DFFF'], + data: optionData + } + ] + }, + media: [ + { + query: { + maxWidth: 317 }, - color: ['#317FFF', '#31DFFF'], - data: optionData + option: { + legend: { + right: 30, + top: 'center', + textStyle: { + rich: { + name: { + fontSize: 14 + }, + num: { + fontSize: 16 + } + } + } + }, + // 中心图片配置(关键代码) + graphic: [ + { + left: '8%', // 调整图片位置 + top: '26%', // 调整图片位置 + z: -10, + bounding: 'raw', + rotation: 0, // 旋转 + origin: [64.5, 32.5], // 中心点 + scale: [1.0, 1.0], // 缩放 + // 设置图片样式 + style: { + image: centerImg, + width: 110, + height: 110, + opacity: 1 + } + } + ], + series: [ + { + type: 'pie', + radius: ['50%', '55%'], + emphasis: { + label: { + rich: { + c: { + fontSize: 22, + lineHeight: 28 + }, + b: { + fontSize: 16 + } + } + } + } + } + ] + } } ] } myChart.setOption(option) - this.$LoopShowTooltip(myChart, option, { loopSeries: true, interval: 4000 }) + this.$LoopShowTooltip(myChart, option.baseOption, { loopSeries: true, interval: 4000 }) } } } diff --git a/src/views/map/index.vue b/src/views/map/index.vue index ccf4ccb..01cf5c2 100644 --- a/src/views/map/index.vue +++ b/src/views/map/index.vue @@ -134,7 +134,7 @@ export default { this.destroy() }, created() { - // this.getLibBookTotal() + this.getLibBookTotal() this.getReadRanking() this.getLendingTotal() }, @@ -515,71 +515,53 @@ export default { this.seriesData = series const initOption = { - // {a}
- // 提示框 - tooltip: { - trigger: 'item', - triggerOn: 'click', - showContent: true, // 是否显示提示框浮层 - alwaysShowContent: true, // 是否一直显示提示框内容 - // hideDelay: 100, // 浮层隐藏的延迟 - enterable: 'mousemove|click', - padding: [0, 0, 0, 0], - backgroundColor: null, - position: function(point, params, dom, rect, size) { - return [point[0] + 14, point[1] - 164] - }, - formatter: (params, ticket, callback) => { - if (params.seriesType === 'effectScatter') { - const addressLine = params.data.place ? `
地址：${params.data.place}
` : '' - return `
+ baseOption: { + // 提示框 + tooltip: { + trigger: 'item', + triggerOn: 'click', + showContent: true, // 是否显示提示框浮层 + alwaysShowContent: true, // 是否一直显示提示框内容 + // hideDelay: 100, // 浮层隐藏的延迟 + enterable: 'mousemove|click', + padding: [0, 0, 0, 0], + backgroundColor: null, + position: function(point, params, dom, rect, size) { + return [point[0] + 14, point[1] - 164] + }, + formatter: (params, ticket, callback) => { + if (params.seriesType === 'effectScatter') { + const addressLine = params.data.place ? `
地址：${params.data.place}
` : '' + return `
${params.data.name}
${addressLine}
` - } else if (params.seriesType === 'lines') { - return ( - params.data.fromName + + } else if (params.seriesType === 'lines') { + return ( + params.data.fromName + '>' + params.data.toName + '
' + params.data.value - ) - } else { - return params.name + ) + } else { + return params.name + } } - } - }, - // 设置geo坐标系 - geo: [ - { - map: 'qiyang', - aspectScale: 1, - zoom: 1.1, - top: '6%', // 距离顶部的位置，每层向下一个百分比 - left: '11%', - roam: false, // 是否开启平游或缩放 - z: 6, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了 - itemStyle: { - areaColor: { - type: 'linear', - x: 0, - y: 0, - x2: 1, - y2: 1, - colorStops: [{ - offset: 0, color: 'rgba(0,0,0,.1)' - }, { - offset: 0.8, color: 'rgba(59,143,248,.6)' - }], - global: false - }, - borderColor: '#9ffcff', - borderWidth: 1 - }, - emphasis: { + }, + // 设置geo坐标系 + geo: [ + { + map: 'qiyang', + aspectScale: 1, + zoom: 1.1, + top: '6%', // 距离顶部的位置，每层向下一个百分比 + left: '11%', + roam: false, // 是否开启平游或缩放 + z: 6, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了 itemStyle: { areaColor: { type: 'linear', @@ -593,160 +575,193 @@ export default { offset: 0.8, color: 'rgba(59,143,248,.6)' }], global: false - } // 鼠标移上去时区域的颜色 - } - }, - label: { + }, + borderColor: '#9ffcff', + borderWidth: 1 + }, emphasis: { - show: false, - color: '#fff' + itemStyle: { + areaColor: { + type: 'linear', + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: [{ + offset: 0, color: 'rgba(0,0,0,.1)' + }, { + offset: 0.8, color: 'rgba(59,143,248,.6)' + }], + global: false + } // 鼠标移上去时区域的颜色 + } + }, + label: { + emphasis: { + show: false, + color: '#fff' + } + }, + tooltip: { + show: true } }, - tooltip: { - show: true - } - }, - { - map: 'qiyang', - aspectScale: 1, - zoom: 1.1, - top: '6%', // 距离顶部的位置，每层向下一个百分比 - left: '11%', - roam: false, // 是否开启平游或缩放 - z: 5, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了 - itemStyle: { - areaColor: { - type: 'pattern', - image: mapImg, - repeat: 'repeat' - }, // 每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样 - borderColor: '#9ffcff', - borderWidth: 3, - shadowColor: '#4cd4eb', - shadowOffsetX: 0, - shadowOffsetY: 0, - shadowBlur: 0, - emphasis: { // 地图悬停高亮样式 + { + map: 'qiyang', + aspectScale: 1, + zoom: 1.1, + top: '6%', // 距离顶部的位置，每层向下一个百分比 + left: '11%', + roam: false, // 是否开启平游或缩放 + z: 5, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了 + itemStyle: { areaColor: { type: 'pattern', image: mapImg, repeat: 'repeat' + }, // 每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样 + borderColor: '#9ffcff', + borderWidth: 3, + shadowColor: '#4cd4eb', + shadowOffsetX: 0, + shadowOffsetY: 0, + shadowBlur: 0, + emphasis: { // 地图悬停高亮样式 + areaColor: { + type: 'pattern', + image: mapImg, + repeat: 'repeat' + } } - } - }, - emphasis: { - disabled: true, - areaColor: '#01215c' - }, - label: { + }, emphasis: { - show: false, - color: '#fff' + disabled: true, + areaColor: '#01215c' + }, + label: { + emphasis: { + show: false, + color: '#fff' + } + }, + tooltip: { + show: false } }, - tooltip: { - show: false - } - }, - { - map: 'qiyang', - aspectScale: 1, - zoom: 1.1, - top: '7%', // 根据自己需要来设置 - left: '10%', - roam: false, // 是否开启平游或缩放 - z: 4, // 变小，也就是被压在下面 - itemStyle: { - areaColor: '#05498f', // 记得改颜色 - borderColor: '#0296cf', - borderWidth: 2, - shadowColor: '#0296cf', - shadowOffsetX: 0, - shadowOffsetY: 0, - shadowBlur: 0, - emphasis: { // 地图悬停高亮样式 - disabled: true, - areaColor: '#05498f' + { + map: 'qiyang', + aspectScale: 1, + zoom: 1.1, + top: '7%', // 根据自己需要来设置 + left: '10%', + roam: false, // 是否开启平游或缩放 + z: 4, // 变小，也就是被压在下面 + itemStyle: { + areaColor: '#05498f', // 记得改颜色 + borderColor: '#0296cf', + borderWidth: 2, + shadowColor: '#0296cf', + shadowOffsetX: 0, + shadowOffsetY: 0, + shadowBlur: 0, + emphasis: { // 地图悬停高亮样式 + disabled: true, + areaColor: '#05498f' + } + }, + tooltip: { + show: false } }, - tooltip: { - show: false - } - }, - { - map: 'qiyang', - aspectScale: 1, - zoom: 1.1, - top: '9%', // 根据自己需要来设置 - left: '9%', - roam: false, - z: 3, // 变小，也就是被压在下面 - itemStyle: { - areaColor: 'rgba(3,106,183,.5)', // 记得改颜色 - borderColor: '#025792', - borderWidth: 2, - shadowColor: '#025792', - shadowOffsetX: 0, - shadowOffsetY: 0, - shadowBlur: 0, - emphasis: { // 地图悬停高亮样式 - areaColor: 'rgba(3,106,183,.5)' + { + map: 'qiyang', + aspectScale: 1, + zoom: 1.1, + top: '9%', // 根据自己需要来设置 + left: '9%', + roam: false, + z: 3, // 变小，也就是被压在下面 + itemStyle: { + areaColor: 'rgba(3,106,183,.5)', // 记得改颜色 + borderColor: '#025792', + borderWidth: 2, + shadowColor: '#025792', + shadowOffsetX: 0, + shadowOffsetY: 0, + shadowBlur: 0, + emphasis: { // 地图悬停高亮样式 + areaColor: 'rgba(3,106,183,.5)' + } + }, + tooltip: { + show: false } }, - tooltip: { - show: false - } - }, - { - map: 'qiyang', - aspectScale: 1, - zoom: 1.1, - top: '11%', // 根据自己需要来设置 - left: '8%', - roam: false, - z: 2, // 变小，也就是被压在下面 - itemStyle: { - areaColor: 'rgba(3,106,183,.2)', // 记得改颜色 - borderColor: '#195175', - borderWidth: 1, - shadowColor: '#0f4c74', - shadowOffsetX: 0, - shadowOffsetY: 4, - shadowBlur: 10, - emphasis: { // 地图悬停高亮样式 - areaColor: 'rgba(3,106,183,.2)' + { + map: 'qiyang', + aspectScale: 1, + zoom: 1.1, + top: '11%', // 根据自己需要来设置 + left: '8%', + roam: false, + z: 2, // 变小，也就是被压在下面 + itemStyle: { + areaColor: 'rgba(3,106,183,.2)', // 记得改颜色 + borderColor: '#195175', + borderWidth: 1, + shadowColor: '#0f4c74', + shadowOffsetX: 0, + shadowOffsetY: 4, + shadowBlur: 10, + emphasis: { // 地图悬停高亮样式 + areaColor: 'rgba(3,106,183,.2)' + } + }, + tooltip: { + show: false } }, - tooltip: { - show: false + { + map: 'qiyang', + aspectScale: 1, + zoom: 1.1, + top: '12%', // 根据自己需要来设置 + left: '10%', + roam: false, + z: 1, // 变小，也就是被压在下面 + itemStyle: { + areaColor: 'rgba(0,0,0,.6)', // 记得改颜色 + borderColor: 'rgba(0,0,0,.6)', + borderWidth: 2, + shadowColor: 'rgba(0,0,0,.6)', + shadowOffsetX: 0, + shadowOffsetY: 4, + shadowBlur: 10, + emphasis: { // 地图悬停高亮样式 + areaColor: 'rgba(0,0,0,.6)' + } + }, + tooltip: { + show: false + } } - }, + ], + series: series + }, + media: [ { - map: 'qiyang', - aspectScale: 1, - zoom: 1.1, - top: '12%', // 根据自己需要来设置 - left: '10%', - roam: false, - z: 1, // 变小，也就是被压在下面 - itemStyle: { - areaColor: 'rgba(0,0,0,.6)', // 记得改颜色 - borderColor: 'rgba(0,0,0,.6)', - borderWidth: 2, - shadowColor: 'rgba(0,0,0,.6)', - shadowOffsetX: 0, - shadowOffsetY: 4, - shadowBlur: 10, - emphasis: { // 地图悬停高亮样式 - areaColor: 'rgba(0,0,0,.6)' - } + query: { + maxWidth: 666 }, - tooltip: { - show: false + option: { + tooltip: { + position: function(point, params, dom, rect, size) { + return [point[0] + 10, point[1] - 122] + } + } } } - ], - series: series + ] } setTimeout(() => { this.myChart.setOption(initOption) diff --git a/src/views/pageThree/index.vue b/src/views/pageThree/index.vue index 0bd54cb..7c003b4 100644 --- a/src/views/pageThree/index.vue +++ b/src/views/pageThree/index.vue @@ -383,6 +383,8 @@ export default { this.chartWeeklyData.inchartWeeklyData = completeData.map(item => item.hccDayTotal) // // out 借出 this.chartWeeklyData.outchartWeeklyData = completeData.map(item => item.jccDayTotal) + + console.log(this.chartWeeklyData.date) } else { this.chartWeeklyData = { date: [],