echarts游标 + dataV表格动态

<template>
  <div class="test-box">
    <div id="dialog" class="">
      <div id="container1" class="cell"></div>
      <div id="container2" class="cell"></div>
    </div>
    <table>
      <caption>
        标题名称
      </caption>
      <thead>
        <tr>
          <th>类别1</th>
          <th>类别1</th>
          <th>类别1</th>
          <th>类别1</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>232</td>
          <td>232</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">总结： 总共多少！！！</td>
        </tr>
      </tfoot>
    </table>

    <div class="table2">
      <dv-scroll-board name="xx" :config="config" style="width: 500px; height: 220px" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        header: ["列1", "列2", "列3"],
        data: [
          ["行1列1", "行1列2", "行1列3"],
          ["行2列1", "行2列2", "行2列3"],
          ["行3列1", "行3列2", "行3列3"],
          ["行4列1", "行4列2", "行4列3"],
          ["行5列1", "行5列2", "行5列3"],
          ["行6列1", "行6列2", "行6列3"],
          ["行7列1", "行7列2", "行7列3"],
          ["行8列1", "行8列2", "行8列3"],
          ["行9列1", "行9列2", "行9列3"],
          ["行10列1", "行10列2", "行10列3"],
        ],
      },
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let chart1 = this.$echarts.init(document.getElementById("container1"));
      let chart2 = this.$echarts.init(document.getElementById("container2"));
      let option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}",
        },
        series: [
          {
            type: "gauge",

            data: [
              {
                title: {
                  color: "pink",
                },
                value: "",
                name: "", // 数据项名称
                detail: {
                  color: "blue",
                  formatter: () =>
                    ["我们的计算量: 1999MW", "混蛋d的鸡： 3434MW"].join("\n"),
                  fontSize: 10,
                  offsetCenter: ["0", "80%"],
                },
              },
            ],
          },
        ],
      };
      option.series[0].data[0].value = 30;
      option.series[0].data[0].name = "标题2";

      option && chart1.setOption(option);
      option.series[0].data[0].value = 50;
      option.series[0].data[0].name = "标题2";
      option && chart2.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  overflow: hidden;
}
.cell {
  float: left;
  width: 300px;
  height: 300px;
  border: 1px solid;
}
// 表格展示
table {
  width: 100%;
  border-collapse: collapse;
}

table caption {
  font-size: 23px;
  height: 20px;
  line-height: 20px;
  margin: 10px 0;
}

th,
td {
  border: 1px solid #999;
  text-align: center;
  padding: 20px 0;
}

table thead tr {
  background-color: #008c8c;
  color: #fff;
}

table tbody tr:nth-child(odd) {
  background-color: #eee;
}

table tbody tr:hover {
  background-color: #ccc;
}

table tbody tr td:first-child {
  color: #f40;
}
</style>