echarts折线图一条线展示多个数据,tooltip中显示多个数据,鼠标移入图表tooltip展示多个数据.

效果图:

实现方法:

methods:{
    updateEcharts(params){
      searchEcharts(params).then(data => {
        let dataObj = data.data.result;
        let dataTimes = [];
        dataObj.map(v =>{
          dataTimes.push(v.createDt);
          let keymap = {max: 'value'}
          Object.keys(v).map(k =>{
            let newKey = keymap[k]
            if (newKey) {
              v[newKey] = v[k]
              delete v[k]
            }
          })
        })
        this.myChart.setOption(this.bottomOption)
        this.myChart.setOption({
          title: {text: this.echartsName +'  最近一周数据统计'},
          xAxis: {data: dataTimes},
          series: [{data: dataObj}],
          tooltip:{
           	formatter:e=>{
	           return `
	              日期: ${e[0].data.createDt}<br/>
	              ${e[0].marker} 最大值: ${e[0].data.value}<br/>
	              ${e[0].marker} 最小值: ${e[0].data.min}
	            `
          	}
          }
        })
        window.addEventListener("resize", ()=>{this.myChart.resize()});
      })
    },
}

接口返回值的格式:

一个日期,一个最大值,一个最小值,一个时间戳.我们只需要日期,最大值最小值,就可以了,时间戳那个值放那里不碍事.
如果直接把这个值赋值给series里面的data,图表是出不来的
为什么,因为接口返回值里面没有一个字段的key是value.所以出不来
怎么解决?,上篇文章有说过方法,修改字段的key嘛

        dataObj.map(v =>{
          let keymap = {max: 'value'}
          Object.keys(v).map(k =>{
            let newKey = keymap[k]
            if (newKey) {
              v[newKey] = v[k]
              delete v[k]
            }
          })
        })

修改之后:

随便改那个字段都可以,只要返回值里面包含value这个字段就可以了
如果你的接口返回值里面有value这个字段,那么上面那段转换字段的key的代码就不用写了,直接将接口返回值赋值给series里面的data即可
📢没了，结束了，是不是很简单呐，如有错误，欢迎留言.如有问题，不吝赐教。
📢如果此篇博文对您有帮助，还请动动小手点赞 👍 收藏 ⭐留言 📝呐~，谢谢 ~ ~