1.看板根据需求进行了修改

loulijun2021

2022-09-16 683dec23954007e97a400fda4cd5006d1eb20041

1.看板根据需求进行了修改

 src/utils/myEcharts.js

@@ -146,7 +146,7 @@
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontWeight: 'lighter'
        fontWeight: 'bolder'
      },
      subtextStyle: {
        color: '#90979c',
@@ -177,7 +177,8 @@
    },
    xAxis: {
      type: 'category',
      data: ['车间一', '车间二', '车间三', '车间四', '车间五'],
      // data: ['车间一', '车间二', '车间三', '车间四', '车间五'],
      data: ['总装车间', '注塑车间', '电机车间', '铝件车间'],
      axisLine: {
        lineStyle: {
          show: true,
@@ -389,7 +390,7 @@
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontWeight: 'lighter'
        fontWeight: 'bolder'
      }
    },
    tooltip: {
@@ -479,7 +480,7 @@
    },
    yAxis:
      {
        name: '亿（元）',
        name: '万元',
        nameTextStyle: {
          color: colorY,
          fontSize: 14,
@@ -677,7 +678,7 @@
      textStyle: {
        color: '#00ffff',
        fontSize: '18',
        fontWeight: 'lighter'
        fontWeight: 'bolder'
      }
    },
    legend: {
@@ -710,7 +711,7 @@
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontWeight: 'lighter'
        fontWeight: 'bolder'
      }
    },
    xAxis: {
@@ -977,7 +978,7 @@
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontWeight: 'lighter'
        fontWeight: 'bolder'
      }
    },
    grid: {
@@ -1099,24 +1100,25 @@

export function bar4() {
  const data = [{
    name: '车间一',
    name: '总装车间',
    value: Math.floor(Math.random() * 10 + 90)
  },
  {
    name: '车间二',
    name: '注塑车间',
    value: Math.floor(Math.random() * 10 + 90)
  },
  {
    name: '车间三',
    name: '电机车间',
    value: Math.floor(Math.random() * 10 + 90)
  },
  {
    name: '车间四',
    value: Math.floor(Math.random() * 10 + 90)
  }, {
    name: '车间五',
    name: '铝件车间',
    value: Math.floor(Math.random() * 10 + 90)
  }
    //   {
    //   name: '车间五',
    //   value: Math.floor(Math.random() * 10 + 90)
    // }
  ]
  const getArrByKey = (data, k) => {
    const key = k || 'value'
@@ -1156,7 +1158,7 @@
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontWeight: 'lighter'
        fontWeight: 'bolder'
      },
      subtextStyle: {
        color: '#90979c',
@@ -1275,3 +1277,189 @@

  return option
}

export function barline1() {
  return {
    backgroundColor: 'transparent',
    tooltip: {},
    title: {
      text: '订单完成总数',
      left: '50%',
      top: '5%',
      textAlign: 'center',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontWeight: 'bolder'
      }
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '4%',
      top: '15%',
      containLabel: true
    },
    legend: {
      show: false,
      itemGap: 50,
      data: ['注册总量', '最新注册量'],
      textStyle: {
        color: '#f9f9f9',
        borderColor: '#fff'
      }
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLabel: {
        interval: 0,
        formatter: '{value}',
        fontSize: 14,
        margin: 20,
        textStyle: {
          color: colorX
        }
      },
      axisLine: {
        lineStyle: {
          color: '#032c58'
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#032c58'
        }
      },
      axisTick: {
        show: false
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
    }],
    yAxis: [
      {
        max: 800,
        boundaryGap: false,
        splitNumber: 4,
        type: 'value',
        axisLabel: {
          textStyle: {
            fontSize: 14,
            color: colorY
          }
        },
        name: '单',
        nameTextStyle: {
          color: colorY,
          fontSize: 14,
          lineHeight: 20
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#032c58'
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#032c58'
          }
        },
        axisTick: {
          show: true
        }
      }
    ],
    series: [
      {
        name: '注册总量',
        type: 'line',
        // smooth: true, //是否平滑曲线显示
        //             symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        lineStyle: {
          normal: {
            color: '#28ffb3' // 线条颜色
          },
          borderColor: '#f0f'
        },
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#fff'
          }
        },
        itemStyle: {
          normal: {
            color: '#28ffb3'

          }
        },
        tooltip: {
          show: false
        },
        areaStyle: { // 区域填充样式
          normal: {
            // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(0,154,120,1)'
            },
            {
              offset: 1,
              color: 'rgba(0,0,0, 0)'
            }
            ], false),
            shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
            shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        // data: [393, 438, 485, 631, 689, 824, 987]
        data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
      }
      //   {
      //   name: '最新注册量',
      //   type: 'bar',
      //   barWidth: 20,
      //   tooltip: {
      //     show: false
      //   },
      //   label: {
      //     show: true,
      //     position: 'top',
      //     textStyle: {
      //       color: '#fff',
      //     }
      //   },
      //   itemStyle: {
      //     normal: {
      //       // barBorderRadius: 5,
      //       // color: new echarts.graphic.LinearGradient(
      //       //     0, 0, 0, 1,
      //       //     [{
      //       //             offset: 0,
      //       //             color: '#14c8d4'
      //       //         },
      //       //         {
      //       //             offset: 1,
      //       //             color: '#43eec6'
      //       //         }
      //       //     ]
      //       // )
      //       color: function (params) {
      //         var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
      //         return colorList[params.dataIndex];
      //       }
      //     }
      //   },
      //   data: [200, 382, 102, 267, 186, 315, 316]
      // }
    ]
  }
}

 src/views/kb/index.vue

