1、echars图表效果

折线图流动效果

实现思路：折线图的流动效果使用了echars中的lines路径图来实现

实现代码如下：只需要在series中配置lines就可以了，调用下面这个函数传第三个参数

    linesFun(name, datacoords, color) {
      return {
        showSymbol: false,
        type: "lines",
        name,
        polyline: true,
        smooth: false,
        coordinateSystem: "cartesian2d",
        zlevel: 1,
        largeThreshold: 2000,
        effect: {
          show: true,
          smooth: true,
          period: 10,
          symbolSize: 8,
          trailLength: 0.3,
          symbol: "circle",
          color,
        },
        lineStyle: {
          color: "#fff",
          width: 1,
          opacity: 0,
          curveness: 0,
          cap: "round",
        },
        data: datacoords,
      };
    },

• 第一个参数（name）：字符串类型，折线图名字

• 第二个参数（datacoords）：是一个数组，数组对象 ，[ coords:{[ 横坐标 ，数据]} ]

​
// values1为数据，其格式为一个数组，存放每个点的值
values1.forEach((item, index) => {
  datacoords[0].coords.push([dates[index], item]);
});
​

• 第三个参数（color）：流动圆点的颜色，样式自行根据官方文档进行配置

饼形图轮询旋转效果

鼠标浮入会暂停轮询，移除会继续进行轮询

实现思路：

• 使用了饼图实例的dispatchAction方法，实现饼图高亮轮询；
• 使用了饼图实例的on事件对饼图添加鼠标移动事件on ，具体还有点击事件等等.....

使用方法：在mountd()函数里调用这个方法就可以了

  mounted() {
    this.handleChartLoop(this.options,this.charts,this.options1,this.charts1);
  },

   // 此方法为两个饼图的饼图轮询，可按需使用
handleChartLoop(option, myChart, option2, myChart2) {//饼图轮播
      if (!myChart) {
        return
      }
      let currentIndex = -1 // 当前高亮图形在饼图数据中的下标
      let changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器
​
      // 取消所有高亮并高亮当前图形
      function highlightPie() {
        // 遍历饼图数据，取消所有图形的高亮效果
        for (var idx in option.series[0].data) {
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: idx
          })
        }
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
​
        for (var idx in option2.series[0].data) {
          myChart2.dispatchAction({
            type: 'downplay',
            seriesIndex: 0, //series的第一个对象，也就是第一个饼图
            dataIndex: idx
          })
        }
        // 高亮当前图形
        myChart2.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }
​
      // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
      myChart.on('mouseover', (params) => {
        clearInterval(changePieInterval)
        currentIndex = params.dataIndex
        highlightPie()
      })
      myChart2.on('mouseover', (params) => {
        clearInterval(changePieInterval)
        currentIndex = params.dataIndex
        highlightPie()
      })
​
      // 用户鼠标移出时，重新开始自动切换
      myChart.on('mouseout', (params) => {
        if (changePieInterval) {
          clearInterval(changePieInterval)
        }
        changePieInterval = setInterval(selectPie, 2000)
      })
      myChart2.on('mouseout', (params) => {
        if (changePieInterval) {
          clearInterval(changePieInterval)
        }
        changePieInterval = setInterval(selectPie, 2000)
      })
​
      // 高亮效果切换到下一个图形
      function selectPie() {
        var dataLen = option.series[0].data.length
        currentIndex = (currentIndex + 1) % dataLen
        highlightPie()
      }
    },

这类嵌套的饼图轮询只需在方法中将seriesIndex改为series数组里对应的索引即可

2、表格穿梭（基于element的二次封装）

1、效果预览

