【Vue实战】待办事项+echarts词云实现

柔光的暖阳◎ 2022-11-25 00:35 393阅读 0赞

**一、效果实现**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 1]  
**二、实现步骤**

**1.待办事项的实现**

首先需要一个card容器，然后再在里面使用一个表格，再对表格进行增添和删除列。难点在于掌握对JS数组的操作和获取表格的当前行信息。我废话不多说，直接上代码；

<el-card shadow="hover" style="height:403px;">
    
                    <el-dialog title="事项记录":visible.sync="dialogShow" width="40%" style="padding-bottom: 5px">
                      <el-form :model="form" style="margin-top: 0">
    
                        <el-form-item label="事项"  style="margin-top: 5px" >
                          <el-input v-model="form.event" autocomplete="off" prefix-icon="el-icon-collection-tag" style="width: 90%" id="getInfo"></el-input>
                        </el-form-item>
    
    
                      </el-form>
    
                      <div style="padding-bottom: 15px; margin-top: 10px">
                      <el-button @click="addEventRecord"  style="float: right; margin-left: 5px">提交</el-button>
                      </div>
    
                    </el-dialog>
    
                    <div slot="header" class="clearfix">
                      <span>待办事项</span>
                      <el-button style="float: right; padding: 3px 0" type="text" @click="dialogShow=true">添加</el-button>
                    </div>
                    <el-table :show-header="false" :data="todoList" style="width:100%;">
                      <el-table-column width="40">
                        <template slot-scope="scope">
                          <el-checkbox v-model="scope.row.status"></el-checkbox>
                        </template>
                      </el-table-column>
                      <el-table-column>
                        <template slot-scope="scope">
                          <div
                            class="todo-item"
                            :class="{'todo-item-del': scope.row.status}"
                          >{ { scope.row.title}}</div>
                        </template>
                      </el-table-column>
                      <el-table-column width="60">
                        <template slot-scope="scope">
                          <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleDelete(scope.$index, scope.row)"
                          >删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-card>
    
    
      handleDelete(index ,row){ 
            this.$confirm('确定要删除吗？', '提示', { 
              type: 'warning'
            })
              .then(() => { 
                this.todoList.splice(index,1);
                this.$store.toDoList=this.todoList;
              })
              .catch(() => { });
          },

注意两点：  
(1)获取当前行，通过slot-scope 然后传入scope.$index,scope.row  
(2)对数组操作的常见方法：splice(index,num)指定位置开始删除多少，find(返回满足条件的第一个元素，若无返回undefined)与filter(返回满足所有条件的元素，如无返回“”)

**2.词云的实现**

若已有词频进行词云还是蛮容易的，只需调用echarts的相应组件即可，若使用Python就使用相应的word-cloud库，一般来说是组合爬虫来使用，本来也想来实现一下但是发现文本分析那块还是存在一定问题，就暂放了。

实现代码

<template>
      <div id="mywordcloud" :style="{width: '100%', height: '350px'}" :data="worddata"></div>
    </template>
    
    <script>
      import echarts from "echarts";
      import "echarts-wordcloud/dist/echarts-wordcloud";
      import "echarts-wordcloud/dist/echarts-wordcloud.min";
      export default { 
        name: "VueWordCloud",
        data () { 
          return { 
        
            worddata: [
              { 
                name: "老婆产假",
                value: 15000
              },
              { 
                name: "产假",
                value: 10081
              },{ 
                name: "身体不舒服",
                value: 9386
              },
              { 
                name: "生病",
                value: 7500
              },
              { 
                name: "休假休息",
                value: 7500
              },
              { 
                name: "亲人去世",
                value: 6500
              },
              { 
                name: "腹泻",
                value: 6500
              },
              { 
                name: "头痛",
                value: 6000
              },
              { 
                name: "朋友婚礼",
                value: 4500
              },
              { 
                name: "亲戚来了",
                value: 3800
              },
              { 
                name: "办理证件",
                value: 3000
              },
              { 
                name: "家里有事",
                value: 2500
              },
              { 
                name: "老婆坐月子",
                value: 2300
              },
              { 
                name: "急性阑尾炎",
                value: 2000
              },
              { 
                name: "呕吐",
                value: 1900
              },
              { 
                name: "感冒",
                value: 1800
              },
              { 
                name: "拉肚子",
                value: 1700
              },
              { 
                name: "小孩生病",
                value: 1600
              },
              { 
                name: "搬家",
                value: 1500
              },
              { 
                name: "工作疲惫",
                value: 1200
              },
              { 
                name: "喜酒",
                value: 1100
              },
              { 
                name: "堵车",
                value: 900
              },
              { 
                name: "睡过头",
                value: 800
              },
              { 
                name: "家里搞装修",
                value: 700
              },
            ]
          }
        },
        mounted(){ 
          this.initChart();
        },
        methods: { 
          initChart() { 
            this.chart = echarts.init(document.getElementById("mywordcloud"));
            const option = { 
              title: { 
                x: "center"
              },
              backgroundColor: "#fff",
              series: [
                { 
                  type: "wordCloud",
                  //用来调整词之间的距离
                  gridSize: 10,
                  //用来调整字的大小范围
                  sizeRange: [14, 60],
                  rotationRange: [0, 0],
                  //随机生成字体颜色
                  // maskImage: maskImage,
                  textStyle: { 
                    normal: { 
                      color: function() { 
                        return (
                          "rgb(" +
                          Math.round(Math.random() * 255) +
                          ", " +
                          Math.round(Math.random() * 255) +
                          ", " +
                          Math.round(Math.random() * 255) +
                          ")"
                        );
                      }
                    }
                  },
                  //位置相关设置
                  left: "center",
                  top: "center",
                  right: null,
                  bottom: null,
                  width: "200%",
                  height: "200%",
                  //数据
                  data: this.worddata
                }
              ]
            };
            this.chart.setOption(option);
          },
        }
      }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70]: /images/20221124/326f74d1af684b1c86e3dee3508f2182.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 1]: /images/20221124/fff90884008a477c83a6a07de87d1856.png