效果图
<template>
<div class="new-list">
<div class="search-container">
<div class="input-style">
<el-input v-model="titleData" placeholder="请输图标的名称" ></el-input>
</div>
<div class="button-style">
<el-button @click="getTitle">提交</el-button>
</div>
</div>
<div class="table-container" >
<el-table
:data="tableData"
height="300"
>
<el-table-column prop="name" label="名称" align="center" width="100" >
</el-table-column>
<el-table-column prop="mon" label="星期一" align="center">
</el-table-column>
<el-table-column prop="tus" label="星期二" align="center">
</el-table-column>
<el-table-column prop="wen" label="星期三" align="center">
</el-table-column>
<el-table-column prop="thur" label="星期四" align="center">
</el-table-column>
<el-table-column prop="friday" label="星期五" align="center">
</el-table-column>
<el-table-column prop="saturday" label="星期六" align="center">
</el-table-column>
<el-table-column prop="sunday" label="星期日" align="center">
</el-table-column>
<el-table-column prop="operation" label="操作" align="center" fixed="right" width="200">
<template #default="scope">
<el-button @click="deleteData(scope.$index)">
删除
</el-button>
<el-button @click="editData(scope)">
编辑
</el-button>
</template>
</el-table-column>
</el-table>
<el-button class="table-container-button" @click="addData()">添加数据</el-button>
</div>
<div id="pic-container">
</div>
<div class="dialog-container">
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
@close = "closeDialog"
draggable
>
<el-row>
<el-col :span="10">
<span>名称</span>
<div class="dialog-container-div">
<el-input
placeholder="请输入"
v-model="newData.name"
></el-input>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<span>星期一</span>
<div class="dialog-container-div">
<el-input
placeholder="请输入"
v-model="newData.mon"
></el-input>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<span>星期二</span>
<div class="dialog-container-div">
<el-input
placeholder="请输入"
v-model="newData.tus"
></el-input>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<span>星期三</span>
<div class="dialog-container-div">
<el-input
placeholder="请输入"
v-model="newData.wen"
></el-input>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<span>星期四</span>
<div class="dialog-container-div">
<el-input
placeholder="请输入"
v-model="newData.thur"
></el-input>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<span>星期五</span>
<div class="dialog-container-div">
<el-input
placeholder="请输入"
v-model="newData.friday"
></el-input>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<span>星期六</span>
<div class="dialog-container-div">
<el-input
placeholder="请输入"
v-model="newData.saturday"
></el-input>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<span>星期日</span>
<div class="dialog-container-div">
<el-input
placeholder="请输入"
v-model="newData.sunday"
></el-input>
</div>
</el-col>
</el-row>
<div class="dialog-container-button">
<el-button @click="addNewData">确认</el-button>
<el-button>取消</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script setup>
import * as echarts from 'echarts';
import {
onMounted, ref} from 'vue';
import {
ElMessage } from 'element-plus';
//数据
const tableData = ref([
{
name:'number1',
mon:20,
tus:25,
wen:10,
thur:30,
friday:10,
saturday:20,
sunday:10,
},
{
name:'number2',
mon:0,
tus:5,
wen:1,
thur:3,
friday:1,
saturday:2,
sunday:1,
},
{
name:'number3',
mon:2,
tus:15,
wen:20,
thur:10,
friday:15,
saturday:25,
sunday:60,
},
{
name:'number4',
mon:21,
tus:22,
wen:17,
thur:37,
friday:11,
saturday:21,
sunday:11,
}
]);
const legendData = ref([]);
const seriesData = ref([]);
const titleData = ref("");
const scope = ref();
// const newMon = ref();
// const newTus = ref();
// const newWen = ref();
// const newThurs = ref();
// const newFrid = ref();
// const newSat = ref();
// const newSun = ref();
const newData=ref({
name:"",
mon:"",
tus:"",
wen:"",
thur:"",
friday:"",
saturday:"",
sunday:""
})
function getTable(){
tableData.value.map((value,index)=>{
seriesData.value[index] = {
type: "",
name: "",
data: []
}
})
// 获取table中的数据
tableData.value.map((value,index)=>{
legendData.value[index] = value.name;
seriesData.value[index].type = "line";
seriesData.value[index].name = value.name;
seriesData.value[index].data.push(value.mon);
seriesData.value[index].data.push(value.tus);
seriesData.value[index].data.push(value.wen);
seriesData.value[index].data.push(value.thur);
seriesData.value[index].data.push(value.friday);
seriesData.value[index].data.push(value.saturday);
seriesData.value[index].data.push(value.sunday);
})
}
getTable();
//初始化图表
function echartsInit() {
var chart = echarts.init(document.getElementById('pic-container'));
chart.clear();
chart.setOption({
title: {
text:titleData.value,
},
tooltip: {
// trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a79'
}
},
},
legend: {
data: legendData.value,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
},
yAxis: {
type: 'value'
},
series: seriesData.value,
})
};
onMounted(()=>{
echartsInit();
})
function getTitle(){
if(!titleData.value){
ElMessage({
message: "请输入图标名称",
type: "error",
})
};
echartsInit();
}
const dialogVisible = ref(false);
const dialogTitle = ref("");
const caseType = ref("");
function addData(){
dialogVisible.value = true;
dialogTitle.value = "添加数据";
caseType.value = "add";
}
function editData(e){
dialogVisible.value = true;
dialogTitle.value = "更改数据";
caseType.value = "update";
newData.value.name = e.row.name;
newData.value.mon = e.row.mon;
newData.value.tus = e.row.tus
newData.value.wen = e.row.wen;
newData.value.thur = e.row.thur;
newData.value.friday = e.row.friday;
newData.value.saturday = e.row.saturday;
newData.value.sun = e.row.sunday;
scope.value = e;
}
function closeDialog(){
dialogVisible.value = false;
newData.value.name = "";
newData.value.mon = "";
newData.value.tus = "";
newData.value.wen = "";
newData.value.thur = "";
newData.value.friday = "";
newData.value.saturday = "";
newData.value.sun = "";
}
const deleteData = (index) => {
tableData.value.splice(index,1);
seriesData.value.splice(index,1);
legendData.value.splice(index,1);
echartsInit();
}
function addNewData(){
if(caseType.value == "add"){
tableData.value.push(JSON.parse(JSON.stringify(newData.value)));
getTable();
echartsInit()
closeDialog();
}
else{
scope.value.row.name = JSON.parse(JSON.stringify(newData.value.name))
scope.value.row.mon = JSON.parse(JSON.stringify(newData.value.mon))
scope.value.row.tus = JSON.parse(JSON.stringify(newData.value.tus))
scope.value.row.wen = JSON.parse(JSON.stringify(newData.value.wen))
scope.value.row.thur = JSON.parse(JSON.stringify(newData.value.thur))
scope.value.row.friday = JSON.parse(JSON.stringify(newData.value.friday))
scope.value.row.saturday = JSON.parse(JSON.stringify(newData.value.saturday))
scope.value.row.sunday = JSON.parse(JSON.stringify(newData.value.sunday))
getTable();
echartsInit()
closeDialog();
}
}
</script>
<style lang="scss">
.new-list {
background-color: #fff;
margin: 20px;
padding: 20px;
}
.search-container {
display: inline-block;
}
.input-style{
display: inline-block;
width:120px;
}
.button-style{
display: inline-block;
margin-left:50px;
}
.table-container{
height: 300px;
width:100%;
margin-top: 20px;
}
#pic-container{
margin-top:100px;
height: 500px;
width: 100%;
}
.table-container-button{
margin-left:20px;
margin-top:20px;
}
.table-container-input-name{
margin-top:20px;
margin-left:20px;
width:100px;
display:inline-block;
}
.table-container-input-number{
margin-left:5px;
width:70px;
display:inline-block;
}
.el-row{
margin-top:10px;
}
.dialog-container-div{
margin-top:10px;
}
.dialog-container-button{
margin-top:10px;
margin-left:350px;
}
</style>