【Vue入门实践4】el-table和Echarts折线图【表-图两者联动】显示tooltip效果

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);

},

},

};