@@ -21,17 +21,27 @@
          <div class="kb_center_block">
            <div style="display: flex;justify-content: center">
              <div class="kb_center_block_children">
                <div>{{ value1 }} 亿度</div>
                <!--                <div class="box01" />-->
                <div>43,256</div>
                <div class="box02" />
                <div>当日总耗电量</div>
                <div>周耗能</div>
              </div>
              <div class="kb_center_block_children">
                <div>{{ value2 }} 亿立方</div>
                <div class="box01" />
                <div>当日总耗气量</div>
                <!--                <div class="box02" />-->
                <div>72,234</div>
                <div class="box02" />
                <div>月耗能</div>
              </div>
              <div class="kb_center_block_children">
                <div>122,345</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>
@@ -40,7 +50,8 @@
            <div id="bar3" style="width: 100%;height: 100%" />
          </div>
          <div class="kb_block">
            <div id="custom1" style="width: 100%;height: 100%" />
            <!--            <div id="custom1" style="width: 100%;height: 100%" />-->
            <div id="barline1" style="width: 100%;height: 100%" />
          </div>
        </div>
      </div>
@@ -64,7 +75,7 @@
<script>
import * as echarts from 'echarts'
import '@/utils/world'
import { bar1, bar2, bar3, bar4, line1, loadEcharts, pie1, pie2 } from '@/utils/myEcharts'
import { bar1, bar2, bar3, bar4, barline1, line1, loadEcharts, pie1, pie2 } from '@/utils/myEcharts'

export default {
  name: 'Index',
@@ -81,11 +92,11 @@
    this.loadArea()
    //  加载所有
    this.loadAll()
    // 加载右中
    this.loadCustom1()
    setInterval(() => {
      this.loadCustom1()
    }, 5000)
    // // 加载右中
    // this.loadCustom1()
    // setInterval(() => {
    //   this.loadCustom1()
    // }, 5000)

    setInterval(() => {
      this.value1 = Math.floor(Math.random() * 10000 + 5000)
@@ -96,45 +107,45 @@

    loadAll() {
      // 加载头部饼图
      let pie1data = [
      const pie1data = [
        {
          name: '装备制造',
          value: 54
          name: '采购逾期',
          value: 3
        }, {
          name: '现代材料',
          value: 44
          name: '进料检验',
          value: 95
        }, {
          name: '新太能源',
          value: 35
          name: '当日当成率',
          value: 83
        }, {
          name: '信息技术',
          value: 30
          name: '设备OEE',
          value: 91
        }, {
          name: '商贸物流',
          value: 20
          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
          }
        ]
        // 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))
      }, 10000)

@@ -210,7 +221,7 @@
          'name': '设备',
          'value': 30
        }, {
          'name': '其它',
          'name': '人员',
          'value': 20
        }

@@ -278,7 +289,7 @@
            'name': '设备',
            'value': b4
          }, {
            'name': '其它',
            'name': '人员',
            'value': b5
          }
        ]
@@ -304,8 +315,13 @@
      setInterval(() => {
        loadEcharts('bar4', bar4())
      }, 6500)

      loadEcharts('barline1', barline1())
      setInterval(() => {
        loadEcharts('barline1', barline1())
      }, 7500)
    },
    // 加载右中
    // 加载右中（弃用）
    loadCustom1() {
      const list = [
        {
@@ -596,7 +612,7 @@
            // color: '#fff',
            color: '#00ffff',
            fontSize: '18',
            fontWeight: 'lighter'
            fontWeight: 'bolder'
          }
        },
        grid: {
@@ -632,7 +648,8 @@
            return res
          }
        },
        xAxis: [{
        xAxis: [
          {
          type: 'category',
          boundaryGap: true,
          axisLabel: {
@@ -659,7 +676,8 @@
            show: false
          },
          data: xList
        }],
          }
        ],
        yAxis: [
          {
            boundaryGap: false,
@@ -671,7 +689,7 @@
                color: this.colorY
              }
            },
            name: '亿（单）',
            name: '万（单）',
            nameTextStyle: {
              color: this.colorY,
              fontSize: 14,
@@ -949,6 +967,7 @@
  margin: auto;
  z-index: 2;
  color: #09d8f2;
  letter-spacing: 2px;
}

.kb_headerPic {
@@ -990,7 +1009,7 @@
.kb_center_block_children {
  height: 120px;
  //border: 1px solid $kbBorderColor;
  width: 360px;
  width: 240px;
  display: flex;
  z-index: 2;
  justify-content: space-around;