【Vue入门实践4】el |
您所在的位置：网站首页 › 表格数据转化成折线图 › 【Vue入门实践4】el |
【Vue入门实践4】el
|
都想扮一个好形象给别人，可是你骗不了自己。
需求：折线图是根据table的表格数据’具体时间-环境剂量率‘绘制出来的。 仔细看table的高亮哈！！点击table的某一行，对应右侧的折线图显示tooltip，相反的点击折线图的节点，table也会相应的高亮某一行。
需求： 折线图和折线图下的两个表都是根据左侧的表某一行的详细数据绘制而成的 点击某一行，会显示对应行的数据图，下方的表也是根据某一行的数据得来的。 目录 一、【表图联动】准备工作 1.table表格 2.echarts折线图 （1）折线图页面组件 （2）chart的option配置 （3）初始化绘制折线图 二、图表联动实现 1.点击table某行显示图某点信息 （1）点击table对应行高亮显示 （2）联动修改echart的tooltip出现 2.点击折线图某点高亮table某行 一、【表图联动】准备工作 1.table表格表格数据detailData ..... 2.echarts折线图 （1）折线图页面组件 （2）chart的option配置 var option = { title: { text: "", left: "1%", }, tooltip: { trigger: "axis", }, grid: { left: "5%", right: "15%", bottom: "10%", }, xAxis: { data: that.chartData.reverse(),// 横坐标数据为表格’时间‘数据 }, yAxis: {}, dataZoom: [ { // startValue: "2014-06-01 00:00:00", }, { type: "inside", }, ], visualMap: { top: 50, right: 10, pieces: [ // 右上角图标配置 { gt: 0, lte: levelOne, // 根据路由传参传来的一级阈值 color: "#096dd9", }, { gt: levelOne, lte: levelTwo, // 根据路由传参传来的二级阈值 color: "#e19b16", }, { gt: levelTwo, color: "#e84b3f", }, ], outOfRange: { color: "#e84b3f", }, }, series: { name: "环境剂量率", type: "line", data: that.chartData2, // 纵坐标数据为表格’环境剂量率‘数据 markLine: { symbol: ["none", "none"], //去掉箭头 itemStyle: { normal: { lineStyle: { type: "solid", color: { // 设置渐变 type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "red ", // 0% 处的颜色 }, { offset: 1, color: "#fff", // 100% 处的颜色 }, ], // color: "#e84b3f", global: false, // 缺省为 false }, }, label: { show: true, position: "middle", }, }, }, data: [ { yAxis: this.levelOne, //这里设置false是隐藏不了的，可以设置为-1 }, { yAxis: this.levelTwo, //这里设置false是隐藏不了的，可以设置为-1 }, ], }, }, }; （3）初始化绘制折线图 drawChart() { console.log("drawchart", this.chartData, this.chartData2); var that = this; var chartDom = document.getElementById("chart"); var myChart = this.$echarts.init(chartDom); this.myChart = myChart; const levelOne = parseInt(this.levelOne); const levelTwo = parseInt(this.levelTwo); var option = {.....} // 上述代码 option && myChart.setOption(option); },
思路：点击table后记录行号，修改行颜色，并使用dispatchAction出发echart的showTip方法显示tooltip （1）点击table对应行高亮显示添加行名方法，用来控制行点击之后的颜色变化 @row-click="handleClickChange" :row-class-name="tableRowClassName"添加@row-click点击事件，使用临时变量temprow保存选中的行，并对于选中的行修改颜色。其中return 返回的是对应class的名称，可以自定义效果。 tableRowClassName({ row, rowIndex }) { console.log("tableRowClassName"); //把每一行的索引放进row row.index = rowIndex; // if (row.active == true) { if (rowIndex == this.temprow) { return "light-row"; } }, .light-row { background: #f5f7fa; } 为mychart添加showTip的方法。 this.myChart.dispatchAction是echarts 常用API action。具体学习可以参考：Echarts 常用API之action行为 - sminocence - 博客园 handleClickChange(row, event, column) { console.log(row.index, this.myChart, row, column, row.active); this.temprow = row.index; this.myChart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: row.index, }); }, 2.点击折线图某点高亮table某行思路：添加chart的点击事件，获取点击的数据的dataIndex，并修改table的高亮行temprow即可。 var self = this; this.myChart.on("click", function (params) { console.log(params, params.dataIndex); //此处写点击事件内容 // var tableDom = document.getElementById("tableBox"); self.temprow = params.dataIndex; console.log(self.temprow, " self.temprow"); });
附本文件代码detail. {{ name }} 重置 查询 仅展示当前一周之内的数据图像，超出时间范围将以列表形式呈现 时间排序: 导出 {{ scope.$index + 1 }} {{ scope.row.doserate }} nSv/h {{ scope.row.doserate }} nSv/h {{ scope.row.doserate }} nSv/h 趋势图: 数据分析： 获取量：{{ dataNumber }}个 最大值：{{ dataMax }}nSv/h 平均值：{{ dataAvg }}nSv/h 达到最大值的时刻: 最小值：{{ dataMin }}nSv/h {{ dateMax }} 报表详情: {{ scope.$index + 1 }} {{ scope.row.doserate }} nSv/h {{ scope.row.doserate }} nSv/h {{ scope.row.doserate }} nSv/h {{ status }} 导出 数据分析：最小值：{{ dataMin }}nSv/h 最大值：{{ dataMax }}nSv/h 顶峰时刻：{{ dateMax }} 平均值：{{ dataAvg }}nSv/h 呈现量：{{ dataNumber }} 
import {
gmHistoryDataList,
gmHistoryDataListPage,
gmHistoryDataInfo,
gmExport,
} from "@/api/perimeter/perimeterData";
export default {
name: "detail",
data() {
return {
pickerOptions: {
shortcuts: [
{
text: "最近4小时",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 4);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近12小时",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 12);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近1天",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近7天",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
],
},
queryParams: {
dateRange: "",
}, // 查询表单
showAll: false,
// 日期范围
dateRange: [],
detailData: [
// {
// deviceTime: "2022-90-89",
// doserate: "12.9",
// },
// {
// deviceTime: "2022-90-89",
// doserate: "12.9",
// },
// {
// deviceTime: "2022-90-89",
// doserate: "12.9",
// },
// {
// deviceTime: "2022-90-89",
// doserate: "12.9",
// },
// {
// deviceTime: "2022-90-89",
// doserate: "12.9",
// },
// {
// deviceTime: "2022-90-89",
// doserate: "12.9",
// },
// {
// deviceTime: "2022-90-89",
// doserate: "12.9",
// },
// {
// deviceTime: "2022-90-89",
// doserate: "12.9",
// },
// {
// deviceTime: "2022-90-89",
// doserate: "12.9",
// },
// {
// deviceTime: "2022-90-89",
// doserate: "12.9",
// },
// {
// deviceTime: "2022-90-89",
// doserate: "12.9",
// },
// {
// deviceTime: "2022-90-89",
// doserate: "12.9",
// },
],
detailData2: [],
tableData: [
{
stationName: "yueyqie",
sysName: "89",
},
{
stationName: "yueyqie",
sysName: "89",
},
{
stationName: "yueyqie",
sysName: "89",
},
{
stationName: "yueyqie",
sysName: "89",
},
{
stationName: "yueyqie",
sysName: "89",
},
{
stationName: "yueyqie",
sysName: "89",
},
{
stationName: "yueyqie",
sysName: "89",
},
{
stationName: "yueyqie",
sysName: "89",
},
{
stationName: "yueyqie",
sysName: "89",
},
],
chartData: [],
chartData2: [],
// 其他信息
dataAvg: "",
dateMax: "", // 分之十克
dataMax: "", // 平均值
dataMin: "", // 最小值
dataNumber: "", //
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
},
status: "",
name: "",
levelOne: "",
levelTwo: "",
myChart: null,
temprow: null,
};
},
mounted() {
// this.getChartsDataFlag();
// 获取详情页的列表数据
this.init();
this.getAllList();
// 获取某一GM管设备历史数据的其他信息
// this.getOtherInfo();
// 绘制图形
// this.drawChart();
},
methods: {
init() {
this.status = this.$route.query.status;
this.name = this.$route.query.name + this.$route.query.sys;
// 一级阈值and二级阈值
this.levelOne = this.$route.query.level1;
this.levelTwo = this.$route.query.level2;
console.log("level1:", this.levelOne, "level2:", this.levelTwo);
const end1 = new Date();
const start1 = new Date();
start1.setTime(start1.getTime() - 3600 * 1000 * 4);
this.dateRange = [start1, end1];
},
getAllList() {
// 时间范围大于一天，显示表格形式
var begin = new Date(this.dateRange[0]).getTime();
var end = new Date(this.dateRange[1]).getTime();
var diff = Math.floor((end - begin) / 86400 / 1000);
if (diff > 7) {
this.showAll = true;
// 获取分页的数据
this.getDataList();
} else {
this.showAll = false;
// 获取不分页数据
this.getNoDataList();
}
this.getOtherInfo();
// this.drawChart();
// if (!this.showAll) {
// this.$nextTick(() => {
// console.log("herer");
// this.drawChart();
// });
// }
// this.changeChart();
},
// 获取不分页的数据
getNoDataList() {
const params = {
sysId: this.$route.query.id,
beginTime: this.parseTime(this.dateRange[0]),
endTime: this.parseTime(this.dateRange[1]),
};
// debugger;
gmHistoryDataList(params).then((res) => {
console.log(res, "获取不分页数据");
if (res.code == 200 && res.data != null) {
this.detailData = res.data;
// 拼接图标数组-先置空再push
this.chartData = [];
this.chartData2 = [];
res.data.forEach((item, index, array) => {
this.chartData.push(item.deviceTime);
this.chartData2.push(item.doserate);
});
console.log(this.chartData, this.chartData2, "====chartdata======");
this.drawChart();
} else {
this.detailData = [];
this.chartData = [];
this.chartData2 = [];
console.log(this.chartData, this.chartData2, "====chartdata======");
this.drawChart();
}
});
},
getDataList() {
const params = {
sysId: this.$route.query.id,
beginTime: this.parseTime(this.dateRange[0]),
endTime: this.parseTime(this.dateRange[1]),
...this.queryParams,
};
gmHistoryDataListPage(params).then((res) => {
if (res.code == 200) {
this.detailData2 = res.rows;
this.total = res.total;
}
});
},
getOtherInfo() {
const params = {
sysId: this.$route.query.id,
beginTime: this.parseTime(this.dateRange[0]),
endTime: this.parseTime(this.dateRange[1]),
};
gmHistoryDataInfo(params).then((res) => {
if (res.code == 200) {
console.log(res, "获取其他数据");
this.dataAvg = res.dataAvg;
this.dateMax = this.parseTime(
new Date(res.dateMax),
"{y}-{m}-{d} {h}:{i}:{s}"
); //
this.dataMax = res.dataMax;
this.dataMin = res.dataMin;
this.dataNumber = res.dataNumber;
}
});
},
drawChart() {
console.log("drawchart", this.chartData, this.chartData2);
var that = this;
var chartDom = document.getElementById("chart");
var myChart = this.$echarts.init(chartDom);
this.myChart = myChart;
const levelOne = parseInt(this.levelOne);
const levelTwo = parseInt(this.levelTwo);
// var data = [
// ["2000-06-05 00:00:00", 116],
// ["2000-06-06 00:00:00", 129],
// ["2000-06-07 00:00:00", 135],
// ["2000-06-08 00:00:00", 86],
// ];
// var ooo = data.map(function (item) {
// return item[0];
// });
// console.log(ooo, "++++++");
var option = {
title: {
text: "",
left: "1%",
},
tooltip: {
trigger: "axis",
},
// lineStyle: {
// color: "#1890ff",
// },
grid: {
left: "5%",
right: "15%",
bottom: "10%",
},
xAxis: {
// data: data.map(function (item) {
// return item[0];
// }),
data: that.chartData.reverse(),
},
yAxis: {},
// toolbox: {
// right: 10,
// feature: {
// dataZoom: {
// yAxisIndex: "none",
// },
// restore: {},
// saveAsImage: {},
// },
// },
dataZoom: [
{
// startValue: "2014-06-01 00:00:00",
},
{
type: "inside",
},
],
visualMap: {
top: 50,
right: 10,
pieces: [
{
gt: 0,
lte: levelOne,
color: "#096dd9",
},
{
gt: levelOne,
lte: levelTwo,
color: "#e19b16",
},
{
gt: levelTwo,
// lte: parseInt(levelTwo) + 30,
color: "#e84b3f",
},
],
outOfRange: {
color: "#e84b3f",
},
},
series: {
name: "环境剂量率",
type: "line",
// data: data.map(function (item) {
// return item[1];
// }),
data: that.chartData2,
// markLine: {
// silent: true,
// lineStyle: {
// color: "#333",
// },
// data: [
// {
// yAxis: 50,
// },
// {
// yAxis: 100,
// },
// {
// yAxis: 150,
// },
// {
// yAxis: 200,
// },
// {
// yAxis: 300,
// },
// ],
// },
markLine: {
symbol: ["none", "none"], //去掉箭头
itemStyle: {
normal: {
lineStyle: {
type: "solid",
color: {
// 设置渐变
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "red ", // 0% 处的颜色
},
{
offset: 1,
color: "#fff", // 100% 处的颜色
},
],
// color: "#e84b3f",
global: false, // 缺省为 false
},
},
label: {
show: true,
position: "middle",
},
},
},
data: [
{
yAxis: this.levelOne, //这里设置false是隐藏不了的，可以设置为-1
},
{
yAxis: this.levelTwo, //这里设置false是隐藏不了的，可以设置为-1
},
],
},
},
};
option && myChart.setOption(option);
// 图形和表格联动
// 移入该区域时，高亮
var self = this;
this.myChart.on("click", function (params) {
console.log(params, params.dataIndex); //此处写点击事件内容
var tableDom = document.getElementById("tableBox");
self.temprow = params.dataIndex;
console.log(self.temprow, " self.temprow");
// console.log(tableDom, "tableDom");
// for (var i = 0; i < self.detailData.length; i++) {
// if (i == params.dataIndex) {
// self.detailData[i].active = true;
// } else {
// self.detailData[i].active = false;
// }
// }
// for (var i = 0; i < addressList.length; i++) {
// if (params.name == addressList[i].name) {
// console.log(params.name);
// //addressList[i].value="1";
// //选中高亮
// this.myChart.dispatchAction({
// type: "highlight",
// name: params.name,
// });
// $(".map-table tbody tr").eq(i).addClass("highTr");
// }
// }
});
},
// 更新chart
changeChart() {
if (!this.showAll) {
this.$nextTick(() => {
this.drawChart();
});
}
},
handleExport() {
const queryParams = this.queryParams;
this.$confirm("是否确认导出所有数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.exportLoading = true;
return gmExport({
sysId: this.$route.query.id,
beginTime: this.parseTime(this.dateRange[0]),
endTime: this.parseTime(this.dateRange[1]),
});
})
.then((response) => {
this.download(response.msg);
this.exportLoading = false;
})
.catch(() => {});
},
// 查询
search() {
this.getAllList();
},
reset() {
const end1 = new Date();
const start1 = new Date();
start1.setTime(start1.getTime() - 3600 * 1000 * 4);
this.dateRange = [start1, end1];
this.getAllList();
// chart重画
this.chartData = [];
this.chartData2 = [];
this.drawChart();
},
handleClickChange(row, event, column) {
console.log(row.index, this.myChart, row, column, row.active);
this.temprow = row.index;
this.myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: row.index,
});
},
tableRowClassName({ row, rowIndex }) {
console.log("tableRowClassName");
//把每一行的索引放进row
row.index = rowIndex;
// if (row.active == true) {
if (rowIndex == this.temprow) {
return "light-row";
}
},
goback() {
this.$router.go(-1);
},
},
};
.card-content1 {
height: 460px;
// display: flex;
.card-table {
width: 75%;
height: 400px;
}
.card-left {
width: 23%;
.left-detail {
height: 270px;
font-size: 14px;
width: 260px;
padding: 20px 0px 10px 10px;
// background-color: rgb(116, 75, 75);
border: 1px solid #cacaca;
}
}
}
// title
.title {
height: 40px;
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: bold;
padding: 4px 10px 20px 10px;
.title-name {
width: 80px;
}
.title-refresh {
width: 70px;
color: #1890ff;
text-align: right;
padding-right: 15px;
}
}
.right-title {
height: 40px;
font-size: 14px;
margin-left: 40px;
}
// el-form
::v-deep .el-form {
height: 55px;
padding: 10px;
.el-form-item__label {
font-size: 14px;
font-weight: bold;
color: black;
}
}
// ::v-deep .el-input__inner {
// width: 200px;
// height: 28px;
// font-size: 14px;
// }
.el-button {
height: 28px;
width: 64px;
font-size: 14px;
line-height: 5px;
}
.red {
color: red;
}
.green {
color: green;
}
.card-box {
padding: 0px;
// margin-bottom: 20px;
}
// right-left
.card-left {
width: 40%;
height: 600px;
// background-color: rgb(124, 66, 66);
}
.card-right {
// width: 800px;
width: 60%;
height: 580px;
// padding-left: 40px;
// background-color: rgb(159, 216, 127);
.title-name {
margin-left: 20px;
width: 80px;
font-size: 14px;
font-weight: bold;
}
.data-analyse {
margin: 10px;
height: 100px;
width: 300px;
.analyse-title {
height: 50px;
padding: 10px 10px 0px 10px;
font-weight: bold;
font-size: 14px;
}
.analyse-itemlist {
height: 60px;
width: 600px;
margin-left: 50px;
font-size: 14px;
display: flex;
flex-wrap: wrap;
}
.analyse-item {
min-width: 300px;
height: 30px;
margin: 0px;
padding: 0px;
}
}
}
.card-title {
padding-left: 10px;
margin: 6px 0px;
font-size: 16px;
font-weight: bold;
}
// table
::v-deep .el-table {
height: 460px;
border: 0;
padding-left: 10px;
.el-table__header tr,
.el-table__header th {
height: 36px;
color: black;
font-size: 14px;
}
.el-table__body tr,
.el-table__body td {
height: 36px !important;
}
// 修改行高
.cell {
line-height: 20px;
}
.light-row {
background: #f5f7fa;
}
}
// 检测状态
.zc {
height: 7px;
width: 7px;
border-radius: 50%;
background-color: green;
margin: auto 9px;
}
.yjbj {
height: 7px;
width: 7px;
border-radius: 50%;
background-color: #e19b16;
margin: auto 9px;
}
.ejbj {
height: 7px;
width: 7px;
border-radius: 50%;
background-color: #e84b3f;
margin: auto 9px;
}
.lx {
height: 7px;
width: 7px;
border-radius: 50%;
background-color: gray;
margin: auto 9px;
}
.zc-t {
color: green;
}
.yjbj-t {
color: #e19b16;
}
.ejbj-t {
color: #e84b3f;
}
.lx-t {
color: gray;
}
.flexDiv {
display: flex;
justify-content: space-between;
}
本章的代码指路：源码：el-table和Echarts折线图【表-图两者联动】显示tooltip效果【表-图-表三者联动】展示数据-Javascript文档类资源-CSDN下载 |
【本文地址】
今日新闻 |
推荐新闻 |