1.看板表头背景替换

loulijun2021

2023-03-16 4213b32f88c3a02e9e550b1a5d748cf134b8010b

1.看板表头背景替换

 src/assets/images/index_head.jpg

 src/views/kb/index.vue

@@ -4,7 +4,7 @@
    <div class="kb_body">
      <div class="kb_background" />
      <div class="kb_background2" />
      <div class="kb_head" style="height: 90px">未来工厂分析平台</div>
      <div class="kb_head" style="height: 90px;z-index: 3;letter-spacing: 4px">未来工厂分析平台</div>
      <div class="kb_headerPic" />
      <div class="kb_flex" style="height: 660px">
        <div class="kb_flex_column">
@@ -984,11 +984,12 @@

.kb_headerPic {
  position: absolute;
  top: 39px;
  width: 1808px;
  height: 12px;
  background: url("../../assets/images/kb_headtitle2.png") no-repeat;
  margin-left: 56px;
  top: 0px;
  width: 1885px;
  height: 100px;
  //background: url("../../assets/images/kb_headtitle2.png") no-repeat;
  background: url("../../assets/images/index_head.jpg") no-repeat;
  margin-left: 17.5px;
  z-index: 2;
}


 src/views/kb/index_back.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1045 @@
<template>
  <div>

    <div class="kb_body">
      <div class="kb_background" />
      <div class="kb_background2" />
      <div class="kb_head" style="height: 90px">未来工厂分析平台</div>
      <div class="kb_headerPic" />
      <div class="kb_flex" style="height: 660px">
        <div class="kb_flex_column">
          <div class="kb_block">
            <div id="bar2" style="width: 100%;height: 100%" />
          </div>
          <div class="kb_block">
            <div id="line1" style="width: 100%; height: 100%" />
          </div>
        </div>
        <div>
          <div id="pie1" class="kb_center_block" />
          <div id="area" style="width: 760px;height: 360px" />
          <div class="kb_center_block">
            <div style="display: flex;justify-content: center">
              <div class="kb_center_block_children">
                <div style="font-size: 18px;">129,768</div>
                <div class="box02" />
                <div>周耗能</div>
              </div>
              <div class="kb_center_block_children">
                <div style="font-size: 18px;">228,702</div>
                <div class="box02" />
                <div>月耗能</div>
              </div>
              <div class="kb_center_block_children">
                <div style="font-size: 18px;">337,035</div>
                <div class="box02" />
                <div>季耗能</div>
              </div>

              <!--              <div class="kb_center_block_children">-->
              <!--                <div>{{ value2 }} äº¿ç«‹æ–¹</div>-->
              <!--                <div class="box01" />-->
              <!--                <div>当日总耗气量</div>-->
              <!--                &lt;!&ndash;                <div class="box02" />&ndash;&gt;-->
              <!--              </div>-->
            </div>
          </div>
        </div>
        <div class="kb_flex_column">
          <div class="kb_block">
            <div id="bar3" style="width: 100%;height: 100%" />
          </div>
          <div class="kb_block">
            <!--            <div id="custom1" style="width: 100%;height: 100%" />-->
            <div id="barline1" style="width: 100%;height: 100%" />
          </div>
        </div>
      </div>
      <div class="kb_flex" style="height:330px">
        <div class="kb_block" style="height: 300px;">
          <div id="bar1" style="width: 100%; height: 100%" />
        </div>
        <div class="kb_block" style="height: 300px;width: 740px">
          <div id="bar4" style="height: 100%;width: 100%;" />
        </div>
        <div class="kb_block" style="height: 300px;">
          <div id="pie2" style="height: 100%;width: 50%" />
          <div id="pie3" style="height: 100%;width: 50%;" />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import '@/utils/world'
import { bar1, bar2, bar3, bar4, barline1, line1, loadEcharts, pie1, pie2 } from '@/utils/myEcharts'

