From 4213b32f88c3a02e9e550b1a5d748cf134b8010b Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期四, 16 三月 2023 09:24:59 +0800
Subject: [PATCH] 1.看板表头背景替换
---
src/views/kb/index.vue | 13
src/views/kb/index_back.vue | 1045 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/assets/images/index_head.jpg | 0
3 files changed, 1,052 insertions(+), 6 deletions(-)
diff --git a/src/assets/images/index_head.jpg b/src/assets/images/index_head.jpg
new file mode 100644
index 0000000..ca67a02
--- /dev/null
+++ b/src/assets/images/index_head.jpg
Binary files differ
diff --git a/src/views/kb/index.vue b/src/views/kb/index.vue
index fe4eca5..53baeb7 100644
--- a/src/views/kb/index.vue
+++ b/src/views/kb/index.vue
@@ -4,7 +4,7 @@
<div class="kb_body">
<div class="kb_background" />
<div class="kb_background2" />
- <div class="kb_head" style="height: 90px">鏈潵宸ュ巶鍒嗘瀽骞冲彴</div>
+ <div class="kb_head" style="height: 90px;z-index: 3;letter-spacing: 4px">鏈潵宸ュ巶鍒嗘瀽骞冲彴</div>
<div class="kb_headerPic" />
<div class="kb_flex" style="height: 660px">
<div class="kb_flex_column">
@@ -984,11 +984,12 @@
.kb_headerPic {
position: absolute;
- top: 39px;
- width: 1808px;
- height: 12px;
- background: url("../../assets/images/kb_headtitle2.png") no-repeat;
- margin-left: 56px;
+ top: 0px;
+ width: 1885px;
+ height: 100px;
+ //background: url("../../assets/images/kb_headtitle2.png") no-repeat;
+ background: url("../../assets/images/index_head.jpg") no-repeat;
+ margin-left: 17.5px;
z-index: 2;
}
diff --git a/src/views/kb/index_back.vue b/src/views/kb/index_back.vue
new file mode 100644
index 0000000..fe4eca5
--- /dev/null
+++ b/src/views/kb/index_back.vue
@@ -0,0 +1,1045 @@
+<template>
+ <div>
+
+ <div class="kb_body">
+ <div class="kb_background" />
+ <div class="kb_background2" />
+ <div class="kb_head" style="height: 90px">鏈潵宸ュ巶鍒嗘瀽骞冲彴</div>
+ <div class="kb_headerPic" />
+ <div class="kb_flex" style="height: 660px">
+ <div class="kb_flex_column">
+ <div class="kb_block">
+ <div id="bar2" style="width: 100%;height: 100%" />
+ </div>
+ <div class="kb_block">
+ <div id="line1" style="width: 100%; height: 100%" />
+ </div>
+ </div>
+ <div>
+ <div id="pie1" class="kb_center_block" />
+ <div id="area" style="width: 760px;height: 360px" />
+ <div class="kb_center_block">
+ <div style="display: flex;justify-content: center">
+ <div class="kb_center_block_children">
+ <div style="font-size: 18px;">129,768</div>
+ <div class="box02" />
+ <div>鍛ㄨ�楄兘</div>
+ </div>
+ <div class="kb_center_block_children">
+ <div style="font-size: 18px;">228,702</div>
+ <div class="box02" />
+ <div>鏈堣�楄兘</div>
+ </div>
+ <div class="kb_center_block_children">
+ <div style="font-size: 18px;">337,035</div>
+ <div class="box02" />
+ <div>瀛ｈ�楄兘</div>
+ </div>
+
+ <!-- <div class="kb_center_block_children">-->
+ <!-- <div>{{ value2 }} 浜跨珛鏂�</div>-->
+ <!-- <div class="box01" />-->
+ <!-- <div>褰撴棩鎬昏�楁皵閲�</div>-->
+ <!-- <!– <div class="box02" />–>-->
+ <!-- </div>-->
+ </div>
+ </div>
+ </div>
+ <div class="kb_flex_column">
+ <div class="kb_block">
+ <div id="bar3" style="width: 100%;height: 100%" />
+ </div>
+ <div class="kb_block">
+ <!-- <div id="custom1" style="width: 100%;height: 100%" />-->
+ <div id="barline1" style="width: 100%;height: 100%" />
+ </div>
+ </div>
+ </div>
+ <div class="kb_flex" style="height:330px">
+ <div class="kb_block" style="height: 300px;">
+ <div id="bar1" style="width: 100%; height: 100%" />
+ </div>
+ <div class="kb_block" style="height: 300px;width: 740px">
+ <div id="bar4" style="height: 100%;width: 100%;" />
+ </div>
+ <div class="kb_block" style="height: 300px;">
+ <div id="pie2" style="height: 100%;width: 50%" />
+ <div id="pie3" style="height: 100%;width: 50%;" />
+ </div>
+ </div>
+ </div>
+
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import '@/utils/world'
+import { bar1, bar2, bar3, bar4, barline1, line1, loadEcharts, pie1, pie2 } from '@/utils/myEcharts'
+
+export default {
+ name: 'Index',
+ data() {
+ return {
+ colorX: '#c7e7ff',
+ colorY: '#7696c5',
+ value1: 88088,
+ value2: 78792
+ }
+ },
+ created() {
+ setInterval(() => {
+ location.reload()
+ }, 1000 * 60 * 60 * 2)
+ },
+ mounted() {
+ // 鍔犺浇涓栫晫鍦板浘
+ this.loadArea()
+ // 鍔犺浇鎵�鏈�
+ this.loadAll()
+ // // 鍔犺浇鍙充腑
+ // this.loadCustom1()
+ // setInterval(() => {
+ // this.loadCustom1()
+ // }, 5000)
+
+ setInterval(() => {
+ this.value1 = Math.floor(Math.random() * 10000 + 5000)
+ this.value2 = Math.floor(Math.random() * 10000 + 5000)
+ }, 9000)
+ },
+ methods: {
+
+ loadAll() {
+ // 鍔犺浇澶撮儴楗煎浘
+ const pie1data = [
+ {
+ name: '閲囪喘閫炬湡',
+ value: 3
+ }, {
+ name: '杩涙枡妫�楠�',
+ value: 95
+ }, {
+ name: '褰撴棩褰撴垚鐜�',
+ value: 83
+ }, {
+ name: '璁惧OEE',
+ value: 91
+ }, {
+ name: '閿�鍞彂璐�',
+ value: 100
+ }
+ ]
+ loadEcharts('pie1', pie1(pie1data))
+
+ setInterval(() => {
+ // pie1data = [
+ // {
+ // name: '瑁呭鍒堕��',
+ // value: Math.floor(Math.random() * 10) + 60
+ // }, {
+ // name: '鐜颁唬鏉愭枡',
+ // value: Math.floor(Math.random() * 10) + 60
+ // }, {
+ // name: '鏂板お鑳芥簮',
+ // value: Math.floor(Math.random() * 20) + 40
+ // }, {
+ // name: '淇℃伅鎶�鏈�',
+ // value: Math.floor(Math.random() * 20) + 40
+ // }, {
+ // name: '鍟嗚锤鐗╂祦',
+ // value: Math.floor(Math.random() * 20) + 40
+ // }
+ // ]
+ loadEcharts('pie1', pie1(pie1data))
+ }, 20000)
+
+ let bar1data1 = ['92', '90', '96', '98', '99', '97']
+ let bar1data2 = ['70', '60', '50', '40', '30']
+ // 鍔犺浇宸︿笅
+ loadEcharts('bar1', bar1(bar1data1, bar1data2))
+ setInterval(() => {
+ // bar1data1 = [1, 2, 3, 4, 5]
+ // bar1data2 = [1, 2, 3, 4, 5]
+ bar1data1 = [Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92)]
+ bar1data2 = [Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70)]
+ loadEcharts('bar1', bar1(bar1data1, bar1data2))
+ }, 15000)
+
+ // 鍔犺浇宸︿腑
+ // let dataY = ['200', '400', '500', '300', '400', '440', '330', '380', '400', '460', '390', '270']
+ const dataY = [8101, 6382, 7541, 7279, 5288, 7562, 7163, 7541, 7541, 7000, 6000, 6500]
+ const dataY2 = [5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000)]
+ const dataY3 = [5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000)]
+ const dataY4 = [3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000)]
+ const dataY5 = [3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000)]
+ loadEcharts('line1', line1(dataY, dataY2, dataY3, dataY4, dataY5))
+ setInterval(() => {
+ // dataY = [
+ // Math.floor(Math.random() * 100 + 200),
+ // Math.floor(Math.random() * 100 + 400),
+ // Math.floor(Math.random() * 100 + 300),
+ // Math.floor(Math.random() * 100 + 400),
+ // Math.floor(Math.random() * 100 + 300),
+ // Math.floor(Math.random() * 100 + 300),
+ // Math.floor(Math.random() * 100 + 200),
+ // Math.floor(Math.random() * 100 + 400),
+ // Math.floor(Math.random() * 100 + 400),
+ // Math.floor(Math.random() * 100 + 300),
+ // Math.floor(Math.random() * 100 + 200),
+ // Math.floor(Math.random() * 100 + 400)
+ // ]
+ loadEcharts('line1', line1(dataY, dataY2, dataY3, dataY4, dataY5))
+ }, 18000)
+
+ // 鍔犺浇鍙充笅
+ let scaleData1 = [
+ {
+ 'name': '灏哄',
+ 'value': 10
+ },
+ {
+ 'name': '鎿嶄綔',
+ 'value': 20
+ },
+ {
+ 'name': '棰滆壊',
+ 'value': 20
+ },
+ {
+ 'name': '鍒掍激',
+ 'value': 27
+ },
+ {
+ 'name': '姣涘埡',
+ 'value': 23
+ }
+ ]
+ let scaleData2 = [
+ {
+ 'name': '鐗╂枡',
+ 'value': 5
+ },
+ {
+ 'name': '鎶�鏈�',
+ 'value': 15
+ },
+ {
+ 'name': '鍝佽川',
+ 'value': 20
+ },
+ {
+ 'name': '璁惧',
+ 'value': 30
+ }, {
+ 'name': '浜哄憳',
+ 'value': 20
+ }
+
+ ]
+ loadEcharts('pie2', pie2('鍝佽川宸紓姣斿垪', scaleData1))
+ loadEcharts('pie3', pie2('寮傚父棰勮姣斿垪', scaleData2))
+
+ let a1 = 0
+ let a2 = 0
+ let a3 = 0
+ let a4 = 0
+ let a5 = 0
+ a1 = Math.floor(Math.random() * 10 + 10)
+ a2 = Math.floor(Math.random() * 20 + 10)
+ a3 = Math.floor(Math.random() * 20 + 10)
+ a4 = Math.floor(Math.random() * 20 + 10)
+ a5 = 100 - a1 - a2 - a3 - a4
+ let b1 = 0
+ let b2 = 0
+ let b3 = 0
+ let b4 = 0
+ let b5 = 0
+ b1 = Math.floor(Math.random() * 10 + 10)
+ b2 = Math.floor(Math.random() * 20 + 10)
+ b3 = Math.floor(Math.random() * 20 + 10)
+ b4 = Math.floor(Math.random() * 20 + 10)
+ b5 = 100 - b1 - b2 - b3 - b4
+ setInterval(() => {
+ scaleData1 = [
+ {
+ 'name': '灏哄',
+ 'value': a1
+ },
+ {
+ 'name': '姣涘埡',
+ 'value': a2
+ },
+ {
+ 'name': '棰滆壊',
+ 'value': a3
+ },
+ {
+ 'name': '鍒掍激',
+ 'value': a4
+ },
+ {
+ 'name': '鍏跺畠',
+ 'value': a5
+ }
+ ]
+ scaleData2 = [
+ {
+ 'name': '鐗╂枡',
+ 'value': b1
+ },
+ {
+ 'name': '鎶�鏈�',
+ 'value': b2
+ },
+ {
+ 'name': '鍝佽川',
+ 'value': b3
+ },
+ {
+ 'name': '璁惧',
+ 'value': b4
+ }, {
+ 'name': '浜哄憳',
+ 'value': b5
+ }
+ ]
+ loadEcharts('pie2', pie2('鍝佽川宸紓姣斿垪', scaleData1))
+ loadEcharts('pie3', pie2('寮傚父棰勮姣斿垪', scaleData2))
+ }, 17000)
+
+ let list = [500, 400, 300, 200, 100]
+ // 鍔犺浇宸︿笂
+ loadEcharts('bar2', bar2(list))
+ setInterval(() => {
+ list = [Math.floor(Math.random() * 100) + 500, Math.floor(Math.random() * 100) + 400, Math.floor(Math.random() * 100) + 300, Math.floor(Math.random() * 100) + 200, Math.floor(Math.random() * 100) + 100]
+ loadEcharts('bar2', bar2(list))
+ }, 26000)
+
+ // 鍔犺浇鍙充笂
+ loadEcharts('bar3', bar3())
+ setInterval(() => {
+ loadEcharts('bar3', bar3())
+ }, 22000)
+ // 鍔犺浇涓笅
+ loadEcharts('bar4', bar4())
+ setInterval(() => {
+ loadEcharts('bar4', bar4())
+ }, 16500)
+
+ loadEcharts('barline1', barline1())
+ setInterval(() => {
+ loadEcharts('barline1', barline1())
+ }, 17500)
+ },
+ // 鍔犺浇鍙充腑锛堝純鐢級
+ loadCustom1() {
+ const list = [
+ {
+ key: '',
+ percent: false,
+ value: [
+ { value: 200 + Math.random() * 200 },
+ { value: 400 + Math.random() * 300 },
+ { value: 500 + Math.random() * 200 },
+ { value: 600 + Math.random() * 500 },
+ { value: 700 + Math.random() * 200 },
+ { value: 800 + Math.random() * 100 },
+ { value: 200 + Math.random() * 600 },
+ { value: 400 + Math.random() * 500 }
+ // { value: 500 + Math.random() * 500 },
+ // { value: 600 + Math.random() * 200 },
+ // { value: 700 + Math.random() * 100 },
+ // { value: 800 + Math.random() * 200 }
+ ]
+ },
+ {
+ key: 'xxx2',
+ percent: false,
+ value: [
+ { value: 800 + Math.random() * 200 },
+ { value: 1000 + Math.random() * 300 },
+ { value: 1200 + Math.random() * 200 },
+ { value: 1000 + Math.random() * 500 },
+ { value: 1200 + Math.random() * 200 },
+ { value: 1300 + Math.random() * 100 },
+ { value: 800 + Math.random() * 600 },
+ { value: 1000 + Math.random() * 500 }
+ // { value: 1200 + Math.random() * 500 },
+ // { value: 1000 + Math.random() * 200 },
+ // { value: 1200 + Math.random() * 100 },
+ // { value: 1300 + Math.random() * 200 }
+ ]
+ },
+
+ {
+ key: '鐜�',
+ percent: true,
+ value: [
+ { value: 200 },
+ { value: 300 },
+ { value: 400 },
+ { value: 100 },
+ { value: 800 }
+ ]
+ }
+ ]
+ const color = ['0,160,231', '26,202,200', '244,213,97', '243,93,94']
+ // const xList = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
+ const xList = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�']
+ const seriesData = []
+ const data1 = ['1鏈�', '1鏈�', '1鏈�', '1鏈�', '1鏈�', '1鏈�', '1鏈�']
+ const data2 = ['2鏈�', '2鏈�', '2鏈�', '1鏈�', '1鏈�', '1鏈�', '1鏈�']
+ list.forEach((r, i) => {
+ if (r.key.indexOf('鐜�') === -1) {
+ var o = {
+ name: r.key,
+ type: r.percent ? 'line' : 'pictorialBar',
+ smooth: false,
+ yAxisIndex: r.percent ? 1 : 0,
+ showSymbol: true,
+ showAllSymbol: true,
+ barWidth: 25,
+ zlevel: 3,
+ lineStyle: {
+ normal: {
+ width: 2,
+ color: `rgba(${color[i]})`
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: `rgba(${color[i]}, 0.0)`// 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: `rgba(${color[i]}, 0.0)` // 100% 澶勭殑棰滆壊
+ }
+ ],
+ globalCoord: false // 缂虹渷涓� false
+ } // 娓愬彉棰滆壊
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: `rgba(${color[i]}, 1)`// 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: `rgba(${color[i]}, 0.2)` // 100% 澶勭殑棰滆壊
+ }
+ ],
+ globalCoord: false // 缂虹渷涓� false
+ } // 娓愬彉棰滆壊
+ }
+ },
+ data: r.value.map(r => r.value)
+ }
+
+ seriesData.push(o)
+ }
+ if (r.key.indexOf('鐜�') !== -1) {
+ var o = {
+ name: r.key,
+ type: r.percent ? 'line' : 'pictorialBar',
+ smooth: false,
+ yAxisIndex: r.percent ? 1 : 0,
+ showSymbol: true,
+ showAllSymbol: true,
+ barWidth: 35,
+ zlevel: 3,
+ lineStyle: {
+ normal: {
+ width: 2,
+ color: `rgba(${color[i]})`
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: `rgba(${color[i]}, 0.0)`// 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: `rgba(${color[i]}, 0.0)` // 100% 澶勭殑棰滆壊
+ }
+ ],
+ globalCoord: false // 缂虹渷涓� false
+ } // 娓愬彉棰滆壊
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: `rgba(${color[i]}, 1)`// 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: `rgba(${color[i]}, 0.2)` // 100% 澶勭殑棰滆壊
+ }
+ ],
+ globalCoord: false // 缂虹渷涓� false
+ } // 娓愬彉棰滆壊
+ }
+ },
+ data: data1
+ }
+ var o2 = {
+ name: r.key,
+ type: r.percent ? 'line' : 'pictorialBar',
+ smooth: false,
+ yAxisIndex: r.percent ? 1 : 0,
+ showSymbol: true,
+ showAllSymbol: true,
+ barWidth: 35,
+ zlevel: 3,
+ lineStyle: {
+ normal: {
+ width: 2,
+ color: `rgba(${color[i]})`
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: `rgba(${color[i]}, 0.0)`// 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: `rgba(${color[i]}, 0.0)` // 100% 澶勭殑棰滆壊
+ }
+ ],
+ globalCoord: false // 缂虹渷涓� false
+ } // 娓愬彉棰滆壊
+ }
+ },
+ itemStyle: {
+ normal: {
+ lineStyle: {
+ width: 2,
+ type: 'dotted'
+ },
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: `rgba(${color[i]}, 1)`// 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: `rgba(${color[i]}, 0.2)` // 100% 澶勭殑棰滆壊
+ }
+ ],
+ globalCoord: false // 缂虹渷涓� false
+ } // 娓愬彉棰滆壊
+ }
+ },
+ data: data2
+ }
+ // if (r.percent) {
+ // this.$set(o, 'symbolSize', 6)
+ // } else {
+ // this.$set(o, 'symbol', 'path://M0,10 L10,10 L5,0 L0,10 z')
+ // }
+ seriesData.push(o)
+ seriesData.push(o2)
+ }
+ // if (i === 0) {
+ // xList = r.value.map(r => r.key)
+ // }
+ if (r.percent) {
+ this.$set(o, 'symbolSize', 4)
+ } else {
+ this.$set(o, 'symbol', 'path://M0,10 L10,10 L5,0 L0,10 z')
+ }
+ })
+ var option = {
+ backgroundColor: 'transparent',
+ legend: {
+ show: false,
+ data: list.map(r => r.key),
+ top: 0,
+ itemHeight: 8,
+ itemWidth: 20,
+ textStyle: {
+ fontSize: 14,
+ color: 'F1F1F3'
+ },
+ right: '1%'
+ },
+ title: {
+ text: '璁㈠崟瀹屾垚鎬绘暟',
+ left: '50%',
+ top: '5%',
+ textAlign: 'center',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '15%',
+ containLabel: true
+ },
+ tooltip: {
+ show: true,
+ trigger: 'axis', // axis , item
+ backgroundColor: 'RGBA(0, 0, 0, 0.3)',
+ borderColor: 'rgba(0, 151, 251, 0.6)',
+ borderWidth: 1,
+ borderRadius: 0,
+ textStyle: {
+ color: '#BCE9FC',
+ fontSize: 14,
+ align: 'left'
+ },
+ formatter: function(params) {
+ var res = '' + params[0].name
+ var valueMap = new Map()
+ for (var i = 0, l = params.length; i < l; i++) {
+ if (params[i].value !== '-') {
+ valueMap.set(params[i].seriesName, params[i])
+ }
+ }
+ valueMap.forEach((value, key) => {
+ res += '<br/>' + value.marker + value.seriesName + ' : ' + value.value
+ })
+ return res
+ }
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 14,
+ margin: 20,
+ textStyle: {
+ color: this.colorX
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ data: xList
+ }
+ ],
+ yAxis: [
+ {
+ boundaryGap: false,
+ splitNumber: 4,
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ fontSize: 14,
+ color: this.colorY
+ }
+ },
+ name: '涓囷紙鍗曪級',
+ nameTextStyle: {
+ color: this.colorY,
+ fontSize: 14,
+ lineHeight: 20
+ },
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ {
+ boundaryGap: false,
+ splitNumber: 4,
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ fontSize: 14,
+ color: this.colorY
+ }
+ },
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: 14,
+ lineHeight: 40
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ }
+ ],
+ series: seriesData
+ }
+
+ const myChart = echarts.init(document.getElementById('custom1'))
+
+ if (option.textStyle == null) {
+ option.textStyle = {
+ fontFamily: 'Microsoft YaHei',
+ color: '#ffffff'
+ }
+ }
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.clear()
+ myChart.setOption(option, true)
+
+ window.addEventListener('resize', function() {
+ myChart.resize()
+ })
+
+ return myChart
+ },
+ // 鍔犺浇鍦板浘
+ loadArea() {
+ // var myChart = echarts.init(document.getElementById(id))
+
+ const mapData = [
+ // 涓滈亾涓�
+ // ['Russia', '淇勭綏鏂�', '#d6d266'],
+ ['China', '涓浗', '#d6d266'],
+ // 娆ф床鍖�
+ ['Germany', '寰峰浗', '#afb4db'],
+ ['France', '娉曞浗', '#b7ba6b'],
+ ['Spain', '瑗跨彮鐗�', '#905a3d'],
+ ['Portugal', '钁¤悇鐗�', '#f05b72'],
+ ['Belgium', '姣斿埄鏃�', '#f15b6c'],
+ ['United Kingdom', '鑻辨牸鍏�', '#5c7a29'],
+ ['Iceland', '鍐板矝', '#b2d235'],
+ ['Croatia', '鍏嬬綏鍦颁簹', '#deab8a'],
+ ['Switzerland', '鐟炲＋', '#f05b72'],
+ ['Sweden', '鐟炲吀', '#fab27b'],
+ ['Denmark', '涓归害', '#d71345'],
+ ['Serbia', '濉炲皵缁翠簹', '#694d9f'],
+ ['Poland', '娉㈠叞', '#b3424a'],
+ // 浜氭床鍖�
+ ['Korea', '闊╁浗', '#f8aba6'],
+ ['Japan', '鏃ユ湰', '#ca8687'],
+ ['Iran', '浼婃湕', '#b2d235'],
+ ['Saudi Arabia', '娌欑壒闃挎媺浼�', '#5c7a29'],
+ ['Australia', '婢冲ぇ鍒╀簹', '#bed742'],
+ // 鍗楃編鍖�
+ ['Brazil', '宸磋タ', '#ffd400'],
+ ['Argentina', '闃挎牴寤�', '#ffce7b'],
+ ['Uruguay', '涔屾媺鍦�', '#df9464'],
+ ['Colombia', '鍝ヤ鸡姣斾簹', '#dea32c'],
+ ['Peru', '绉橀瞾', '#aa2116'],
+ // 闈炴床鍖�
+ ['Egypt', '鍩冨強', '#840228'],
+ ['Tunisia', '绐佸凹鏂�', '#ed1941'],
+ ['Nigeria', '灏兼棩鍒╀簹', '#007947'],
+ ['Morocco', '鎽╂礇鍝�', '#73b9a2'],
+ ['Senegal', '濉炲唴鍔犲皵', '#fcaf17'],
+ // 涓寳缇庡姞鍕掓瘮娴峰湴鍖�
+ ['Costa Rica', '鍝ユ柉杈鹃粠鍔�', '#f3704b'],
+ ['Mexico', '澧ㄨタ鍝�', '#8552a1'],
+ ['Panama', '宸存嬁椹�', '#ffce7b']
+ ]
+ const countrys = function(country, color, name) {
+ return {
+ name: country,
+ value: name,
+ itemStyle: {
+ borderColor: '#918597',
+ areaColor: color
+ },
+
+ label: {
+ // show: true,
+ formatter: function(params) {
+ return params.data.value
+ },
+ color: '#f5f5f5',
+ fontSize: 10
+ },
+
+ emphasis: {
+ itemStyle: {
+ areaColor: '#2585a6'
+ },
+ label: {
+ show: true,
+ color: '#fff'
+ }
+ }
+
+ }
+ }
+ var countryData = []
+ for (var i = 0; i < mapData.length; i++) {
+ countryData.push(countrys(mapData[i][0], mapData[i][2], mapData[i][1]))
+ }
+
+ const option = {
+ // backgroundColor: '#898989',
+ backgroundColor: 'transparent',
+ // title: {
+ // text: '鍖哄煙閿�鍞崰姣�',
+ // textStyle: {
+ // color: '#fff'
+ // }
+ // },
+ roam: true,
+
+ tooltip: {
+ show: true,
+ formatter: function(params) {
+ return params.data.value
+ },
+ borderWidth: 1,
+ borderColor: '#fff',
+ alwaysShowContent: true
+ // triggerOn: 'none',
+ },
+
+ series: [{
+ type: 'map',
+ mapType: 'world',
+ itemStyle: {
+ areaColor: '#102b6a'
+ },
+ emphasis: {
+ itemStyle: {
+ areaColor: '#E8D3E3'
+ }
+ },
+ data: countryData
+
+ }]
+ }
+
+ const myChart = echarts.init(document.getElementById('area'))
+
+ if (option.textStyle == null) {
+ option.textStyle = {
+ fontFamily: 'Microsoft YaHei',
+ color: '#ffffff'
+ }
+ }
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.clear()
+ myChart.setOption(option, true)
+
+ window.addEventListener('resize', function() {
+ myChart.resize()
+ })
+
+ let n = 0
+ setInterval(function() {
+ myChart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ name: mapData[n][0]
+
+ })
+ myChart.dispatchAction({
+ type: 'mapToggleSelect',
+ seriesIndex: 0,
+ name: mapData[n][0]
+ })
+ n++
+ if (n === mapData.length) {
+ n = 0
+ }
+ }, 3000)
+
+ return myChart
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+$kbBorderColor: rgba(9, 216, 242, 0.4);
+.kb_body {
+ width: 1920px;
+ height: 1080px;
+ background: #000;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ color: #09d8f2;
+
+}
+
+.kb_background {
+ position: absolute;
+ bottom: 0;
+ width: 1920px;
+ height: 887px;
+ background: url('../../assets/images/body.jpg') no-repeat;
+ //background: url('../../assets/images/body.jpg');
+ opacity: 0.4;
+ //background: url('../../assets/images/body02.jpg') no-repeat;
+
+}
+.kb_background2 {
+ position: absolute;
+ top: 0;
+ width: 1920px;
+ height: 887px;
+ background: url('../../assets/images/body.jpg') no-repeat;
+ //background: url('../../assets/images/body.jpg');
+ opacity: 0.4;
+ //background: url('../../assets/images/body02.jpg') no-repeat;
+
+}
+.kb_flex {
+ display: flex;
+ justify-content: space-between;
+
+}
+
+.kb_head {
+ display: flex;
+ justify-content: center;
+ line-height: 90px;
+ font-size: 40px;
+ margin: auto;
+ z-index: 2;
+ color: #09d8f2;
+ letter-spacing: 2px;
+ font-weight: bolder;
+}
+
+.kb_headerPic {
+ position: absolute;
+ top: 39px;
+ width: 1808px;
+ height: 12px;
+ background: url("../../assets/images/kb_headtitle2.png") no-repeat;
+ margin-left: 56px;
+ z-index: 2;
+}
+
+.kb_flex_column {
+ display: flex;
+ flex-direction: column;
+}
+
+.kb_block {
+ height: 50%;
+ //border: 1px solid $kbBorderColor;
+ width: 550px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 10px;
+}
+
+.kb_center_block {
+ height: 20%;
+ //border: 1px solid $kbBorderColor;
+ width: 740px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 10px;
+ z-index: 2;
+}
+
+.kb_center_block_children {
+ height: 120px;
+ //border: 1px solid $kbBorderColor;
+ width: 240px;
+ display: flex;
+ z-index: 2;
+ justify-content: space-around;
+ align-items: center;
+ flex-direction: column;
+ margin: 10px;
+
+ .box01 {
+ background: url("../../assets/images/box01.png") no-repeat;
+ width: 169px;
+ height: 118px;
+ margin-top: -17px;
+ }
+
+ .box02 {
+ background: url("../../assets/images/box02.png") no-repeat;
+ width: 145px;
+ height: 84px;
+ }
+}
+</style>
--
Gitblit v1.9.3