From 19f0eca493f7e17ab7b67d28cf77d80de364576c Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期一, 28 十月 2024 15:00:57 +0800
Subject: [PATCH] ll
---
screen/src/views/LogisticsEfficiency.vue | 189 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 186 insertions(+), 3 deletions(-)
diff --git a/screen/src/views/LogisticsEfficiency.vue b/screen/src/views/LogisticsEfficiency.vue
index 4cab385..6441406 100644
--- a/screen/src/views/LogisticsEfficiency.vue
+++ b/screen/src/views/LogisticsEfficiency.vue
@@ -131,7 +131,9 @@
</div>
</div>
</div>
- <div class="center_box_two"></div>
+ <div class="center_box_two">
+ <div ref="echartMap" class="echart_map" id="echartMap"></div>
+ </div>
</div>
<div class="right_box">
<div class="right_box_one">
@@ -244,8 +246,9 @@
import VScaleScreen from 'v-scale-screen'
import Percent from '@/components/percent.vue'
import dayjs from 'dayjs'
-
import * as echarts from 'echarts'
+import ahJSON from '@/assets/anhui.json'
+
const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',]
const date = ref(dayjs().format('YYYY.MM.DD'))
@@ -454,9 +457,179 @@
})
}
+const echartMap = ref()
+const initMap = () => {
+ var myChart = echarts.init(echartMap.value)
+ echarts.registerMap('js', ahJSON)
+ var center = {
+ '鍚堣偉甯�': [117.25, 31.83],
+ '婊佸窞甯�': [118.32, 32.3],
+ '鑺滄箹甯�': [118.43, 31.35],
+ '闃滈槼甯�': [115.38, 32.89],
+ '铓屽煚甯�': [117.39, 32.92],
+ '娣崡甯�': [116.99, 32.63],
+ '椹瀺灞卞競': [118.5, 31.71],
+ '瀹夊簡甯�': [117.05, 30.52],
+ '榛勫北甯�': [118.33, 29.71],
+ '閾滈櫟甯�': [117.81, 30.94],
+ '瀹垮窞甯�': [116.98, 33.64],
+ '娣寳甯�': [116.8, 33.9],
+ '鍏畨甯�': [116.51, 31.75],
+ '姹犲窞甯�': [117.49, 30.66],
+ '瀹ｅ煄甯�': [118.76, 30.94],
+ '浜冲窞甯�': [115.78, 33.84],
+ }
+ var data = [
+ { name: "鍚堣偉甯�", value: 3 },
+ { name: "婊佸窞甯�", value: 0 },
+ { name: "鑺滄箹甯�", value: 1 },
+ { 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: 1 },
+ { name: "瀹ｅ煄甯�", value: 0 },
+ { name: "浜冲窞甯�", value: 0 },
+ ]
+ const option = {
+ title: {
+ top: 20,
+ text: '',
+ subtext: '',
+ x: 'center',
+ textStyle: {
+ color: '#ffffff'
+ }
+ },
+
+ tooltip: {
+ trigger: 'item',
+ formatter: function (params) {
+ if (typeof (params.value)[2] == "undefined") {
+ return params.name + ' : ' + params.value
+ } else {
+ return params.name + ' : ' + params.value[2]
+ }
+ }
+ },
+ visualMap: {
+ show: false,
+ max: 100,
+ seriesIndex: [3],
+ inRange: {
+ color: ['#A5DCF4', '#006edd']
+ }
+ },
+ geo: [{
+ map: 'js',
+ roam: false, //鏄惁鍏佽缂╂斁
+ zoom: 1.1, //榛樿鏄剧ず绾у埆
+ scaleLimit: {
+ min: 0,
+ max: 3
+ }, //缂╂斁绾у埆
+ itemStyle: {
+ normal: {
+ areaColor: 'transparent',
+ borderColor: '#3fdaff',
+ borderWidth: 2,
+ shadowColor: 'rgba(63, 218, 255, 0.5)',
+ shadowBlur: 30
+ },
+ emphasis: {
+ areaColor: '#2B91B7',
+ }
+ },
+ tooltip: {
+ show: false
+ }
+ }],
+ series: [
+ {
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ z: 5,
+ data,
+ symbolSize: 14,
+ label: {
+ normal: {
+ show: true,
+ formatter: function (params) {
+ return '{fline|鍦扮偣锛�' + params.data.city + '}\n{tline|' + (params.data.info || '鍙戠敓xx闆嗕欢') + '}'
+ },
+ position: 'top',
+ backgroundColor: 'rgba(233,63,66,.9)',
+ padding: [0, 0],
+ borderRadius: 3,
+ lineHeight: 32,
+ color: '#ffffff',
+ rich: {
+ fline: {
+ padding: [0, 10, 10, 10],
+ color: '#ffffff'
+ },
+ tline: {
+ padding: [10, 10, 0, 10],
+ color: '#ffffff'
+ }
+ }
+ },
+ emphasis: {
+ show: true
+ }
+ },
+ itemStyle: {
+ color: '#e93f42',
+ }
+ },
+
+ //鍦板浘
+ {
+ type: 'map',
+ mapType: 'js',
+ geoIndex: -1,
+ zoom: 1.1, //榛樿鏄剧ず绾у埆
+ label: {
+ show: true,
+ color: '#ffffff',
+ emphasis: {
+ color: 'white',
+ show: false
+ }
+ },
+ itemStyle: {
+ normal: {
+ borderColor: '#2980b9',
+ borderWidth: 1,
+ areaColor: '#1d3b60'
+ },
+ emphasis: {
+ areaColor: '#FA8C16',
+ borderWidth: 0,
+ color: 'green'
+ }
+ },
+ data: data
+ }
+ ]
+ }
+
+ myChart.setOption(option)
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+}
+
onMounted(() => {
initEnergy()
initEchart1()
+ initMap()
})
@@ -638,8 +811,12 @@
.center_box {
flex: 1;
padding: 16px 60px;
+ display: flex;
+ flex-direction: column;
.center_box_one {
+ height: 190px;
+
.tabs {
display: flex;
align-items: center;
@@ -725,8 +902,14 @@
}
.center_box_two {
+ flex: 1;
width: 100%;
- border: 1px solid;
+
+ .echart_map {
+ width: 100%;
+ height: 100%;
+ border: 1px solid;
+ }
}
}
--
Gitblit v1.9.3