【Vue实战】待办事项+echarts词云实现
一、效果实现
二、实现步骤
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>