export default {
  name: 'Index',
  data() {
    return {
      colorX: '#c7e7ff',
      colorY: '#7696c5',
      value1: 88088,
      value2: 78792
    }
  },
  created() {
    setInterval(() => {
      location.reload()
    }, 1000 * 60 * 60 * 2)
  },
  mounted() {
    // åŠ è½½ä¸–界地图
    this.loadArea()
    //  åŠ è½½æ‰€æœ‰
    this.loadAll()
    // // åŠ è½½å³ä¸­
    // this.loadCustom1()
    // setInterval(() => {
    //   this.loadCustom1()
    // }, 5000)

    setInterval(() => {
      this.value1 = Math.floor(Math.random() * 10000 + 5000)
      this.value2 = Math.floor(Math.random() * 10000 + 5000)
    }, 9000)
  },
  methods: {

    loadAll() {
      // åŠ è½½å¤´éƒ¨é¥¼å›¾
      const pie1data = [
        {
          name: '采购逾期',
          value: 3
        }, {
          name: '进料检验',
          value: 95
        }, {
          name: '当日当成率',
          value: 83
        }, {
          name: '设备OEE',
          value: 91
        }, {
          name: '销售发货',
          value: 100
        }
      ]
      loadEcharts('pie1', pie1(pie1data))

      setInterval(() => {
        // pie1data = [
        //   {
        //     name: '装备制造',
        //     value: Math.floor(Math.random() * 10) + 60
        //   }, {
        //     name: '现代材料',
        //     value: Math.floor(Math.random() * 10) + 60
        //   }, {
        //     name: '新太能源',
        //     value: Math.floor(Math.random() * 20) + 40
        //   }, {
        //     name: '信息技术',
        //     value: Math.floor(Math.random() * 20) + 40
        //   }, {
        //     name: '商贸物流',
        //     value: Math.floor(Math.random() * 20) + 40
        //   }
        // ]
        loadEcharts('pie1', pie1(pie1data))
      }, 20000)

      let bar1data1 = ['92', '90', '96', '98', '99', '97']
      let bar1data2 = ['70', '60', '50', '40', '30']
      //  åŠ è½½å·¦ä¸‹
      loadEcharts('bar1', bar1(bar1data1, bar1data2))
      setInterval(() => {
        // bar1data1 = [1, 2, 3, 4, 5]
        // bar1data2 = [1, 2, 3, 4, 5]
        bar1data1 = [Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92)]
        bar1data2 = [Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70)]
        loadEcharts('bar1', bar1(bar1data1, bar1data2))
      }, 15000)

      //  åŠ è½½å·¦ä¸­
      // let dataY = ['200', '400', '500', '300', '400', '440', '330', '380', '400', '460', '390', '270']
      const dataY = [8101, 6382, 7541, 7279, 5288, 7562, 7163, 7541, 7541, 7000, 6000, 6500]
      const dataY2 = [5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000)]
      const dataY3 = [5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000)]
      const dataY4 = [3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000)]
      const dataY5 = [3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000)]
      loadEcharts('line1', line1(dataY, dataY2, dataY3, dataY4, dataY5))
      setInterval(() => {
        // dataY = [
        //   Math.floor(Math.random() * 100 + 200),
        //   Math.floor(Math.random() * 100 + 400),
        //   Math.floor(Math.random() * 100 + 300),
        //   Math.floor(Math.random() * 100 + 400),
        //   Math.floor(Math.random() * 100 + 300),
        //   Math.floor(Math.random() * 100 + 300),
        //   Math.floor(Math.random() * 100 + 200),
        //   Math.floor(Math.random() * 100 + 400),
        //   Math.floor(Math.random() * 100 + 400),
        //   Math.floor(Math.random() * 100 + 300),
        //   Math.floor(Math.random() * 100 + 200),
        //   Math.floor(Math.random() * 100 + 400)
        // ]
        loadEcharts('line1', line1(dataY, dataY2, dataY3, dataY4, dataY5))
      }, 18000)

      //  åŠ è½½å³ä¸‹
      let scaleData1 = [
        {
          'name': '尺寸',
          'value': 10
        },
        {
          'name': '操作',
          'value': 20
        },
        {
          'name': '颜色',
          'value': 20
        },
        {
          'name': '划伤',
          'value': 27
        },
        {
          'name': '毛刺',
          'value': 23
        }
      ]
      let scaleData2 = [
        {
          'name': '物料',
          'value': 5
        },
        {
          'name': '技术',
          'value': 15
        },
        {
          'name': '品质',
          'value': 20
        },
        {
          'name': '设备',
          'value': 30
        }, {
          'name': '人员',
          'value': 20
        }

      ]
      loadEcharts('pie2', pie2('品质差异比列', scaleData1))
      loadEcharts('pie3', pie2('异常预警比列', scaleData2))

      let a1 = 0
      let a2 = 0
      let a3 = 0
      let a4 = 0
      let a5 = 0
      a1 = Math.floor(Math.random() * 10 + 10)
      a2 = Math.floor(Math.random() * 20 + 10)
      a3 = Math.floor(Math.random() * 20 + 10)
      a4 = Math.floor(Math.random() * 20 + 10)
      a5 = 100 - a1 - a2 - a3 - a4
      let b1 = 0
      let b2 = 0
      let b3 = 0
      let b4 = 0
      let b5 = 0
      b1 = Math.floor(Math.random() * 10 + 10)
      b2 = Math.floor(Math.random() * 20 + 10)
      b3 = Math.floor(Math.random() * 20 + 10)
      b4 = Math.floor(Math.random() * 20 + 10)
      b5 = 100 - b1 - b2 - b3 - b4
      setInterval(() => {
        scaleData1 = [
          {
            'name': '尺寸',
            'value': a1
          },
          {
            'name': '毛刺',
            'value': a2
          },
          {
            'name': '颜色',
            'value': a3
          },
          {
            'name': '划伤',
            'value': a4
          },
          {
            'name': '其它',
            'value': a5
          }
        ]
        scaleData2 = [
          {
            'name': '物料',
            'value': b1
          },
          {
            'name': '技术',
            'value': b2
          },
          {
            'name': '品质',
            'value': b3
          },
          {
            'name': '设备',
            'value': b4
          }, {
            'name': '人员',
            'value': b5
          }
        ]
        loadEcharts('pie2', pie2('品质差异比列', scaleData1))
        loadEcharts('pie3', pie2('异常预警比列', scaleData2))
      }, 17000)

      let list = [500, 400, 300, 200, 100]
      //  åŠ è½½å·¦ä¸Š
      loadEcharts('bar2', bar2(list))
      setInterval(() => {
        list = [Math.floor(Math.random() * 100) + 500, Math.floor(Math.random() * 100) + 400, Math.floor(Math.random() * 100) + 300, Math.floor(Math.random() * 100) + 200, Math.floor(Math.random() * 100) + 100]
        loadEcharts('bar2', bar2(list))
      }, 26000)

      //  åŠ è½½å³ä¸Š
      loadEcharts('bar3', bar3())
      setInterval(() => {
        loadEcharts('bar3', bar3())
      }, 22000)
      //  åŠ è½½ä¸­ä¸‹
      loadEcharts('bar4', bar4())
      setInterval(() => {
        loadEcharts('bar4', bar4())
      }, 16500)

      loadEcharts('barline1', barline1())
      setInterval(() => {
        loadEcharts('barline1', barline1())
      }, 17500)
    },
    // åŠ è½½å³ä¸­ï¼ˆå¼ƒç”¨ï¼‰
    loadCustom1() {
      const list = [
        {
          key: '',
          percent: false,
          value: [
            { value: 200 + Math.random() * 200 },
            { value: 400 + Math.random() * 300 },
            { value: 500 + Math.random() * 200 },
            { value: 600 + Math.random() * 500 },
            { value: 700 + Math.random() * 200 },
            { value: 800 + Math.random() * 100 },
            { value: 200 + Math.random() * 600 },
            { value: 400 + Math.random() * 500 }
            // { value: 500 + Math.random() * 500 },
            // { value: 600 + Math.random() * 200 },
            // { value: 700 + Math.random() * 100 },
            // { value: 800 + Math.random() * 200 }
          ]
        },
        {
          key: 'xxx2',
          percent: false,
          value: [
            { value: 800 + Math.random() * 200 },
            { value: 1000 + Math.random() * 300 },
            { value: 1200 + Math.random() * 200 },
            { value: 1000 + Math.random() * 500 },
            { value: 1200 + Math.random() * 200 },
            { value: 1300 + Math.random() * 100 },
            { value: 800 + Math.random() * 600 },
            { value: 1000 + Math.random() * 500 }
            // { value: 1200 + Math.random() * 500 },
            // { value: 1000 + Math.random() * 200 },
            // { value: 1200 + Math.random() * 100 },
            // { value: 1300 + Math.random() * 200 }
          ]
        },

        {
          key: '率',
          percent: true,
          value: [
            { value: 200 },
            { value: 300 },
            { value: 400 },
            { value: 100 },
            { value: 800 }
          ]
        }
      ]
      const color = ['0,160,231', '26,202,200', '244,213,97', '243,93,94']
      // const xList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      const xList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
      const seriesData = []
      const data1 = ['1月', '1月', '1月', '1月', '1月', '1月', '1月']
      const data2 = ['2月', '2月', '2月', '1月', '1月', '1月', '1月']
      list.forEach((r, i) => {
        if (r.key.indexOf('率') === -1) {
          var o = {
            name: r.key,
            type: r.percent ? 'line' : 'pictorialBar',
            smooth: false,
            yAxisIndex: r.percent ? 1 : 0,
            showSymbol: true,
            showAllSymbol: true,
            barWidth: 25,
            zlevel: 3,
            lineStyle: {
              normal: {
                width: 2,
                color: `rgba(${color[i]})`
              }
            },
            areaStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: `rgba(${color[i]}, 0.0)`// 0% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: `rgba(${color[i]}, 0.0)` // 100% å¤„的颜色
                    }
                  ],
                  globalCoord: false // ç¼ºçœä¸º false
                } // æ¸å˜é¢œè‰²
              }
            },
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: `rgba(${color[i]}, 1)`// 0% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: `rgba(${color[i]}, 0.2)` // 100% å¤„的颜色
                    }
                  ],
                  globalCoord: false // ç¼ºçœä¸º false
                } // æ¸å˜é¢œè‰²
              }
            },
            data: r.value.map(r => r.value)
          }

          seriesData.push(o)
        }
        if (r.key.indexOf('率') !== -1) {
          var o = {
            name: r.key,
            type: r.percent ? 'line' : 'pictorialBar',
            smooth: false,
            yAxisIndex: r.percent ? 1 : 0,
            showSymbol: true,
            showAllSymbol: true,
            barWidth: 35,
            zlevel: 3,
            lineStyle: {
              normal: {
                width: 2,
                color: `rgba(${color[i]})`
              }
            },
            areaStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: `rgba(${color[i]}, 0.0)`// 0% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: `rgba(${color[i]}, 0.0)` // 100% å¤„的颜色
                    }
                  ],
                  globalCoord: false // ç¼ºçœä¸º false
                } // æ¸å˜é¢œè‰²
              }
            },
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: `rgba(${color[i]}, 1)`// 0% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: `rgba(${color[i]}, 0.2)` // 100% å¤„的颜色
                    }
                  ],
                  globalCoord: false // ç¼ºçœä¸º false
                } // æ¸å˜é¢œè‰²
              }
            },
            data: data1
          }
          var o2 = {
            name: r.key,
            type: r.percent ? 'line' : 'pictorialBar',
            smooth: false,
            yAxisIndex: r.percent ? 1 : 0,
            showSymbol: true,
            showAllSymbol: true,
            barWidth: 35,
            zlevel: 3,
            lineStyle: {
              normal: {
                width: 2,
                color: `rgba(${color[i]})`
              }
            },
            areaStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: `rgba(${color[i]}, 0.0)`// 0% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: `rgba(${color[i]}, 0.0)` // 100% å¤„的颜色
                    }
                  ],
                  globalCoord: false // ç¼ºçœä¸º false
                } // æ¸å˜é¢œè‰²
              }
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: 'dotted'
                },
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: `rgba(${color[i]}, 1)`// 0% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: `rgba(${color[i]}, 0.2)` // 100% å¤„的颜色
                    }
                  ],
                  globalCoord: false // ç¼ºçœä¸º false
                } // æ¸å˜é¢œè‰²
              }
            },
            data: data2
          }
          // if (r.percent) {
          //   this.$set(o, 'symbolSize', 6)
          // } else {
          //   this.$set(o, 'symbol', 'path://M0,10 L10,10 L5,0 L0,10 z')
          // }
          seriesData.push(o)
          seriesData.push(o2)
        }
        // if (i === 0) {
        //   xList = r.value.map(r => r.key)
        // }
        if (r.percent) {
          this.$set(o, 'symbolSize', 4)
        } else {
          this.$set(o, 'symbol', 'path://M0,10 L10,10 L5,0 L0,10 z')
        }
      })
      var option = {
        backgroundColor: 'transparent',
        legend: {
          show: false,
          data: list.map(r => r.key),
          top: 0,
          itemHeight: 8,
          itemWidth: 20,
          textStyle: {
            fontSize: 14,
            color: 'F1F1F3'
          },
          right: '1%'
        },
        title: {
          text: '订单完成总数',
          left: '50%',
          top: '5%',
          textAlign: 'center',
          textStyle: {
            // color: '#fff',
            color: '#00ffff',
            fontSize: '20',
            fontWeight: 'bolder'
          }
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '4%',
          top: '15%',
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis', // axis , item
          backgroundColor: 'RGBA(0, 0, 0, 0.3)',
          borderColor: 'rgba(0, 151, 251, 0.6)',
          borderWidth: 1,
          borderRadius: 0,
          textStyle: {
            color: '#BCE9FC',
            fontSize: 14,
            align: 'left'
          },
          formatter: function(params) {
            var res = '' + params[0].name
            var valueMap = new Map()
            for (var i = 0, l = params.length; i < l; i++) {
              if (params[i].value !== '-') {
                valueMap.set(params[i].seriesName, params[i])
              }
            }
            valueMap.forEach((value, key) => {
              res += '<br/>' + value.marker + value.seriesName + ' : ' + value.value
            })
            return res
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              interval: 0,
              formatter: '{value}',
              fontSize: 14,
              margin: 20,
              textStyle: {
                color: this.colorX
              }
            },
            axisLine: {
              lineStyle: {
                color: '#032c58'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#032c58'
              }
            },
            axisTick: {
              show: false
            },
            data: xList
          }
        ],
        yAxis: [
          {
            boundaryGap: false,
            splitNumber: 4,
            type: 'value',
            axisLabel: {
              textStyle: {
                fontSize: 14,
                color: this.colorY
              }
            },
            name: '万（单）',
            nameTextStyle: {
              color: this.colorY,
              fontSize: 14,
              lineHeight: 20
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            boundaryGap: false,
            splitNumber: 4,
            type: 'value',
            axisLabel: {
              textStyle: {
                fontSize: 14,
                color: this.colorY
              }
            },
            nameTextStyle: {
              color: '#fff',
              fontSize: 14,
              lineHeight: 40
            },
            splitLine: {
              lineStyle: {
                color: '#032c58'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#032c58'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: seriesData
      }

      const myChart = echarts.init(document.getElementById('custom1'))

      if (option.textStyle == null) {
        option.textStyle = {
          fontFamily: 'Microsoft YaHei',
          color: '#ffffff'
        }
      }

      // ä½¿ç”¨åˆšæŒ‡å®šçš„配置项和数据显示图表。
      myChart.clear()
      myChart.setOption(option, true)

      window.addEventListener('resize', function() {
        myChart.resize()
      })

      return myChart
    },
    // åŠ è½½åœ°å›¾
    loadArea() {
      // var myChart = echarts.init(document.getElementById(id))

      const mapData = [
        // ä¸œé“主
        // ['Russia', '俄罗斯', '#d6d266'],
        ['China', '中国', '#d6d266'],
        // æ¬§æ´²åŒº
        ['Germany', '德国', '#afb4db'],
        ['France', '法国', '#b7ba6b'],
        ['Spain', '西班牙', '#905a3d'],
        ['Portugal', '葡萄牙', '#f05b72'],
        ['Belgium', '比利时', '#f15b6c'],
        ['United Kingdom', '英格兰', '#5c7a29'],
        ['Iceland', '冰岛', '#b2d235'],
        ['Croatia', '克罗地亚', '#deab8a'],
        ['Switzerland', '瑞士', '#f05b72'],
        ['Sweden', '瑞典', '#fab27b'],
        ['Denmark', '丹麦', '#d71345'],
        ['Serbia', '塞尔维亚', '#694d9f'],
        ['Poland', '波兰', '#b3424a'],
        // äºšæ´²åŒº
        ['Korea', '韩国', '#f8aba6'],
        ['Japan', '日本', '#ca8687'],
        ['Iran', '伊朗', '#b2d235'],
        ['Saudi Arabia', '沙特阿拉伯', '#5c7a29'],
        ['Australia', '澳大利亚', '#bed742'],
        // å—美区
        ['Brazil', '巴西', '#ffd400'],
        ['Argentina', '阿根廷', '#ffce7b'],
        ['Uruguay', '乌拉圭', '#df9464'],
        ['Colombia', '哥伦比亚', '#dea32c'],
        ['Peru', '秘鲁', '#aa2116'],
        // éžæ´²åŒº
        ['Egypt', '埃及', '#840228'],
        ['Tunisia', '突尼斯', '#ed1941'],
        ['Nigeria', '尼日利亚', '#007947'],
        ['Morocco', '摩洛哥', '#73b9a2'],
        ['Senegal', '塞内加尔', '#fcaf17'],
        // ä¸­åŒ—美加勒比海地区
        ['Costa Rica', '哥斯达黎加', '#f3704b'],
        ['Mexico', '墨西哥', '#8552a1'],
        ['Panama', '巴拿马', '#ffce7b']
      ]
      const countrys = function(country, color, name) {
        return {
          name: country,
          value: name,
          itemStyle: {
            borderColor: '#918597',
            areaColor: color
          },

          label: {
            // show: true,
            formatter: function(params) {
              return params.data.value
            },
            color: '#f5f5f5',
            fontSize: 10
          },

          emphasis: {
            itemStyle: {
              areaColor: '#2585a6'
            },
            label: {
              show: true,
              color: '#fff'
            }
          }

        }
      }
      var countryData = []
      for (var i = 0; i < mapData.length; i++) {
        countryData.push(countrys(mapData[i][0], mapData[i][2], mapData[i][1]))
      }

      const option = {
        // backgroundColor: '#898989',
        backgroundColor: 'transparent',
        // title: {
        //   text: '区域销售占比',
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        roam: true,

        tooltip: {
          show: true,
          formatter: function(params) {
            return params.data.value
          },
          borderWidth: 1,
          borderColor: '#fff',
          alwaysShowContent: true
          // triggerOn: 'none',
        },

        series: [{
          type: 'map',
          mapType: 'world',
          itemStyle: {
            areaColor: '#102b6a'
          },
          emphasis: {
            itemStyle: {
              areaColor: '#E8D3E3'
            }
          },
          data: countryData

        }]
      }

      const myChart = echarts.init(document.getElementById('area'))

      if (option.textStyle == null) {
        option.textStyle = {
          fontFamily: 'Microsoft YaHei',
          color: '#ffffff'
        }
      }

      // ä½¿ç”¨åˆšæŒ‡å®šçš„配置项和数据显示图表。
      myChart.clear()
      myChart.setOption(option, true)

      window.addEventListener('resize', function() {
        myChart.resize()
      })

      let n = 0
      setInterval(function() {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          name: mapData[n][0]

        })
        myChart.dispatchAction({
          type: 'mapToggleSelect',
          seriesIndex: 0,
          name: mapData[n][0]
        })
        n++
        if (n === mapData.length) {
          n = 0
        }
      }, 3000)

      return myChart
    }
  }
}
</script>

