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

<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