1.工艺路线备份

loulijun2021

2022-09-26 f8f4b4d42f1a6997a6e1a1d329f2296eb37a2a62

 src/views/bbgl/pzyc.vue

@@ -1,8 +1,11 @@
<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div style="margin: 30px auto;width: 1600px;" :style="{height:mainHeight+'px'}">
        <div id="Echarts" style="width: 100%;height: 100%" />
      <div style="margin: 10px auto;width: 1680px;background-color: #fff" :style="{height:mainHeight+'px'}">

        <div style="margin: 20px auto;width: 1600px" :style="{height:(mainHeight-60)+'px'}">
          <div id="Echarts" style="width: 100%;height: 100%" />
        </div>
      </div>
    </div>
  </div>
@@ -50,12 +53,13 @@
          textAlign: 'center',
          textStyle: {
            // color: '#fff',
            color: '#00ffff',
            color: '#000',
            fontSize: '20',
            fontWeight: 'bolder'
          }
        },
        backgroundColor: '#323a5e',
        // backgroundColor: '#323a5e',
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
@@ -69,29 +73,36 @@
          top: '15%',
          containLabel: true
        },
        legend: {
          data: ['1', '2', '3'],
          right: 10,
          top: 12,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        // legend: {
        //   data: ['1', '2', '3'],
        //   right: 10,
        //   top: 12,
        //   textStyle: {
        //     color: '#fff'
        //   },
        //   itemWidth: 12,
        //   itemHeight: 10
        //   // itemGap: 35
        // },
        xAxis: {
          name: '种类',
          nameTextStyle: {
            // color: ,
            color: '#000',
            fontSize: 16,
            lineHeight: 20
          },
          type: 'category',
          data: this.echartsData.map(r => r.name),
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'white'
              color: '#000'
            }
          },
          axisLabel: {
@@ -99,32 +110,47 @@
            rotate: 20,
            textStyle: {
              fontSize: 16,
              color: '#000',
              fontFamily: 'Microsoft YaHei'
            }
          }
        },
        yAxis: {
          name: '数量',
          max: Math.ceil(Math.max(...this.echartsData.map(r => r.cont)) * 1.1), // 取数组里面最大的值乘1.1倍的整数的天花板
          interval: 1,
          nameTextStyle: {
            // color: ,
            color: '#000',
            fontSize: 16,
            lineHeight: 20
          },
          type: 'value',
          // max: '1200',
          axisTick: {
            show: true
          },
          axisLine: {
            show: false,
            show: true,
            lineStyle: {
              color: 'white'
              color: '#000'
            }
          },
          splitLine: {
            show: true,
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
              // color: 'rgba(255,255,255,0.3)'
              color: '#000'
            }
          },
          axisLabel: {}
          axisLabel: {
            // interval: 0,
            // rotate: 20,
            textStyle: {
              fontSize: 16,
              color: '#000',
              fontFamily: 'Microsoft YaHei'
            }
          }
        },
        dataZoom: [{
          show: true,
@@ -138,33 +164,44 @@
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'

            // color: '#d3dee5'
            color: '#000'
          },
          textStyle: {
            color: '#fff'
            color: '#000'
          },
          borderColor: '#90979c'

          // borderColor: '#90979c'
          borderColor: '#000',
          fillerColor: `rgba(42, 197, 137, 0.1)`
        }, {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }],
        }
        ],
        series: [{
          name: '数量',
          type: 'bar',
          barWidth: '15%',
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#000'
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#fccb05'
                // color: '#fccb05'
                color: `rgba(42, 197, 137, 1)`// 0% 处的颜色
              }, {
                offset: 1,
                color: '#f5804d'
                color: `rgba(187, 236, 218, 1)` // 100% 处的颜色
                // color: '#f5804d'
              }]),
              barBorderRadius: 12
            }
@@ -186,7 +223,6 @@
          //         }]),
          //         barBorderRadius: 11,
          //     }

          //   },
          //   data: [400, 500, 500, 500, 500, 400,400, 500, 500]
          // },
@@ -217,30 +253,30 @@

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

      setInterval(function() {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
        app.currentIndex = (app.currentIndex + 1) % dataLen
        // console.log(app.currentIndex);
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
      }, 1000)
      // setInterval(function() {
      //   var dataLen = option.series[0].data.length
      //
      //   // 取消之前高亮的图形
      //   myChart.dispatchAction({
      //     type: 'downplay',
      //     seriesIndex: 0,
      //     dataIndex: app.currentIndex
      //   })
      //   app.currentIndex = (app.currentIndex + 1) % dataLen
      //   // console.log(app.currentIndex);
      //   // 高亮当前图形
      //   myChart.dispatchAction({
      //     type: 'highlight',
      //     seriesIndex: 0,
      //     dataIndex: app.currentIndex
      //   })
      //   // 显示 tooltip
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: app.currentIndex
      //   })
      // }, 1000)

      if (option.textStyle == null) {
        option.textStyle = {