在网上没有找到我需要的内容,悬浮窗数据一直显示为[Object,Object],获取不到params中的相应内容。

通过System.out.println(map)获取到的后台数据格式为

{treeMapData=[{yield=0.9894, time_info=2021-01-01 00:00:00}, 
{yield=1, time_info=2021-01-02 00:00:00}, 
{yield=0.9914, time_info=2021-01-03 00:00:00},
{yield=1, time_info=2021-03-31 00:00:00}]}

传到前台的数据可以用console.log(params);进行查看

Echarts上有类似的案例Examples - Apache ECharts

其tooltip的设置为

tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          animation: false,
          label: {
            backgroundColor: '#ccc',
            borderColor: '#aaa',
            borderWidth: 1,
            shadowBlur: 0,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            color: '#222'
          }
        },
        formatter: function (params) {
          return (
            params[2].name +
            '<br />' +
            ((params[2].value - base) * 100).toFixed(1) +
            '%'
          );
        }
      },

我出现了程序错误,悬浮窗直接不显示了。

多次试错,通过控制台输出数据,最终尝试出了一个较为复杂的显示方法。

最终的tooltip为

tooltip: {
    trigger: "axis",
    axisPointer: {
        type: "cross"
    },
    formatter:function (params){
        var result="";
        var time_info="";
        var yield="";
        for (var i = 0, l = params.length; i < l; i++) {
            time_info = echarts.format.formatTime("yyyy-MM-dd", params[i].value[params[i].dimensionNames[1]]);
            yield = (params[i].value[params[i].dimensionNames[0]]*100).toFixed(2) + "%";
            result += time_info + "</br>" + yield;
            //console.log("时间",time_info);
            //console.log("良率",yield);
            //console.log("时间",params[i].value[params[i].dimensionNames[1]]);
            //console.log("良率",(params[i].value[params[i].dimensionNames[0]]*100).toFixed(2) + "%");
        }
        return result;
    }	
},

x轴和外轴为

xAxis: {
    type: "time",
    boundaryGap: false,
    axisPointer: {
        label: {
            show: true,
            formatter: function(params) {
                return echarts.format.formatTime("yyyy-MM-dd", params.value);
            }
        }
    }
},
yAxis: {
    type: "value",
    min:0.7,
    max:1,
    axisLabel: {
        formatter: function (value, index) {
            return (value * 100).toFixed(2) + "%";
        }
    },
    axisPointer: {
        label: {
            formatter: function (params) {
                return ((params.value) * 100).toFixed(2) +  "%";
            }
        }
    }
},

设置X轴间隔为7天

xAxis.maxInterval

number 自动计算的坐标轴最大间隔大小。

例如,在时间轴((type: 'time'))可以设置成 3600 24 1000 保证坐标轴分割刻度最大为一天。

{
    maxInterval: 3600 * 24 * 1000 
}

只在数值轴或时间轴中(type: 'value' 或 'time')有效。

更多推荐