浙大科创驾驶舱项目收获整集

1：关于配置自动打包部署上线工具scp2的使用

1. 安装scp

npm install scp2 --save-dev

2. 配置命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "scp": "npm run build && node scp2.js"
  },

3. 创建执行文件scp2.js

/*
 * @Descripttion:执行npm run scp命令执行打包部署命令。即npm run build和部署的脚本
 * @version: 
 * @Author: Rong_hl
 * @Date: 2022-07-22 16:47:20
 * @LastEditors: Rong_hl
 * @LastEditTime: 2022-07-27 10:47:00
 */
const scp = require('scp2');
const ora = require('ora');
const chalk = require('chalk'); //设置命令颜色的
const spinner = ora(chalk.blue('正在部署到服务器...'));  //显示加载

spinner.start();
scp.scp('./dist/', {
    host: '10.99.232.182', // 服务器的地址
    port: 22,            // 服务器端口， 一般为 22
    username: 'root',       // 用户名
    password: 'g9M9w6Rw',     // 密码
    path: '/usr/share/nginx/dist/' //服务器存放文件路径
}, err => {
    if (!err) {
        console.log(chalk.green(`部署完成!`))
    } else {
        console.log(chalk.red(`部署失败!`))
    }
    spinner.stop();
})

4. 打包部署执行

npm run scp

2:关于echartsx轴过多采用动画滚动渲染的形式在数据源变更发生的问题

1. html部分代码

<template>
  <div>
    <button @click="changeData">切换数据</button>
    <div id="main" style="width: 300px;height:300px;" v-if="echartShow"></div>
  </div>
</template>

2. js部分代码

export default {
  name: "FrontEndLearningIndex",

  data() {
    return {
      imgUrl: require('././index.vue'),
      echartShow: true,
      flag: false,
      time: "",
      listx: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"],
      listy: [42, 40, 34, 56, 13, 76, 28, 36, 91, 100, 82, 80, 70, 65, 66, 60, 54, 50],
    };
  },

  mounted() {
    // this.initEcharts(this.listx, this.listy)
    this.changeData()
  },

  methods: {
    initEcharts(listx, listy) {
      let myChart = echarts.init(document.getElementById("main"));
      var SData = listy;
      // 指定图表的配置项和数据
      let option = {
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: listx,
          axisLabel: {
            rotate: 45,
          },
        },
        dataZoom: [//滑动条
          {
            show: false,//是否显示滑动条
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 5  // 一次性展示6个。
          }
        ],
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
           barWidth : 20,//柱图宽度
          data: SData,
          itemStyle: {
            // barBorderRadius: [2, 2, 0, 0], //柱体圆角   
            color: new echarts.graphic.LinearGradient(
              //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
              //通过修改前4个参数，可以实现不同的渐变方向
              /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                每项为一个对象，包含offset和color两个参数
              */
              0, 0, 0, 1, [{//代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: 'rgba(35,240,199,1)'
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: 'rgba(35,240,199,0)'
              }
            ]
            ),
          }
        }]
      };

      // 使用刚指定的配置项和数据显示图表。定时器滚动显示x轴核心代码
      this.time = setInterval(function () {
        // 每次向后滚动一个，最后一个从头开始。
        if (option.dataZoom[0].endValue == SData.length) {
          option.dataZoom[0].endValue = 5;
          option.dataZoom[0].startValue = 0;
        }
        else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }

        option && myChart.setOption(option, true);
      }, 2000);
      myChart.setOption(option)
      myChart.clear()
      // this.initEcharts()
    },
    changeData() {
      this.flag = !this.flag
      this.echartShow = false;
      clearInterval(this.time)
      var listx = [];
      var listy = []
      if (this.flag == true) {
        listx = [
          "中心领导",
          "人力资源部（人才工作办公室）",
          "党群工作部",
          "条件保障部",
          "科研发展部",
          "综合管理部",
          "财务管理部",]
        listy = [
          "12",
          "13",
          "2",
          "16",
          "12",
          "13",
          "15"
        ]
      } 
      this.echartShow = true;
      this.initEcharts(listx, listy)
    }
  },
};
</script>

3：x轴字体过多规定多少个字体后换行

formatter: (params) => {
              let newParamsName = '';
              const paramsNameNumber = params.length;
              const provideNumber = 7; // 一行显示几个字符
              const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (let p = 0; p < rowNumber; p++) {
                  let tempStr = '';
                  const start = p * provideNumber;
                  const end = start + provideNumber;
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + '\n\n';
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              var data = this.data.slice(0, 4);
              var tarValue;
              var v;
              console.log('value', data);
              for (var i = 0; i < data.length; i++) {
                tarValue = data[i].value;
                v = tarValue;
              }
              return `${newParamsName} ${v}个`;
            }

4：对象数组的数组去重

arrDeduplication(data) {
      for (let i = 0; i < data.length - 1; i++) {
        for (let j = i + 1; j < data.length; j++) {
          if (data[i].value == data[j].value) {
            data.splice(j, 1)
            j--;
          }
        }
      }
      return data
    },