1.综合看板修改

loulijun2021

2022-10-10 fde1edb0a61b411ad236177c7ee6bf94337362a1

 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 {