1.综合看板基本实现

loulijun2021

2022-10-03 248896ac0e9bb76906a270bbc5f83b1c6bd970dd

1.综合看板基本实现

 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",

 src/assets/images/box03.png

 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>

 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

 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() {

}

 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 {