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

小白Rachel

已于 2022-03-17 10:20:32 修改

阅读量5.8k

点赞数 8

分类专栏：前端工作日记随笔 Vue项目实战文章标签： echarts vue.js javascript 前端

于 2022-03-02 15:07:14 首次发布

本文链接：https://blog.csdn.net/Sabrina_cc/article/details/123230346

版权

都想扮一个好形象给别人，可是你骗不了自己。

需求：折线图是根据table的表格数据’具体时间-环境剂量率‘绘制出来的。

仔细看table的高亮哈！！点击table的某一行，对应右侧的折线图显示tooltip，相反的点击折线图的节点，table也会相应的高亮某一行。

需求：折线图和折线图下的两个表都是根据左侧的表某一行的详细数据绘制而成的

点击某一行，会显示对应行的数据图，下方的表也是根据某一行的数据得来的。

（2）联动修改echart的tooltip出现

2.点击折线图某点高亮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-but