都想扮一个好形象给别人，可是你骗不了自己。
需求：折线图是根据table的表格数据’具体时间-环境剂量率‘绘制出来的。
仔细看table的高亮哈！！点击table的某一行，对应右侧的折线图显示tooltip，相反的点击折线图的节点，table也会相应的高亮某一行。
需求： 折线图和折线图下的两个表都是根据左侧的表某一行的详细数据绘制而成的
点击某一行，会显示对应行的数据图，下方的表也是根据某一行的数据得来的。
目录
一、【表图联动】准备工作
1.table表格
表格数据detailData
<el-table
:data="detailData"
style="width: 100%"
class="tableBox"
max-height="450"
id="tableBox"
>
.....
<el-table-column
prop="doserate"
label="环境剂量率"
align="center"
>
</el-table-column>
</el-table>2.echarts折线图
（1）折线图页面组件
<div id="chart" ref="chart"></div>（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);
},
二、图表联动实现
1.点击table某行显示图某点信息
思路：点击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;
} 
（2）联动修改echart的tooltip出现
为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.
<template>
<div class="app-container">
<el-card class="card-box">
<div style="height: 580px; width: 100%">
<div class="flexDiv">
<div class="card-title">{{ name }}</div>
<div>
<el-button
type="text"
icon="el-icon-close"
@click="goback"
style="color: black"
></el-button>
</div>
</div>
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
type="datetimerange"
size="small"
style="width: 350px"
range-separator="-"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
align="right"
@change="search"
@blur="search"
></el-date-picker>
</el-form-item>
<el-form-item>
<!-- <el-button type="primary">查询</el-button> -->
<el-button-group>
<el-button @click="reset">重置</el-button>
<el-button type="primary" @click="search">查询</el-button>
</el-button-group>
</el-form-item>
<el-form-item>
<div class="right-title">
仅展示当前一周之内的数据图像，超出时间范围将以列表形式呈现
</div>
</el-form-item>
</el-form>
<div class="card-content" style="display: flex" v-show="!showAll">
<div class="card-left">
<div class="title">
<div class="title-name">时间排序:</div>
<div class="title-refresh" @click="handleExport">
<i class="el-icon-download" style="margin-right: 8px"></i>导出
</div>
</div>
<el-table
:data="detailData"
style="width: 100%"
class="tableBox"
max-height="450"
id="tableBox"
@row-click="handleClickChange"
:row-class-name="tableRowClassName"
>
<el-table-column
label="序号"
prop="index"
width="55"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column
prop="deviceTime"
label="具体时间"
width="200"
align="center"
>
</el-table-column>
<el-table-column
prop="doserate"
label="环境剂量率"
align="center"
>
<template slot-scope="scope">
<div
v-if="
scope.row.doserate > levelOne &&
scope.row.doserate < levelTwo
? true
: false
"
style="color: #e19b16"
>
{{ scope.row.doserate }} nSv/h
</div>
<div
v-else-if="scope.row.doserate > levelTwo ? true : false"
style="color: #e84b3f"
>
{{ scope.row.doserate }} nSv/h
</div>
<div v-else>{{ scope.row.doserate }} nSv/h</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="card-right">
<div class="title-name">趋势图:</div>
<div
id="chart"
style="width: 620px; height: 320px; margin: -10px 20px 20px 40px"
class=""
ref="chart"
v-show="!showAll"
></div>
<div class="data-analyse">
<div class="analyse-title">数据分析：</div>
<div class="analyse-itemlist">
<div class="analyse-item">
<a>获取量：{{ dataNumber }}个</a>
</div>
<div class="analyse-item">
<a>最大值：{{ dataMax }}nSv/h</a>
</div>
<div class="analyse-item">
<a>平均值：{{ dataAvg }}nSv/h</a>
</div>
<div class="analyse-item">
<a>达到最大值的时刻:</a>
</div>
<div class="analyse-item">
<a>最小值：{{ dataMin }}nSv/h</a>
</div>
<div class="analyse-item">
<a>{{ dateMax }}</a>
</div>
</div>
</div>
</div>
</div>
<div class="card-content1" v-show="showAll">
<div class="title">
<div class="title-name">报表详情:</div>
</div>
<div style="display: flex">
<div class="card-table">
<el-table
:data="detailData2"
style="width: 98%"
class="tableBox"
stripe
max-height="400"
>
<el-table-column label="序号" prop="index" width="55">
<template slot-scope="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column
prop="deviceTime"
label="具体时间"
width="200"
align="center"
>
</el-table-column>
<el-table-column
prop="stationName"
label="站点名称"
align="center"
>
</el-table-column>
<el-table-column prop="sysName" label="设备名称" align="center">
</el-table-column>
<el-table-column
prop="doserate"
label="环境剂量率"
align="center"
>
<template slot-scope="scope">
<div
v-if="
scope.row.doserate > levelOne &&
scope.row.doserate < levelTwo
? true
: false
"
style="color: #e19b16"
>
{{ scope.row.doserate }} nSv/h
</div>
<div
v-else-if="scope.row.doserate > levelTwo ? true : false"
style="color: #e84b3f"
>
{{ scope.row.doserate }} nSv/h
</div>
<div v-else>{{ scope.row.doserate }} nSv/h</div>
</template>
</el-table-column>
<el-table-column label="检测状态" prop="status" align="center">
<template>
<div style="display: flex; justify-content: center">
<div
:class="
status === '正常'
? 'zc'
: status === '一级报警'
? 'yjbj'
: status === '二级报警'
? 'ejbj'
: 'lx'
"
></div>
<div>{{ status }}</div>
</div>
</template>
</el-table-column>
</el-table>
<!-- <pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getDataList"
/> -->
<div style="display: flex; justify-content: space-around">
<div style="width: 370px; height: 50px">
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getDataList"
layout="total, prev, pager, next"
pager-count="3"
hide-on-single-page
style="margin: 0px"
/>
</div>
<el-button
type="primary"
@click="handleExport"
style="margin: auto; margin-left: 400px"
>导出</el-button
>
</div>
</div>
<div class="card-left">
<div class="left-detail">
<a style="font-weight: bold; margin-left: 10px">数据分析：</a>
<div style="margin-left: 20px">
<p>最小值：{{ dataMin }}nSv/h</p>
<p>最大值：{{ dataMax }}nSv/h</p>
<p>顶峰时刻：{{ dateMax }}</p>
<p style="min-width: 240px">平均值：{{ dataAvg }}nSv/h</p>
<p>呈现量：{{ dataNumber }}</p>
</div>
<div
style="
height: 1px;
width: 260px;
background-color: #cacaca;
margin-left: -10px;
"
></div>
<div style="height: 30px; width: 240px">
<img
alt=""
src="../../../assets/perimeter/bz.png"
style="
height: 24px;
width: 24px;
margin: 10px 10px 0px 190px;
"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</el-card>
</div>
</template>
<script>
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);
},
},
};
</script>
<style scoped lang="scss">
.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;
}
</style>
本章的代码指路：源码：el-table和Echarts折线图【表-图两者联动】显示tooltip效果【表-图-表三者联动】展示数据-Javascript文档类资源-CSDN下载
3839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
