From fde1edb0a61b411ad236177c7ee6bf94337362a1 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期一, 10 十月 2022 14:31:04 +0800
Subject: [PATCH] 1.综合看板修改
---
src/views/kb/zhkb.vue | 847 +++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 743 insertions(+), 104 deletions(-)
diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
index 2779003..4e47f08 100644
--- a/src/views/kb/zhkb.vue
+++ b/src/views/kb/zhkb.vue
@@ -4,7 +4,7 @@
<div class="kb_body">
<div class="kb_background" />
<div class="kb_background2" />
- <div class="kb_head">鏅鸿兘璁㈠崟鐪嬫澘</div>
+ <div class="kb_head">鏅鸿兘宸ュ巶缁煎悎绠＄悊</div>
<!-- <div class="kb_headerPic" />-->
<div class="kb_headerPic kb_flex_space_between">
<div id="zhkbTop01" style="width: 800px;height:36px;" />
@@ -26,9 +26,9 @@
<div>璁″垝瀹屾垚杩涘害锛堝璐級 30000鍚�</div>
</div>
<div class="kb_flex_space_between" style="padding: 0 15px;height: 20px;">
- <div>鐢熶骇绫诲瀷</div>
- <div>鐢熶骇鏁伴噺</div>
- <div>瀹屾垚杩涘害</div>
+ <div :style="{color:colorX}">鐢熶骇绫诲瀷</div>
+ <div :style="{color:colorX}">鐢熶骇鏁伴噺</div>
+ <div :style="{color:colorX}">瀹屾垚杩涘害</div>
</div>
<div>
<div class="kb_flex_space_between">
@@ -40,12 +40,12 @@
</div>
</div>
<div style="height: 180px;" class="kb_flex_column">
- <div class="small_title">
- <div class="small_bar" />
- <div class="small_content">棰勬湡璁″垝鍘熷洜鍒嗘瀽</div>
- </div>
- <div style="height: 160px;" class="kb_flex_space_between">
- <div id="zhkb02" style="height: 160px;width: 520px;" />
+ <!-- <div class="small_title">-->
+ <!-- <div class="small_bar" />-->
+ <!-- <div class="small_content">棰勬湡璁″垝鍘熷洜鍒嗘瀽</div>-->
+ <!-- </div>-->
+ <div style="height: 180px;" class="kb_flex_space_between">
+ <div id="zhkb02" style="height: 180px;width: 520px;" />
</div>
</div>
</div>
@@ -57,8 +57,57 @@
</div>
<div class="title">浠撳簱绠＄悊</div>
</div>
- <div class="ckgl kb_block horn">
- 123
+ <div class="ckgl kb_block horn kb_flex_column">
+ <div style="height: 60px" class="kb_flex_space_between">
+ <div style="width: 188px">
+ <div class="middle_title">
+ <div class="icon">
+ <svg-icon icon-class="zncc" class="svg_class" />
+ </div>
+ <div style="margin-left: 30px;">
+ <div>8000鍚�</div>
+ <div :style="{color:colorX}">鏄ㄦ棩鍏ュ簱鏁伴噺</div>
+ </div>
+ </div>
+ </div>
+ <div style="width: 324px">
+ <div class="middle_title">
+ <div class="icon">
+ <svg-icon icon-class="zncc" class="svg_class" />
+ </div>
+ <div style="margin-left: 30px;">
+ <div>10000鍚�</div>
+ <div :style="{color:colorX}">鏄ㄦ棩鍑哄簱鏁伴噺</div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div style="height: 190px;position: relative" class="kb_flex_space_between">
+ <div id="zhkb12" style="width: 190px;padding: 0;" class="kb_block" />
+ <div style="position: absolute;bottom: 40px;left: 55px;width: 100px;height: 30px;color: #c7e7ff">鍏ュ簱鍙婃椂鐜�
+ </div>
+
+ <div
+ style="width: 320px;margin-left: 10px;align-items: center;padding: 10px 20px"
+ class="kb_block kb_flex_space_between"
+ >
+ <div class="kb_flex_column" style="position: relative;margin-top: -5px;">
+ <div style="position: absolute;left: 42px;top: 20px">0.01%</div>
+ <div class="box03" />
+ <div style="text-align: center;margin-top: 5px;">閫�璐х巼</div>
+ </div>
+ <div class="kb_flex_column" style="position: relative;margin-top: -5px;">
+ <div style="position: absolute;left: 42px;top: 20px">0.02%</div>
+ <div class="box03" />
+ <div style="text-align: center;margin-top: 5px;">鎹熷潖鐜�</div>
+ </div>
+ </div>
+ </div>
+ <div style="height: 280px;position: relative" class="kb_flex_column">
+ <div style="height: 20px;font-size: 18px;position: absolute;left: 220px;top: 24px">鎴愬搧搴撳瓨缁撴瀯</div>
+ <div id="zhkb13" style="height: 260px;width: 100%;" />
+ </div>
</div>
</div>
</div>
@@ -91,7 +140,10 @@
</div>
<div class="title">杞﹂棿鑰楄兘</div>
</div>
- <div class="cjhn kb_block horn">123</div>
+ <div class="cjhn kb_block horn kb_flex_column">
+ <div id="zhkb08" style="height: 200px;width:100%" />
+ <div id="zhkb09" style="height: 200px;width:100%" />
+ </div>
</div>
</div>
<!-- 鍙宠竟-->
@@ -129,7 +181,7 @@
</div>
<div class="title">浜哄憳鍒嗘瀽</div>
</div>
- <div class="ryfx kb_block horn">123</div>
+ <div id="zhkb10" class="ryfx kb_block horn" />
</div>
<div class="kb_content_right_bottom">
<div class="middle_title">
@@ -138,7 +190,7 @@
</div>
<div class="title">璁惧鍒嗘瀽</div>
</div>
- <div class="sbfx kb_block horn">123</div>
+ <div id="zhkb11" class="sbfx kb_block horn" />
</div>
</div>
</div>
@@ -150,7 +202,20 @@
<script>
import * as echarts from 'echarts'
import '@/utils/world'
-import { loadEcharts, zhkb01, zhkb02, zhkb03, zhkb04, zhkb05, zhkb06, zhkb07 } from '@/utils/myEcharts'
+import {
+ loadEcharts,
+ zhkb01,
+ zhkb03,
+ zhkb04,
+ zhkb05,
+ zhkb06,
+ zhkb07,
+ zhkb08,
+ zhkb09,
+ zhkb10, zhkb11
+} from '@/utils/myEcharts'
+
+import '@/utils/echarts-liquidfill.min.js'
export default {
name: 'Index',
@@ -171,26 +236,580 @@
this.getAllEcharts()
this.getzhkb02()
- // setInterval(() => {
- // this.getzhkb02()
- // }, 10000)
+ setInterval(() => {
+ this.getzhkb02()
+ }, 1000 * 16)
+
+ this.getzhkb12()
+ setInterval(() => {
+ this.getzhkb12()
+ }, 1000 * 11)
+
+ this.getzhkb13()
+ setInterval(() => {
+ this.getzhkb13()
+ }, 1000 * 19)
+
+ // this.getzhkb11()
},
methods: {
+ // 娴嬭瘯鑷姩鎾斁tooltip
+ getzhkb11() {
+ const option = {
+ backgroundColor: 'transparent',
+ // title: {
+ // text: '鏃舵-杩涘嚭娓祦閲�',
+ // left: '5%',
+ // top: '5%',
+ // textStyle: {
+ // color: '#fff',
+ // fontSize: '18px'
+ // }
+ // },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: [
+ {
+ icon: 'react',
+ right: '0%',
+ top: '0%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ },
+ itemGap: 30,
+ itemWidth: 30,
+ itemHeight: 4,
+ data: ['璁惧鍒╃敤鐜�', '璁惧寮�鏈虹巼']
+ }
+ ],
+ grid: {
+ top: '10%',
+ right: '5%',
+ left: '1%',
+ bottom: '0%',
+ containLabel: true
+ },
+ yAxis: [
+ {
+ type: 'category',
+ data: ['鍐烽暒杞﹂棿', '鐑ⅸ杞﹂棿', '杈惧厠缃楄溅闂�', '纾峰寲杞﹂棿', '娉ㄥ杞﹂棿'],
+ axisLine: {
+ lineStyle: {
+ color: '#4E84AC'
+ // width: 2
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ // margin: 10,
+ color: '#09d8f2',
+ textStyle: {
+ fontSize: 16
+ }
+ }
+ }
+ ],
+ xAxis: [
+ {
+ axisLabel: {
+ formatter: '{value}',
+ color: '#6895CA',
+ textStyle: {
+ fontSize: 16,
+ color: this.colorX
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: 2,
+ color: '#4E84AC'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ // 浣跨敤娣辨祬鐨勯棿闅旇壊
+ color: '#184D9A'
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '璁惧鍒╃敤鐜�',
+ type: 'bar',
+ barGap: '70%',
+ data: [Math.ceil(30 + Math.random() * 20), Math.ceil(75 - Math.random() * 20), Math.ceil(77 - Math.random() * 20), Math.ceil(39 + Math.random() * 20), Math.ceil(85 - Math.random() * 20)],
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#00FFFF' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#00FF00' // 100% 澶勭殑棰滆壊
+ }
+ ],
+ global: false // 缂虹渷涓� false
+ },
+ barBorderRadius: [30, 30, 30, 30],
+ shadowColor: 'rgba(0,160,221,1)',
+ shadowBlur: 4
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ // lineHeight: 20,
+ // width: 80,
+ // height: 20,
+ verticalAlign: 'center',
+ borderRadius: 200,
+ position: 'right',
+ color: '#00FF00',
+ fontSize: 16
+ }
+ }
+ },
+ {
+ name: '璁惧寮�鏈虹巼',
+ type: 'bar',
+ data: [Math.ceil(90 - Math.random() * 20), 45 + Math.ceil(Math.random() * 20), Math.ceil(27 + Math.random() * 20), Math.ceil(20 + Math.random() * 60), Math.ceil(85 - Math.random() * 20)],
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#00FFFF' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#FFFF00' // 100% 澶勭殑棰滆壊
+ }
+ ],
+ global: false // 缂虹渷涓� false
+ },
+ barBorderRadius: [30, 30, 30, 30],
+ shadowColor: 'rgba(0,160,221,1)',
+ shadowBlur: 4
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ // lineHeight: 20,
+ // width: 80,
+ // height: 20,
+ borderRadius: 200,
+ verticalAlign: 'center',
+ // position: ['-0', '-20'],
+ position: 'right',
+ color: '#FFFF00',
+ fontSize: 16
+ }
+ }
+ }
+ ]
+ }
+
+ const myChart = echarts.init(document.getElementById('zhkb11'))
+
+ if (option.textStyle == null) {
+ option.textStyle = {
+ fontFamily: 'Microsoft YaHei',
+ color: '#ffffff'
+ }
+ }
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.clear()
+ myChart.setOption(option, true)
+
+ window.addEventListener('resize', function() {
+ myChart.resize()
+ })
+
+ let index = 0
+ setInterval(function() {
+ myChart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: index
+ })
+ index++
+ if (index > 4) {
+ index = 0
+ }
+ }, 2000)
+ },
getAllEcharts() {
loadEcharts('zhkb01', zhkb01())
- // loadEcharts('zhkb02', zhkb02())
- loadEcharts('zhkb03', zhkb03())
- loadEcharts('zhkb03_2', zhkb03())
+ loadEcharts('zhkb03', zhkb03('铻烘瘝鎶曞叆浜у嚭鐜�'))
+ loadEcharts('zhkb03_2', zhkb03('铻烘潌鎶曞叆浜у嚭鐜�'))
loadEcharts('zhkb04', zhkb04())
loadEcharts('zhkb05', zhkb05())
- loadEcharts('zhkb06', zhkb06())
- loadEcharts('zhkb06_2', zhkb06())
- loadEcharts('zhkb07_1', zhkb07())
- loadEcharts('zhkb07_2', zhkb07())
- loadEcharts('zhkb07_3', zhkb07())
- loadEcharts('zhkb07_4', zhkb07())
- loadEcharts('zhkb07_5', zhkb07())
- loadEcharts('zhkb07_6', zhkb07())
+ loadEcharts('zhkb06', zhkb06('妫�楠屽強鏃剁巼'))
+ loadEcharts('zhkb06_2', zhkb06('鎴愬搧鍚堟牸鐜�'))
+ loadEcharts('zhkb07_1', zhkb07('閽㈡潗鏁呴殰', 96))
+ loadEcharts('zhkb07_2', zhkb07('鍐烽暒', 96))
+ loadEcharts('zhkb07_3', zhkb07('鐑ⅸ', 96))
+ loadEcharts('zhkb07_4', zhkb07('鐑鐞�', 95))
+ loadEcharts('zhkb07_5', zhkb07('杈惧厠缃�', 95))
+ loadEcharts('zhkb07_6', zhkb07('闀�閿�', 95))
+ loadEcharts('zhkb08', zhkb08())
+ loadEcharts('zhkb09', zhkb09())
+ loadEcharts('zhkb10', zhkb10())
+ loadEcharts('zhkb11', zhkb11())
+
+ setInterval(() => {
+ loadEcharts('zhkb01', zhkb01())
+ }, 1000 * 10)
+ setInterval(() => {
+ loadEcharts('zhkb03', zhkb03('铻烘瘝鎶曞叆浜у嚭鐜�'))
+ loadEcharts('zhkb03_2', zhkb03('铻烘潌鎶曞叆浜у嚭鐜�'))
+ }, 1000 * 12)
+ setInterval(() => {
+ loadEcharts('zhkb04', zhkb04())
+ }, 1000 * 14)
+ setInterval(() => {
+ loadEcharts('zhkb05', zhkb05())
+ }, 1000 * 16)
+ setInterval(() => {
+ loadEcharts('zhkb06', zhkb06('妫�楠屽強鏃剁巼'))
+ loadEcharts('zhkb06_2', zhkb06('鎴愬搧鍚堟牸鐜�'))
+ }, 1000 * 18)
+ // setInterval(() => {
+ // loadEcharts('zhkb07_1', zhkb07())
+ // loadEcharts('zhkb07_2', zhkb07())
+ // loadEcharts('zhkb07_3', zhkb07())
+ // loadEcharts('zhkb07_4', zhkb07())
+ // loadEcharts('zhkb07_5', zhkb07())
+ // loadEcharts('zhkb07_6', zhkb07())
+ // }, 1000 * 5)
+ setInterval(() => {
+ loadEcharts('zhkb08', zhkb08())
+ }, 1000 * 20)
+ setInterval(() => {
+ loadEcharts('zhkb09', zhkb09())
+ }, 1000 * 22)
+ setInterval(() => {
+ loadEcharts('zhkb10', zhkb10())
+ }, 1000 * 24)
+ setInterval(() => {
+ loadEcharts('zhkb11', zhkb11())
+ }, 1000 * 26)
+ },
+ getzhkb13() {
+ const colorList = ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247', '#00FFFF', '#ff00ff', '#00ff00', '#ffff00', '#ff0000', '#0000ff']
+ const data = [
+ { name: 'LB01 100', value: 100 },
+ { name: 'LB02 200', value: 200 },
+ { name: 'LB03 300', value: 300 },
+ { name: 'LB04 400', value: 400 },
+ { name: 'LB05 500', value: 500 },
+ { name: 'LB06 550', value: 550 },
+ { name: 'LB07 570', value: 570 },
+ { name: 'LB08 570', value: 570 },
+ { name: 'LB09 570', value: 570 },
+ { name: 'LB10 570', value: 570 },
+ { name: 'LB11 570', value: 570 },
+ { name: 'LB12 570', value: 570 }
+ ]
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '20%',
+ containLabel: true
+ },
+ title: {
+ text: 80 + Math.ceil(Math.random() * 10) + '%',
+ // subtext: '3',
+ textStyle: {
+ fontSize: 26,
+ color: '#09d8f2',
+ lineHeight: 20
+ },
+ // subtextStyle: {
+ // fontSize: 28,
+ // color: '#333'
+ // },
+ textAlign: 'center',
+ left: '74%',
+ top: '55%'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ // type: 'scroll',
+ orient: 'vertical',
+ left: '4%',
+ top: '20%',
+ itemGap: 20,
+ selectedMode: false,
+ // icon: 'pin',
+ icon: 'roundRect',
+ data: data.map(r => r.name),
+ textStyle: {
+ color: colorList.map(r => r),
+ fontSize: 16,
+ rich: {
+ uname: {
+ width: 100
+ },
+ unum: {
+ // color: '#4ed139',
+ color: function(value, index) {
+ console.log(value, index)
+ },
+ width: 20,
+ align: 'right'
+ }
+ }
+ }
+ // formatter(name) {
+ // return `{uname|${name}}{unum|5000鍚▆`
+ // }
+ },
+ color: colorList,
+ series: [
+ {
+ // name: 'title',
+ type: 'pie',
+ silent: true,
+ radius: [60, 90],
+ center: ['75%', '60%'],
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ },
+ // itemStyle: {
+ // borderWidth: 3,
+ // borderColor: '#fff'
+ // },
+ data: data
+ }
+ ]
+ }
+ const myChart = echarts.init(document.getElementById('zhkb13'))
+
+ if (option.textStyle == null) {
+ option.textStyle = {
+ fontFamily: 'Microsoft YaHei',
+ color: '#ffffff'
+ }
+ }
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.clear()
+ myChart.setOption(option, true)
+
+ window.addEventListener('resize', function() {
+ myChart.resize()
+ })
+
+ // var index = 0 // 鎾斁鎵�鍦ㄤ笅鏍�
+ // var mTime = setInterval(function() {
+ // myChart.dispatchAction({
+ // type: 'showTip',
+ // seriesIndex: 0,
+ // dataIndex: index
+ // })
+ // index++
+ // if (index > data.length - 1) {
+ // index = 0
+ // }
+ // }, 2000)
+
+ // var currentIndex = -1 // 褰撳墠楂樹寒鍥惧舰鍦ㄩゼ鍥炬暟鎹腑鐨勪笅鏍�
+ // var changePieInterval = setInterval(selectPie, 2000) // 璁剧疆鑷姩鍒囨崲楂樹寒鍥惧舰鐨勫畾鏃跺櫒
+ //
+ // function highlightPie() { // 鍙栨秷鎵�鏈夐珮浜苟楂樹寒褰撳墠鍥惧舰
+ // // 閬嶅巻楗煎浘鏁版嵁锛屽彇娑堟墍鏈夊浘褰㈢殑楂樹寒鏁堟灉
+ // option.series[0].data.forEach((item, index) => {
+ // myChart.dispatchAction({
+ // type: 'downplay',
+ // // type: 'showTip',
+ // seriesIndex: 0,
+ // dataIndex: index
+ // })
+ // })
+ //
+ // // // 楂樹寒褰撳墠鍥惧舰
+ // myChart.dispatchAction({
+ // type: 'highlight',
+ // seriesIndex: 0,
+ // dataIndex: currentIndex
+ // })
+ // }
+ //
+ // myChart.on('mouseover', (params) => { // 鐢ㄦ埛榧犳爣鎮诞鍒版煇涓�鍥惧舰鏃讹紝鍋滄鑷姩鍒囨崲骞堕珮浜紶鏍囨偓娴殑鍥惧舰
+ // clearInterval(changePieInterval)
+ // currentIndex = params.dataIndex
+ // highlightPie()
+ // })
+ //
+ // myChart.on('mouseout', (params) => { // 鐢ㄦ埛榧犳爣绉诲嚭鏃讹紝閲嶆柊寮�濮嬭嚜鍔ㄥ垏鎹�
+ // if (changePieInterval) {
+ // clearInterval(changePieInterval)
+ // }
+ // changePieInterval = setInterval(selectPie, 1000)
+ // })
+ //
+ // function selectPie() { // 楂樹寒鏁堟灉鍒囨崲鍒颁笅涓�涓浘褰�
+ // var dataLen = option.series[0].data.length
+ // currentIndex = (currentIndex + 1) % dataLen
+ // highlightPie()
+ // }
+ },
+ getzhkb12() {
+ const value1 = Math.ceil(Math.random() * 10 + 60)
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '0%',
+ containLabel: true
+ },
+ title: {
+ text: value1 + '%',
+ x: '36%',
+ y: '40%',
+ textStyle: {
+ color: this.colorX,
+ fontSize: 26
+ }
+ },
+ series: [
+ {
+ type: 'liquidFill',
+ radius: '80%',
+ // data: [0.6],
+ data: [value1 / 100, 0.4, 0.2],
+ backgroundStyle: {
+ color: {
+ type: 'radial',
+ x: 0.5,
+ y: 0.5,
+ r: 0.5,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgba(0,24,55, 0)'
+ },
+ {
+ offset: 0.75,
+ color: 'rgba(0,24,55, 0)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(37,237,259, 1)'
+ }],
+ globalCoord: false
+ }
+ },
+ outline: {
+ borderDistance: 0,
+ itemStyle: {
+ borderWidth: 0,
+ borderColor: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(50,115,256, 1)'
+ }, {
+ offset: 0.5,
+ color: 'rgba(50,115,233, .75)'
+ }, {
+ offset: 1,
+ color: 'rgba(50,115,233, 1)'
+ }],
+ globalCoord: false
+ }
+ }
+ },
+ color: ['rgba(9,216,242, .8)', 'rgba(9,216,242, 0.6)', 'rgba(9,216,242, 0.4)'],
+ // color: {
+ // type: 'linear',
+ // x: 0,
+ // y: 0,
+ // x2: 0,
+ // y2: 1
+ // colorStops: [{
+ // offset: 0,
+ // color: 'rgba(37,237,259, 1)'
+ // }, {
+ // offset: 0.5,
+ // color: 'rgba(0,100,259, 0.5)'
+ // }, {
+ // offset: 1,
+ // color: 'darkblue'
+ // }
+ // ]
+ // globalCoord: false
+ // },
+ label: {
+ normal: {
+ formatter: ''
+ }
+ }
+ }
+ ]
+ }
+ const myChart = echarts.init(document.getElementById('zhkb12'))
+
+ if (option.textStyle == null) {
+ option.textStyle = {
+ fontFamily: 'Microsoft YaHei',
+ color: '#ffffff'
+ }
+ }
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.clear()
+ myChart.setOption(option, true)
+
+ window.addEventListener('resize', function() {
+ myChart.resize()
+ })
},
getEchartsHead(id) {
const barWidth = 12
@@ -399,19 +1018,24 @@
},
getzhkb02() {
+ let a, b, c, d
+ a = Math.ceil(Math.random() * 10 + 20)
+ b = Math.ceil(Math.random() * 10 + 20)
+ c = Math.ceil(Math.random() * 10 + 20)
+ d = 100 - a - b - c
const data = [
{
'name': '鐢熶骇宸叉帓婊�',
- 'value': 40
+ 'value': a
}, {
'name': '鐗╂枡涓嶈冻',
- 'value': 10
+ 'value': b
}, {
'name': '鎻掔彮',
- 'value': 20
+ 'value': c
}, {
'name': '鍏跺畠',
- 'value': 30
+ 'value': d
}]
const colorArr = ['#00FFFF', '#FFFF00', '#00FF00', '#FF00FF']
@@ -419,32 +1043,33 @@
color: colorArr,
backgroundColor: 'transparent',
title: {
- show: false,
- text: '鎬绘暟',
- subtext: 7789,
+ show: true,
+ text: '棰勬湡璁″垝鍘熷洜鍒嗘瀽',
+ // subtext: 7789,
textStyle: {
- color: '#f2f2f2',
- fontSize: 40
+ color: '#09d8f2',
+ fontSize: 16
// align: 'center'
},
- subtextStyle: {
- fontSize: 30,
- color: ['#ff9d19']
- },
+ // subtextStyle: {
+ // fontSize: 30,
+ // color: ['#ff9d19']
+ // },
x: 'center',
- y: 'center'
+ y: '2%'
},
grid: {
left: '0%',
right: '4%',
bottom: '4%',
- top: '15%',
+ top: '20%',
containLabel: true
},
legend: {
orient: 'vertical',
- top: 'middle',
+ top: '30%',
left: '5%',
+ selectedMode: false,
textStyle: {
color: colorArr.map(r => r),
fontSize: 16
@@ -455,10 +1080,12 @@
series: [
// 涓昏灞曠ず灞傜殑
{
+
left: 150,
radius: ['40%', '61%'],
- center: ['50%', '50%'],
+ center: ['50%', '60%'],
type: 'pie',
+ silent: true,
label: {
normal: {
show: true,
@@ -486,7 +1113,7 @@
normal: {
show: true,
length: 30,
- length2: 55
+ length2: 30
},
emphasis: {
show: true
@@ -500,8 +1127,9 @@
{
left: 150,
radius: ['30%', '34%'],
- center: ['50%', '50%'],
+ center: ['50%', '60%'],
type: 'pie',
+ silent: true,
label: {
normal: {
show: false
@@ -529,13 +1157,15 @@
color: '#09d8f2'
}
}]
- }, {
+ },
+ {
left: 150,
name: '澶栬竟妗�',
type: 'pie',
+ silent: true,
clockWise: false, // 椤烘椂鍔犺浇
hoverAnimation: false, // 榧犳爣绉诲叆鍙樺ぇ
- center: ['50%', '50%'],
+ center: ['50%', '60%'],
radius: ['65%', '65%'],
label: {
normal: {
@@ -573,55 +1203,55 @@
myChart.resize()
})
- let currentIndex = -1 // 褰撳墠楂樹寒鍥惧舰鍦ㄩゼ鍥炬暟鎹腑鐨勪笅鏍�
- let changePieInterval = setInterval(selectPie, 2000) // 璁剧疆鑷姩鍒囨崲楂樹寒鍥惧舰鐨勫畾鏃跺櫒
+ // let currentIndex = -1 // 褰撳墠楂樹寒鍥惧舰鍦ㄩゼ鍥炬暟鎹腑鐨勪笅鏍�
+ // var changePieInterval = setInterval(selectPie, 2000) // 璁剧疆鑷姩鍒囨崲楂樹寒鍥惧舰鐨勫畾鏃跺櫒
+ //
+ // function highlightPie() { // 鍙栨秷鎵�鏈夐珮浜苟楂樹寒褰撳墠鍥惧舰
+ // // for (var idx in option.series[0].data) {
+ // // // 閬嶅巻楗煎浘鏁版嵁锛屽彇娑堟墍鏈夊浘褰㈢殑楂樹寒鏁堟灉
+ // // myChart.dispatchAction({
+ // // type: 'downplay',
+ // // seriesIndex: 0,
+ // // dataIndex: idx
+ // // })
+ // // }
+ // // 閬嶅巻楗煎浘鏁版嵁锛屽彇娑堟墍鏈夊浘褰㈢殑楂樹寒鏁堟灉
+ // option.series[0].data.forEach((item, index) => {
+ // myChart.dispatchAction({
+ // type: 'downplay',
+ // seriesIndex: 0,
+ // dataIndex: index
+ // })
+ // })
+ //
+ // // 楂樹寒褰撳墠鍥惧舰
+ // myChart.dispatchAction({
+ // type: 'highlight',
+ // seriesIndex: 0,
+ // dataIndex: currentIndex
+ // })
+ // }
+ //
+ // myChart.on('mouseover', (params) => { // 鐢ㄦ埛榧犳爣鎮诞鍒版煇涓�鍥惧舰鏃讹紝鍋滄鑷姩鍒囨崲骞堕珮浜紶鏍囨偓娴殑鍥惧舰
+ // clearInterval(changePieInterval)
+ // currentIndex = params.dataIndex
+ // highlightPie()
+ // })
+ //
+ // myChart.on('mouseout', (params) => { // 鐢ㄦ埛榧犳爣绉诲嚭鏃讹紝閲嶆柊寮�濮嬭嚜鍔ㄥ垏鎹�
+ // if (changePieInterval) {
+ // clearInterval(changePieInterval)
+ // }
+ // changePieInterval = setInterval(selectPie, 1000)
+ // })
+ //
+ // function selectPie() { // 楂樹寒鏁堟灉鍒囨崲鍒颁笅涓�涓浘褰�
+ // var dataLen = option.series[0].data.length
+ // currentIndex = (currentIndex + 1) % dataLen
+ // highlightPie()
+ // }
- function highlightPie() { // 鍙栨秷鎵�鏈夐珮浜苟楂樹寒褰撳墠鍥惧舰
- // for (var idx in option.series[0].data) {
- // // 閬嶅巻楗煎浘鏁版嵁锛屽彇娑堟墍鏈夊浘褰㈢殑楂樹寒鏁堟灉
- // myChart.dispatchAction({
- // type: 'downplay',
- // seriesIndex: 0,
- // dataIndex: idx
- // })
- // }
- // 閬嶅巻楗煎浘鏁版嵁锛屽彇娑堟墍鏈夊浘褰㈢殑楂樹寒鏁堟灉
- option.series[0].data.forEach((item, index) => {
- myChart.dispatchAction({
- type: 'downplay',
- seriesIndex: 0,
- dataIndex: index
- })
- })
-
- // 楂樹寒褰撳墠鍥惧舰
- myChart.dispatchAction({
- type: 'highlight',
- seriesIndex: 0,
- dataIndex: currentIndex
- })
- }
-
- myChart.on('mouseover', (params) => { // 鐢ㄦ埛榧犳爣鎮诞鍒版煇涓�鍥惧舰鏃讹紝鍋滄鑷姩鍒囨崲骞堕珮浜紶鏍囨偓娴殑鍥惧舰
- clearInterval(changePieInterval)
- currentIndex = params.dataIndex
- highlightPie()
- })
-
- myChart.on('mouseout', (params) => { // 鐢ㄦ埛榧犳爣绉诲嚭鏃讹紝閲嶆柊寮�濮嬭嚜鍔ㄥ垏鎹�
- if (changePieInterval) {
- clearInterval(changePieInterval)
- }
- changePieInterval = setInterval(selectPie, 1000)
- })
-
- function selectPie() { // 楂樹寒鏁堟灉鍒囨崲鍒颁笅涓�涓浘褰�
- var dataLen = option.series[0].data.length
- currentIndex = (currentIndex + 1) % dataLen
- highlightPie()
- }
-
- return myChart
+ // return myChart
}
}
@@ -640,7 +1270,8 @@
flex-direction: column;
//color: #09d8f2;
color: $color01;
- //background-color: 'transparent';
+ //background: repeating-radial-gradient(circle, #000000, #444444 100%, #666666 100%);
+
}
.kb_background {
@@ -649,8 +1280,8 @@
width: 1920px;
height: 887px;
background: url('../../assets/images/body.jpg') no-repeat;
- z-index: -1;
- //opacity: 0.9;
+ //z-index: -1;
+ //opacity: 0.4;
}
.kb_background2 {
@@ -659,8 +1290,8 @@
width: 1920px;
height: 887px;
background: url('../../assets/images/body.jpg') no-repeat;
- z-index: -1;
- //opacity: 0.9;
+ //z-index: -1;
+ //opacity: 0.4;
}
.kb_flex {
@@ -704,6 +1335,7 @@
display: flex;
//padding: 20px;
padding: 0 20px 20px 20px;
+ z-index: 2;
}
.kb_content_left {
@@ -794,6 +1426,12 @@
//background-color: rgba(0,255,255,1);
}
+.box03 {
+ width: 124px;
+ height: 139px;
+ background: url("../../assets/images/box03.png");
+}
+
.middle_title {
display: flex;
align-items: flex-end;
@@ -809,6 +1447,7 @@
font-size: 26px;
margin-left: 5px;
}
+
}
.small_title {
--
Gitblit v1.9.3