From 248896ac0e9bb76906a270bbc5f83b1c6bd970dd Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期一, 03 十月 2022 17:22:11 +0800
Subject: [PATCH] 1.综合看板基本实现
---
src/assets/images/box03.png | 0
src/icons/svg/zncc.svg | 1
src/utils/echarts-liquidfill.min.js | 2
package.json | 3
src/views/kb/zhkb.vue | 417 +++++++++++++++++-
src/utils/myEcharts.js | 892 ++++++++++++++++++++++++++++++++++++++++
6 files changed, 1,285 insertions(+), 30 deletions(-)
diff --git a/package.json b/package.json
index 348faac..cf2d19c 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"dependencies": {
"axios": "0.18.1",
"core-js": "3.6.5",
+ "echarts-liquidfill": "^3.1.0",
"element-ui": "2.13.2",
"js-cookie": "2.2.0",
"normalize.css": "7.0.0",
@@ -37,7 +38,7 @@
"babel-plugin-dynamic-import-node": "2.3.3",
"chalk": "2.4.2",
"connect": "3.6.6",
- "echarts": "^5.3.3",
+ "echarts": "^5.4.0",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"html-webpack-plugin": "3.2.0",
diff --git a/src/assets/images/box03.png b/src/assets/images/box03.png
new file mode 100644
index 0000000..b4c2af7
--- /dev/null
+++ b/src/assets/images/box03.png
Binary files differ
diff --git a/src/icons/svg/zncc.svg b/src/icons/svg/zncc.svg
new file mode 100644
index 0000000..5f3fb37
--- /dev/null
+++ b/src/icons/svg/zncc.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1664768961489" class="icon" viewBox="0 0 1197 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2688" xmlns:xlink="http://www.w3.org/1999/xlink" width="149.625" height="128"><path d="M246.280708 449.881781h170.542624v170.542624H246.280708zM246.280708 733.835318h170.542624v170.542624H246.280708zM508.677917 733.835318h170.542624v170.542624H508.677917z" fill="#09d8f2" p-id="2689"></path><path d="M169.595391 923.322612h208.391368v-208.391368h-208.391368z m37.889339-170.502029h132.612689v132.612689h-132.612689zM431.965536 923.322612h208.391368v-208.391368h-208.391368z m37.88934-170.502029h132.612688v132.612689h-132.612688zM169.595391 639.369075h208.391368v-208.391368h-208.391368z m37.889339-170.502029h132.612689v132.612689h-132.612689z" fill="#09d8f2" p-id="2690"></path><path d="M1147.005035 705.107079a50.460481 50.460481 0 0 0-46.658016 31.421088h-130.85354l-90.379607 89.824799v-130.095754a50.365758 50.365758 0 1 0 0-54.858351v-124.926566h23.085433L1005.231245 625.174104h61.313071a50.365758 50.365758 0 1 0-4.249019-37.889339H1021.523661l-103.03194-108.701809h-39.377849v-106.902066l67.212982 56.076223 24.249177-29.107132L491.993075 0 0 398.474066l23.84322 29.44543 54.411798-44.05989v640.140394h800.858854V879.817531L985.122831 774.417507h115.224188a50.365758 50.365758 0 1 0 46.658016-69.310428z m-225.712209-48.714865a12.476418 12.476418 0 1 1-12.476419 12.476418 12.503482 12.503482 0 0 1 12.476419-12.517014z m189.446698-67.76779a12.476418 12.476418 0 1 1-12.48995 12.476418 12.48995 12.48995 0 0 1 12.48995-12.517014z m-269.514992-110.041468h-8.673953a56.69869 56.69869 0 1 0 0 37.889339h8.673953v133.384008h-53.22099a50.365758 50.365758 0 1 0 0 37.889339h53.193926v166.374797h-46.83393a50.365758 50.365758 0 1 0 0 37.88934h46.860994v94.100881H116.144358V353.169241l375.51042-304.143142 349.569754 291.179575z m-43.302103 18.944669a18.809351 18.809351 0 1 1-18.795818-18.80935 18.822883 18.822883 0 0 1 18.795818 18.80935z m-44.073421 171.300411a12.476418 12.476418 0 1 1-12.476418-12.476418 12.48995 12.48995 0 0 1 12.476418 12.476418z m6.332933 204.237073a12.48995 12.48995 0 1 1-12.48995-12.476418 12.48995 12.48995 0 0 1 12.48995 12.476418z m386.823094-105.115854a12.476418 12.476418 0 1 1 12.48995-12.476418 12.48995 12.48995 0 0 1-12.48995 12.476418z" fill="#09d8f2" p-id="2691"></path></svg>
\ No newline at end of file
diff --git a/src/utils/echarts-liquidfill.min.js b/src/utils/echarts-liquidfill.min.js
new file mode 100644
index 0000000..8fe33e1
--- /dev/null
+++ b/src/utils/echarts-liquidfill.min.js
@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("echarts")):"function"==typeof define&&define.amd?define(["echarts"],t):"object"==typeof exports?exports["echarts-liquidfill"]=t(require("echarts")):e["echarts-liquidfill"]=t(e.echarts)}(self,(function(e){return(()=>{"use strict";var t={245:(e,t,a)=>{a.r(t);var i=a(83);i.extendSeriesModel({type:"series.liquidFill",optionUpdated:function(){var e=this.option;e.gridSize=Math.max(Math.floor(e.gridSize),4)},getInitialData:function(e,t){var a=i.helper.createDimensions(e.data,{coordDimensions:["value"]}),r=new i.List(a,this);return r.initData(e.data),r},defaultOption:{color:["#294D99","#156ACF","#1598ED","#45BDFF"],center:["50%","50%"],radius:"50%",amplitude:"8%",waveLength:"80%",phase:"auto",period:"auto",direction:"right",shape:"circle",waveAnimation:!0,animationEasing:"linear",animationEasingUpdate:"linear",animationDuration:2e3,animationDurationUpdate:1e3,outline:{show:!0,borderDistance:8,itemStyle:{color:"none",borderColor:"#294D99",borderWidth:8,shadowBlur:20,shadowColor:"rgba(0, 0, 0, 0.25)"}},backgroundStyle:{color:"#E3F7FF"},itemStyle:{opacity:.95,shadowBlur:50,shadowColor:"rgba(0, 0, 0, 0.4)"},label:{show:!0,color:"#294D99",insideColor:"#fff",fontSize:50,fontWeight:"bold",align:"center",baseline:"middle",position:"inside"},emphasis:{itemStyle:{opacity:.8}}}});const r=i.graphic.extendShape({type:"ec-liquid-fill",shape:{waveLength:0,radius:0,radiusY:0,cx:0,cy:0,waterLevel:0,amplitude:0,phase:0,inverse:!1},buildPath:function(e,t){null==t.radiusY&&(t.radiusY=t.radius);for(var a=Math.max(2*Math.ceil(2*t.radius/t.waveLength*4),8);t.phase<2*-Math.PI;)t.phase+=2*Math.PI;for(;t.phase>0;)t.phase-=2*Math.PI;var i=t.phase/Math.PI/2*t.waveLength,r=t.cx-t.radius+i-2*t.radius;e.moveTo(r,t.waterLevel);for(var l=0,o=0;o<a;++o){var s=o%4,h=n(o*t.waveLength/4,s,t.waveLength,t.amplitude);e.bezierCurveTo(h[0][0]+r,-h[0][1]+t.waterLevel,h[1][0]+r,-h[1][1]+t.waterLevel,h[2][0]+r,-h[2][1]+t.waterLevel),o===a-1&&(l=h[2][0])}t.inverse?(e.lineTo(l+r,t.cy-t.radiusY),e.lineTo(r,t.cy-t.radiusY),e.lineTo(r,t.waterLevel)):(e.lineTo(l+r,t.cy+t.radiusY),e.lineTo(r,t.cy+t.radiusY),e.lineTo(r,t.waterLevel)),e.closePath()}});function n(e,t,a,i){return 0===t?[[e+.5*a/Math.PI/2,i/2],[e+.5*a/Math.PI,i],[e+a/4,i]]:1===t?[[e+.5*a/Math.PI/2*(Math.PI-2),i],[e+.5*a/Math.PI/2*(Math.PI-1),i/2],[e+a/4,0]]:2===t?[[e+.5*a/Math.PI/2,-i/2],[e+.5*a/Math.PI,-i],[e+a/4,-i]]:[[e+.5*a/Math.PI/2*(Math.PI-2),-i],[e+.5*a/Math.PI/2*(Math.PI-1),-i/2],[e+a/4,0]]}var l=function(e,t){switch(e){case"center":case"middle":e="50%";break;case"left":case"top":e="0%";break;case"right":case"bottom":e="100%"}return"string"==typeof e?(a=e,a.replace(/^\s+|\s+$/g,"")).match(/%$/)?parseFloat(e)/100*t:parseFloat(e):null==e?NaN:+e;var a};function o(e){return e&&0===e.indexOf("path://")}i.extendChartView({type:"liquidFill",render:function(e,t,a){var n=this,s=this.group;s.removeAll();var h=e.getData(),d=h.getItemModel(0),p=d.get("center"),u=d.get("radius"),c=a.getWidth(),g=a.getHeight(),v=Math.min(c,g),f=0,y=0,m=e.get("outline.show");m&&(f=e.get("outline.borderDistance"),y=l(e.get("outline.itemStyle.borderWidth"),v));var w,b,x,M=l(p[0],c),P=l(p[1],g),I=!1,S=e.get("shape");"container"===S?(I=!0,b=[(w=[c/2,g/2])[0]-y/2,w[1]-y/2],x=[l(f,c),l(f,g)],u=[Math.max(b[0]-x[0],0),Math.max(b[1]-x[1],0)]):(b=(w=l(u,v)/2)-y/2,x=l(f,v),u=Math.max(b-x,0)),m&&(Y().style.lineWidth=y,s.add(Y()));var L=I?0:M-u,C=I?0:P-u,T=null;s.add(function(){var t=E(u);t.setStyle(e.getModel("backgroundStyle").getItemStyle()),t.style.fill=null,t.z2=5;var a=E(u);a.setStyle(e.getModel("backgroundStyle").getItemStyle()),a.style.stroke=null;var r=new i.graphic.Group;return r.add(t),r.add(a),r}());var D=this._data,F=[];function E(e,t){if(S){if(o(S)){var a=i.graphic.makePath(S.slice(7),{}),r=a.getBoundingRect(),n=r.width,l=r.height;n>l?(l*=2*e/n,n=2*e):(n*=2*e/l,l=2*e);var s=t?0:M-n/2,h=t?0:P-l/2;return a=i.graphic.makePath(S.slice(7),{},new i.graphic.BoundingRect(s,h,n,l)),t&&(a.x=-n/2,a.y=-l/2),a}if(I){var d=t?-e[0]:M-e[0],p=t?-e[1]:P-e[1];return i.helper.createSymbol("rect",d,p,2*e[0],2*e[1])}return d=t?-e:M-e,p=t?-e:P-e,"pin"===S?p+=e:"arrow"===S&&(p-=e),i.helper.createSymbol(S,d,p,2*e,2*e)}return new i.graphic.Circle({shape:{cx:t?0:M,cy:t?0:P,r:e}})}function Y(){var t=E(w);return t.style.fill=null,t.setStyle(e.getModel("outline.itemStyle").getItemStyle()),t}function k(t,a,n){var o=I?u[0]:u,s=I?g/2:u,d=h.getItemModel(t),p=d.getModel("itemStyle"),c=d.get("phase"),v=l(d.get("amplitude"),2*s),f=l(d.get("waveLength"),2*o),y=s-h.get("value",t)*s*2;c=n?n.shape.phase:"auto"===c?t*Math.PI/4:c;var m=p.getItemStyle();if(!m.fill){var w=e.get("color"),b=t%w.length;m.fill=w[b]}var x=new r({shape:{waveLength:f,radius:o,radiusY:s,cx:2*o,cy:0,waterLevel:y,amplitude:v,phase:c,inverse:a},style:m,x:M,y:P});x.shape._waterLevel=y;var S=d.getModel("emphasis.itemStyle").getItemStyle();S.lineWidth=0,x.ensureState("emphasis").style=S,i.helper.enableHoverEmphasis(x);var L=E(u,!0);return L.setStyle({fill:"white"}),x.setClipPath(L),x}function q(e,t,a){var i=h.getItemModel(e),r=i.get("period"),n=i.get("direction"),l=h.get("value",e),o=i.get("phase");o=a?a.shape.phase:"auto"===o?e*Math.PI/4:o;var s,d;s="auto"===r?0===(d=h.count())?5e3:5e3*(.2+(d-e)/d*.8):"function"==typeof r?r(l,e):r;var p=0;"right"===n||null==n?p=Math.PI:"left"===n?p=-Math.PI:"none"===n?p=0:console.error("Illegal direction value for liquid fill."),"none"!==n&&i.get("waveAnimation")&&t.animate("shape",!0).when(0,{phase:o}).when(s/2,{phase:p+o}).when(s,{phase:2*p+o}).during((function(){T&&T.dirty(!0)})).start()}h.diff(D).add((function(t){var a=k(t,!1),r=a.shape.waterLevel;a.shape.waterLevel=I?g/2:u,i.graphic.initProps(a,{shape:{waterLevel:r}},e),a.z2=2,q(t,a,null),s.add(a),h.setItemGraphicEl(t,a),F.push(a)})).update((function(t,a){for(var r=D.getItemGraphicEl(a),l=k(t,!1,r),d={},p=["amplitude","cx","cy","phase","radius","radiusY","waterLevel","waveLength"],u=0;u<p.length;++u){var c=p[u];l.shape.hasOwnProperty(c)&&(d[c]=l.shape[c])}var v={},f=["fill","opacity","shadowBlur","shadowColor"];for(u=0;u<f.length;++u)c=f[u],l.style.hasOwnProperty(c)&&(v[c]=l.style[c]);I&&(d.radiusY=g/2),i.graphic.updateProps(r,{shape:d,x:l.x,y:l.y},e),e.isUniversalTransitionEnabled&&e.isUniversalTransitionEnabled()?i.graphic.updateProps(r,{style:v},e):r.useStyle(v);var y=r.getClipPath(),m=l.getClipPath();r.setClipPath(l.getClipPath()),r.shape.inverse=l.inverse,y&&m&&n._shape===S&&!o(S)&&i.graphic.updateProps(m,{shape:y.shape},e,{isFrom:!0}),q(t,r,r),s.add(r),h.setItemGraphicEl(t,r),F.push(r)})).remove((function(e){var t=D.getItemGraphicEl(e);s.remove(t)})).execute(),d.get("label.show")&&s.add(function(t){var a=d.getModel("label");var r,n,l,o={z2:10,shape:{x:L,y:C,width:2*(I?u[0]:u),height:2*(I?u[1]:u)},style:{fill:"transparent"},textConfig:{position:a.get("position")||"inside"},silent:!0},s={style:{text:(r=e.getFormattedLabel(0,"normal"),n=100*h.get("value",0),l=h.getName(0)||e.name,isNaN(n)||(l=n.toFixed(0)+"%"),null==r?l:r),textAlign:a.get("align"),textVerticalAlign:a.get("baseline")}};Object.assign(s.style,i.helper.createTextStyle(a));var p=new i.graphic.Rect(o),c=new i.graphic.Rect(o);c.disableLabelAnimation=!0,p.disableLabelAnimation=!0;var g=new i.graphic.Text(s),v=new i.graphic.Text(s);p.setTextContent(g),c.setTextContent(v);var f=a.get("insideColor");v.style.fill=f;var y=new i.graphic.Group;y.add(p),y.add(c);var m=E(u,!0);return(T=new i.graphic.CompoundPath({shape:{paths:t},x:M,y:P})).setClipPath(m),c.setClipPath(T),y}(F)),this._shape=S,this._data=h},dispose:function(){}})},83:t=>{t.exports=e}},a={};function i(e){if(a[e])return a[e].exports;var r=a[e]={exports:{}};return t[e](r,r.exports,i),r.exports}return i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i(245)})()}));
+//# sourceMappingURL=echarts-liquidfill.min.js.map
\ No newline at end of file
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index b4eb432..79ef19f 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -1,6 +1,6 @@
import * as echarts from 'echarts'
-/**
+/** 255
* 缁熶竴鏍峰紡锛屽姞杞�
* @param {*} id
* @param {*} option
@@ -2832,3 +2832,893 @@
return option
}
+
+export function zhkb08() {
+ const data = [
+ {
+ name: '閽㈡潗鏀瑰埗杞﹂棿',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鍐峰ⅸ杞﹂棿',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鐑ⅸ杞﹂棿',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鐑鐞嗚溅闂�',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '杈惧厠缃楄溅闂�',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '閾搁�犺溅闂�',
+ value: Math.floor(Math.random() * 10 + 90)
+ }
+ ]
+
+ const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#ff00ff']
+
+ const getArrByKey = (data, k) => {
+ const key = k || 'value'
+ const res = []
+ if (data) {
+ data.forEach(function(t) {
+ res.push(t[key])
+ })
+ }
+ return res
+ }
+ const getSymbolData = (data) => {
+ const arr = []
+ for (var i = 0; i < data.length; i++) {
+ arr.push({
+ value: data[i].value,
+ symbolPosition: 'end'
+ })
+ }
+ return arr
+ }
+ // console.log(getSymbolData(data));
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '涔濇湀鑳借�楃敤閲�',
+ x: '44%',
+ y: '0%',
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ }
+ // subtextStyle: {
+ // color: '#90979c',
+ // fontSize: '16'
+ // }
+ },
+ xAxis: {
+ show: false
+ },
+ yAxis: [
+ {
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: getArrByKey(data, 'name'),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ // color: colorY,
+ align: 'left',
+ margin: 30,
+ textStyle: {
+ color: function(value, index) {
+ let temp = ''
+ myColor.forEach((it, ind) => {
+ if (index === ind) {
+ temp = it
+ }
+ })
+ return temp
+ },
+ fontSize: 16,
+ align: 'right'
+ // width: 36
+ }
+ // formatter: function(value, index) {
+ // return '{title|' + value + '}'
+ // },
+ // rich: {
+ // title: {
+ // width: 36,
+ // align: 'right',
+ // fontSize: 16
+ // }
+ // }
+ }
+ },
+ {
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: getArrByKey(data, 'name'),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ shadowOffsetX: '-20px',
+ // color: colorX,
+ color: function(value, index) {
+ let temp = ''
+ myColor.forEach((it, ind) => {
+ if (index === ind) {
+ temp = it
+ }
+ })
+ return temp
+ },
+ align: 'left',
+ verticalAlign: 'center',
+ lineHeight: 40,
+ fontSize: 16,
+ margin: 20,
+ formatter: function(value, index) {
+ // return data[index].value + '%'
+ return data[index].value + '鍚�'
+ }
+
+ }
+ }],
+ series: [
+ {
+ name: 'XXX',
+ type: 'pictorialBar',
+ symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+ symbolSize: [50, 50],
+ symbolOffset: [20, 0],
+ z: 12,
+ itemStyle: {
+ normal: {
+ color: '#fff'
+ }
+ },
+ data: getSymbolData(data)
+ },
+ {
+ name: '鏉�',
+ type: 'bar',
+ showBackground: true,
+ yAxisIndex: 0,
+ data: data,
+ barWidth: 10,
+ // align: left,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ return myColor[params.dataIndex]
+ },
+ barBorderRadius: 10
+ }
+ }
+ // label: {
+ // normal: {
+ // color: '#fff',
+ // show: true,
+ // position: ["-80px", 0],
+ // textStyle: {
+ // fontSize: 16
+ // },
+ // formatter: function(a, b) {
+ // return a.name
+ // }
+ // }
+ // }
+ }]
+ }
+
+ return option
+}
+
+// 鏆傛椂寮冪敤
+export function zhkb092222() {
+ const data = [220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
+ const sideData = data.map(item => item + 4.5)
+
+ const option = {
+
+ backgroundColor: 'transparent',
+ // tooltip: {
+ // trigger: 'axis',
+ // formatter: '{b} : {c}',
+ // axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ // type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ // }
+ // },
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '杩戜竴骞存瘡鏈堣兘鑰椾娇鐢�',
+ x: '40%',
+ y: '0%',
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ }
+ // subtextStyle: {
+ // color: '#90979c',
+ // fontSize: '16'
+ // }
+ },
+ xAxis: {
+ data: ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ // 鍧愭爣杞�
+ axisLine: {
+ lineStyle: {
+ color: '#3eb2e8'
+ }
+ },
+ // 鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: colorX,
+ fontSize: 14
+ }
+ }
+ },
+ yAxis: {
+ // 鍧愭爣杞�
+ axisLine: {
+ show: false
+ },
+ // 鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 14
+ }
+ },
+ // 鍒嗘牸绾�
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
+ }
+ },
+ splitNumber: 3
+ },
+ series: [
+ {
+ name: 'a',
+ tooltip: {
+ show: false
+ },
+ type: 'bar',
+ barWidth: 18,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#0B4EC3' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 0.6,
+ color: '#138CEB' // 60% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#17AAFE' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ data: data,
+ barGap: 0
+ },
+ {
+ type: 'bar',
+ barWidth: 8,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#09337C' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 0.6,
+ color: '#0761C0' // 60% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#0575DE' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ barGap: 0,
+ data: sideData
+ },
+ {
+ name: 'b',
+ tooltip: {
+ show: false
+ },
+ type: 'pictorialBar',
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: '#0571D5',
+ color: '#1779E0'
+ },
+ symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
+ symbolSize: ['30', '6'],
+ symbolOffset: ['0', '-4'],
+ // symbolRotate: -5,
+ symbolPosition: 'end',
+ data: data,
+ z: 3
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb09() {
+ const dataY = [60, 70, 80, 90, 60, 70, 80, 90, 80, 90, 60, 70, 80, 90]
+
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '杩戜竴骞存瘡鏈堣兘鑰椾娇鐢�',
+ x: '40%',
+ y: '0%',
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ }
+ },
+ color: ['#3cefff'],
+ tooltip: {},
+ xAxis: [
+ {
+ type: 'category',
+ data: ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ axisTick: {
+ alignWithLabel: true
+ },
+ nameTextStyle: {
+ color: '#82b0ec'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#82b0ec'
+ }
+ },
+ axisLabel: {
+ margin: 20,
+ textStyle: {
+ // color: '#82b0ec'
+ color: colorX,
+ fontSize: 14
+ }
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 14
+ }
+ // formatter: '{value}%'
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
+ }
+ },
+ axisLine: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ name: '',
+ type: 'pictorialBar',
+ symbolSize: [20, 10],
+ symbolOffset: [0, -5],
+ symbolPosition: 'end',
+ z: 12,
+ label: {
+ normal: {
+ show: false,
+ position: 'top',
+ formatter: '{c}%'
+ }
+ },
+ data: dataY
+ },
+ {
+ name: '',
+ type: 'pictorialBar',
+ symbolSize: [20, 10],
+ symbolOffset: [0, 5],
+ z: 12,
+ data: dataY
+ },
+ {
+ type: 'bar',
+ itemStyle: {
+ normal: {
+ opacity: 0.7
+ }
+ },
+ barWidth: '20',
+ data: dataY
+ // markLine: {
+ // silent: true,
+ // label: {
+ // position: 'middle',
+ // formatter: '{b}',
+ // color: 'red'
+ // },
+ // data: [
+ // {
+ // name: '鐩爣鍊�',
+ // yAxis: 80,
+ // lineStyle: {
+ // color: 'red'
+ // },
+ // itemStyle: {
+ // color: 'red'
+ // },
+ // label: {
+ // position: 'end',
+ // formatter: '{b}\n {c}%'
+ // }
+ // }
+ // ]
+ // }
+ },
+ {
+ type: 'effectScatter',
+ silent: true,
+ tooltip: {
+ show: false
+ },
+ zlevel: 3,
+ symbolSize: 10,
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke',
+ color: '#3cefff',
+ scale: 5
+ },
+ itemStyle: {
+ color: '#3cefff'
+ },
+ hoverAnimation: true,
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+ }
+ ]
+ }
+
+ return option
+}
+
+export function zhkb10() {
+ const _legendColor = '#8FD8FF'
+ const _fontSize = 16
+ const _fontColor = '#8FD8FF'
+ const data1 = [70, 90, 100, 70, 90, 100]
+ const data2 = [80, 60, 80, 50, 90, 60]
+ const option = {
+ backgroundColor: 'transparent',
+ legend: {
+ x: 'right',
+ y: '2%',
+ itemWidth: 10,
+ itemHeight: 10,
+ textStyle: {
+ fontSize: 16,
+ color: 'rgba(255,255,255,.7)'
+ }
+ },
+ grid: {
+ left: '2%',
+ top: '7%',
+ right: '2%',
+ bottom: '0%',
+ containLabel: true
+ },
+ yAxis: {
+ max: Math.ceil(Math.max(...data1) * 1.2),
+ type: 'value',
+ position: 'left',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#4E84AC'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ formatter: '{value}',
+ color: '#00FFFF',
+ fontSize: 14
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ xAxis: {
+ type: 'category',
+ nameTextStyle: {
+ fontSize: 16,
+ color: '#7dd6ea'
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ // margin: 20,
+ textStyle: {
+ color: colorX,
+ fontSize: 16
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#4E84AC'
+ // width: 3
+ }
+ },
+ data: ['涓�鐝�', '浜岀彮', '涓夌彮', '鍥涚彮', '浜旂彮', '鍏彮']
+ },
+ series: [
+ {
+ name: '浜哄憳鍒嗘瀽1',
+ type: 'bar',
+ barWidth: 15,
+ barGap: '30%',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(0,234,255, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,234,255, .1)'
+ }
+ ])
+ }
+ },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // textStyle: {
+ // fontSize: 36,
+ // color: '#00EAFF'
+ // },
+ // formatter: function(params) {
+ // return params.value + '%'
+ // }
+ // },
+ data: data1,
+ z: 10,
+ zlevel: 0
+ },
+ {
+ // 鍒嗛殧
+ type: 'pictorialBar',
+ itemStyle: {
+ normal: {
+ color: '#0F375F'
+ }
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 15,
+ symbol: 'rect',
+ symbolClip: true,
+ symbolSize: [15, 2],
+ symbolPosition: 'start',
+ symbolOffset: [-10, 0],
+ data: data1,
+ width: 2,
+ z: 0,
+ zlevel: 1
+ },
+ {
+ name: '浜哄憳鍒嗘瀽2',
+ type: 'bar',
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(252,160,0, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(252,160,0, .1)'
+ }
+ ])
+ }
+ },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // textStyle: {
+ // fontSize: 16,
+ // color: '#FFA200'
+ // },
+ // formatter: function(params) {
+ // return params.value + '%'
+ // }
+ // },
+ data: data2,
+ z: 10,
+ zlevel: 0
+ },
+ {
+ // 鍒嗛殧
+ type: 'pictorialBar',
+ itemStyle: {
+ normal: {
+ color: '#0F375F'
+ }
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 15,
+ symbol: 'rect',
+ symbolClip: true,
+ symbolSize: [15, 2],
+ symbolPosition: 'start',
+ symbolOffset: [10, 0],
+ data: data2,
+ width: 2,
+ z: 0,
+ zlevel: 1
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb11() {
+ 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: 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: [30, 75, 77, 39, 85],
+ 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: [90, 45, 27, 20, 85],
+ 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
+ }
+ }
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb12() {
+
+}
diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
index 2779003..605cd2f 100644
--- a/src/views/kb/zhkb.vue
+++ b/src/views/kb/zhkb.vue
@@ -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:#fff">鐢熶骇绫诲瀷</div>
+ <div style="color:#fff">鐢熶骇鏁伴噺</div>
+ <div style="color:#fff">瀹屾垚杩涘害</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,55 @@
</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: 50%;">
+ <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:#fff;">鏄ㄦ棩鍏ュ簱鏁伴噺</div>
+ </div>
+ </div>
+ </div>
+ <div style="width: 50%;">
+ <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:#fff;">鏄ㄦ棩鍑哄簱鏁伴噺</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: #fff">鍏ュ簱鍙婃椂鐜�
+ </div>
+
+ <div style="width: 320px;margin-left: 10px;align-items: center" class="kb_block kb_flex_space_between">
+ <div class="kb_flex_column" style="position: relative">
+ <div style="position: absolute;left: 42px;top: 20px">0.01%</div>
+ <div class="box03" />
+ <div style="text-align: center">閫�璐х巼</div>
+ </div>
+ <div class="kb_flex_column" style="position: relative">
+ <div style="position: absolute;left: 42px;top: 20px">0.02%</div>
+ <div class="box03" />
+ <div style="text-align: center">鎹熷潖鐜�</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 +138,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 +179,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 +188,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 +200,21 @@
<script>
import * as echarts from 'echarts'
import '@/utils/world'
-import { loadEcharts, zhkb01, zhkb02, zhkb03, zhkb04, zhkb05, zhkb06, zhkb07 } from '@/utils/myEcharts'
+import {
+ loadEcharts,
+ zhkb01,
+ zhkb02,
+ zhkb03,
+ zhkb04,
+ zhkb05,
+ zhkb06,
+ zhkb07,
+ zhkb08,
+ zhkb09,
+ zhkb10, zhkb11, zhkb12
+} from '@/utils/myEcharts'
+
+import '@/utils/echarts-liquidfill.min.js'
export default {
name: 'Index',
@@ -174,11 +238,14 @@
// setInterval(() => {
// this.getzhkb02()
// }, 10000)
+
+ this.getzhkb12()
+
+ this.getzhkb13()
},
methods: {
getAllEcharts() {
loadEcharts('zhkb01', zhkb01())
- // loadEcharts('zhkb02', zhkb02())
loadEcharts('zhkb03', zhkb03())
loadEcharts('zhkb03_2', zhkb03())
loadEcharts('zhkb04', zhkb04())
@@ -191,6 +258,293 @@
loadEcharts('zhkb07_4', zhkb07())
loadEcharts('zhkb07_5', zhkb07())
loadEcharts('zhkb07_6', zhkb07())
+ loadEcharts('zhkb08', zhkb08())
+ loadEcharts('zhkb09', zhkb09())
+ loadEcharts('zhkb10', zhkb10())
+ loadEcharts('zhkb11', zhkb11())
+ },
+ getzhkb13() {
+ const colorList = ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247', '#00FFFF', '#ff00ff', '#00ff00', '#ffff00', '#ff0000', '#0000ff']
+ const data = [
+ { name: '浜у搧1', value: 100 },
+ { name: '浜у搧2', value: 200 },
+ { name: '浜у搧3', value: 300 },
+ { name: '浜у搧4', value: 400 },
+ { name: '浜у搧5', value: 500 },
+ { name: '浜у搧6', value: 550 },
+ { name: '浜у搧7', value: 570 },
+ { name: '浜у搧8', value: 570 },
+ { name: '浜у搧9', value: 570 },
+ { name: '浜у搧10', value: 570 },
+ { name: '浜у搧11', value: 570 },
+ { name: '浜у搧12', value: 570 }
+ ]
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '20%',
+ containLabel: true
+ },
+ title: {
+ text: '38%',
+ // 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',
+ 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 option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '0%',
+ containLabel: true
+ },
+ title: {
+ text: '85%',
+ x: '36%',
+ y: '40%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 26
+ }
+ },
+ series: [
+ {
+ type: 'liquidFill',
+ radius: '80%',
+ // data: [0.6],
+ data: [0.6, 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
@@ -419,26 +773,26 @@
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: {
@@ -621,7 +975,7 @@
highlightPie()
}
- return myChart
+ // return myChart
}
}
@@ -794,6 +1148,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 +1169,7 @@
font-size: 26px;
margin-left: 5px;
}
+
}
.small_title {
--
Gitblit v1.9.3