表格穿梭案例(暂未封装组件，使用的mockjs模拟的数据)

            <el-row>
                <el-col :span="11">
                    <div class="tableTitle">
                        <span style="font-size: 18px; color: #000; font-weight: 700;">左侧</span>
                        <span>{{ staffCheckNum }}/{{ staffNum }}</span>
                    </div>
                    <!-- :key="tableKey" -->
                    <el-table ref="staffTable" :stripe="true" :data="staffList" max-height="345" :row-key="getRowKey" border
                        fit highlight-current-row @selection-change="handleStaffChange"
                        :header-cell-style="tableHeaderColor">
                        <el-table-column type="index" width="50" align="center" />
                        <el-table-column type="selection" :reserve-selection="true" width="55"
                            align="center"></el-table-column>
                        <el-table-column label="编码" align="center">
                            <template slot-scope="{ row }">
                                <span>{{ row.code }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="名称" align="center">
                            <template slot-scope="{ row }">
                                <span>{{ row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="类型" align="center">
                            <template slot-scope="{ row }">
                                <span>{{ row.type }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="分数" align="center">
                            <template slot-scope="{ row }">
                                <span>{{ row.power }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="2" align="center" class="buttonAll"
                    style="display: flex;flex-direction: column;align-items: center;">
                    <el-button @click="addStaff('single')" type="primary" size="mini" :disabled="!staffData.length"
                        class="staffButton">
                        加入右侧
                        <i class="el-icon-arrow-right"></i>
                    </el-button>
                    <el-button @click="removeStaff('single')" type="primary" size="mini"
                        :disabled="!selectedStaffData.length" class="staffButton">
                        <i class="el-icon-arrow-left"></i>
                        加入左侧
                    </el-button>
                </el-col>
                <el-col :span="11">
                    <div class="tableTitle">
                        <span style="font-size: 18px; color: #000; font-weight: 700;">右侧</span>
                        <span>{{ selectedStaffCheckNum }}/{{ selectedStaffNum }}</span>
                    </div>
                    <el-table ref="selectedStaffTable" :stripe="true" :data="selectedStaffList" max-height="345"
                        :row-key="getRowKey" border fit highlight-current-row @selection-change="handleSelectedStaffChange"
                        :header-cell-style="tableHeaderColor">
                        <el-table-column type="index" width="50" align="center" />
                        <el-table-column type="selection" :reserve-selection="true" width="55"
                            align="center"></el-table-column>
                        <el-table-column label="编码" align="center">
                            <template slot-scope="{ row }">
                                <span>{{ row.code }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="名称" align="center">
                            <template slot-scope="{ row }">
                                <span>{{ row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="类型" align="center">
                            <template slot-scope="{ row }">
                                <span>{{ row.type }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="分数" align="center">
                            <template slot-scope="{ row }">
                                <span>{{ row.power }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
                    


export default {
data() {
return {
StakeForm: {
stationId: ''
},
// 左边列表
staffList: \[],
// 右边列表
selectedStaffList: \[],
// 左侧选中列表
staffData: \[],
// 右侧选中列表
selectedStaffData: \[],
// 左侧总数
staffNum: 0,
// 左侧选中数量
staffCheckNum: 0,
// 右侧总数
selectedStaffNum: 0,
// 右侧选中数量
selectedStaffCheckNum: 0,\
}
},
mounted() {
this.getTabelTransfer()
},
computed: {

    },
    methods: {
        getTabelTransfer() {
            let obj = {
                stationId: this.StakeForm.stationId,
            }
            getTabelTransfer(obj).then(res => {
                console.log(res, "穿梭框数据");
                this.staffList = res.data.left
                this.staffNum = this.staffList.length
                this.selectedStaffList = res.data.right
                this.selectedStaffNum = this.selectedStaffList.length
            })
        },
        // 左边表格选中存入staffData
        handleStaffChange(rows) {
            this.staffCheckNum = rows.length
            this.staffData = []
            if (rows) {
                rows.forEach((row) => {
                    if (row) {
                        this.staffData.push(row)
                    }
                })
            }
        },
        // 左->右(单选-全选)
        addStaff(type) {
            setTimeout(() => {
                // 清空选择
                this.$refs['staffTable'].clearSelection()
                this.$refs['selectedStaffTable'].clearSelection()
            }, 0)
            console.log(this.staffData, 'this.staffData');
            if (type === 'single') {
                this.staffData.forEach((item) => {
                    // this.selectedStaffList.push({ equipmentId: item.devId, equipmentName: item.devName, equipmentType: item.engSupTypeName, equipmentCapacity: item.ratePower, isCheck: item.isCheck, optTime: item.optTime })
                    this.selectedStaffList.push(item)
                })
                this.selectedStaffNum = this.selectedStaffList.length
                for (let i = 0; i < this.staffList.length; i++) {
                    for (let j = 0; j < this.staffData.length; j++) {
                        if (this.staffList[i].code === this.staffData[j].code) {
                            this.staffList.splice(i, 1)
                            this.staffNum = this.staffList.length
                        }
                    }
                }
            }

        },
        // 右边表格选中存入selectedStaffData
        handleSelectedStaffChange(rows) {
            this.selectedStaffCheckNum = rows.length
            this.selectedStaffData = []
            if (rows) {
                rows.forEach((row) => {
                    if (row) {
                        this.selectedStaffData.push(row)
                    }
                })
            }
        },
        // 右->左(单选-全选)
        removeStaff(type) {
            setTimeout(() => {
                this.$refs['staffTable'].clearSelection()
                this.$refs['selectedStaffTable'].clearSelection()
            }, 0)
            if (type === 'single') {
                this.selectedStaffData.forEach((item) => {
                    // this.staffList.push({
                    //     devId: item.equipmentId,
                    //     devName: item.equipmentName,
                    //     engSupTypeName: item.equipmentType,
                    //     ratePower: item.equipmentCapacity,
                    //     isCheck: item.isCheck,
                    //     optTime: item.optTime
                    // })
                    this.staffList.push(item)
                    this.staffNum = this.staffList.length
                })

                console.log('this.staffList', this.staffList)
                for (let i = 0; i < this.selectedStaffList.length; i++) {
                    for (let j = 0; j < this.selectedStaffData.length; j++) {
                        if (
                            this.selectedStaffList[i] &&
                            this.selectedStaffData[j] &&
                            this.selectedStaffList[i].code === this.selectedStaffData[j].code
                        ) {
                            this.selectedStaffList.splice(i, 1)
                            this.selectedStaffNum = this.selectedStaffList.length
                        }
                    }
                }
            }
            // if (type === 'all') {
            //   this.selectedStaffList.forEach((item) => {
            //     this.staffList.push(item)
            //     this.staffNum = this.staffList.length
            //   })
            //   this.selectedStaffList = []
            //   this.selectedStaffNum = 0
            // }
        },
        getRowKey(row) {
            return row.code
        },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            return {
                'background-color': '#F4F4F4',
                'color': "#000000"
            }
        },

    },

}

通过遍历被转移的每一行，然后将勾选的项加到另一个表格数组中

注意：需关注这几行代码:

 if (this.staffList[i].code === this.staffData[j].code) {
        this.staffList.splice(i, 1)
        this.staffNum = this.staffList.length
      }
                        
  getRowKey(row) {
            return row.code
     },
     
     
     

这里的code指的是每一行的唯一值,按自己的需要写

使用有问题的话可以下方留言