<style lang="scss" scoped>
$kbBorderColor: rgba(9, 216, 242, 0.4);
.kb_body {
  width: 1920px;
  height: 1080px;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #09d8f2;

}

.kb_background {
  position: absolute;
  bottom: 0;
  width: 1920px;
  height: 887px;
  background: url('../../assets/images/body.jpg') no-repeat;
  //background: url('../../assets/images/body.jpg');
  opacity: 0.4;
  //background: url('../../assets/images/body02.jpg') no-repeat;

}
.kb_background2 {
  position: absolute;
  top: 0;
  width: 1920px;
  height: 887px;
  background: url('../../assets/images/body.jpg') no-repeat;
  //background: url('../../assets/images/body.jpg');
  opacity: 0.4;
  //background: url('../../assets/images/body02.jpg') no-repeat;

}
.kb_flex {
  display: flex;
  justify-content: space-between;

}

.kb_head {
  display: flex;
  justify-content: center;
  line-height: 90px;
  font-size: 40px;
  margin: auto;
  z-index: 2;
  color: #09d8f2;
  letter-spacing: 2px;
  font-weight: bolder;
}

.kb_headerPic {
  position: absolute;
  top: 39px;
  width: 1808px;
  height: 12px;
  background: url("../../assets/images/kb_headtitle2.png") no-repeat;
  margin-left: 56px;
  z-index: 2;
}

.kb_flex_column {
  display: flex;
  flex-direction: column;
}

.kb_block {
  height: 50%;
  //border: 1px solid $kbBorderColor;
  width: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

.kb_center_block {
  height: 20%;
  //border: 1px solid $kbBorderColor;
  width: 740px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  z-index: 2;
}

.kb_center_block_children {
  height: 120px;
  //border: 1px solid $kbBorderColor;
  width: 240px;
  display: flex;
  z-index: 2;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  margin: 10px;

  .box01 {
    background: url("../../assets/images/box01.png") no-repeat;
    width: 169px;
    height: 118px;
    margin-top: -17px;
  }

  .box02 {
    background: url("../../assets/images/box02.png") no-repeat;
    width: 145px;
    height: 84px;
  }
}
</style>