效果图

根据时间展示某一数量的时候的数据大小

1.获取数据

 async getTimeData() { 
      try { 
        const res = await timeData(this.queryTimeParams);
        this.initTimeChart(res);
      } catch (error) { 
        console.log(error);
      }
    },

2. 建立一个容器

 <div
          v-loading="chartTime.loading"
          ref="chartTime-line"
          class="chartTime-cont"
        ></div>

3.渲染折线图

3.1 处理数据

第一个是日期x轴；第三个values是y轴的数据；还有一个sizes是我们说的第三个数据；bytesToSize2这个方法是将数据转化为G的单位的方法；
sizes是一个数组，所以我们只要知道tooltip划到哪一个的索引就可以拿到数据；一个数组有索引就可以拿到值

 const times = data.map((item) => item.create_date);
      this.sizes = data.map((item) => { 
        return this.bytesToSize2(item.dataset_size);
      });
      const values = data.map((item) => item.count);

3.2 渲染折线图

 //时间戳渲染统计图
    initTimeChart(data) { 
      const times = data.map((item) => item.create_date);
      this.sizes = data.map((item) => { 
        return this.bytesToSize2(item.dataset_size);
      });
      const values = data.map((item) => item.count);
      if (!this.chartTime.line) { 
        this.chartTime.line = echarts.init(this.$refs["chartTime-line"]);
      }
      this.chartTime.loading = false;
      this.chartTime.line.setOption({ 
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        title: { 
          left: "center",
          text: "时间戳统计数据",
        },
        tooltip: { 
          trigger: "axis",
          formatter: (params) => { 
            return ` 日期: ${ params[0].axisValue}<br/> 数据大小: ${ this.sizes[params[0].dataIndex]}<br/> 数量: ${ params[0].data} `;
          },
        },
        grid: { 
          // left: 60,
          right: 20,
        },
        xAxis: { 
          data: times,
        },
        yAxis: { },
        series: [
          { 
            type: "line",
            smooth: true,
            showSymbol: false,
            lineStyle: { 
              width: 0,
            },
            areaStyle: { 
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { 
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                { 
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            data: values,
          },
        ],
      });
    },

这里是正常的折线图的渲染；只是展示tooltip的时候 自己格式化了一下

3.3 tooltip格式化

 tooltip: { 
          trigger: "axis",
          formatter: (params) => { 
            return ` 日期: ${ params[0].axisValue}<br/> 数据大小: ${ this.sizes[params[0].dataIndex]}<br/> 数量: ${ params[0].data} `;
          },
        },

这里的size就是第三个数据
数据格式是这样

3.4 格式化

数据大小: ${this.sizes[params[0].dataIndex]}

这里就是上面3.2说的 知道数组的索引就可以拿到相应的值；
这个params是我鼠标滑到哪里的整个对象；
这个就是params

然后就可以了