echarts 的 legend设置了宽度但是里边自定义的内容过长就会影藏,想让他超出就...,然后有tooltip提示

如果想让超出宽度的legend内容展示出来，可以通过设置`legend`的`formatter`函数来实现。例如：

legend: {
  type: 'scroll',
  width: 500,
  formatter: function(name) {
    return echarts.format.truncateText(name, 500, '12px Microsoft Yahei', '…');
  }
}

其中，`formatter`函数中的`echarts.format.truncateText`方法可以将文本截取为指定长度并添加省略号。通过这种方式，可以将超出宽度的legend内容展示出来。

对于tooltip提示，可以通过设置`tooltip`的`trigger`属性为`axis`来实现。例如：

tooltip: {
  trigger: 'axis'
}

这样就可以在鼠标悬停在图表上时，展示每个系列对应的数值。

相关问题

echarts 的 legend设置了宽度但是里边自定义的内容过长就会影藏,想让他超出就...,然后有tooltip提示 例子

以下是一个例子，演示了如何设置legend的宽度并将超出宽度的内容展示出来，同时添加tooltip提示：

var option = {
  legend: {
    type: 'scroll',
    width: 500,
    formatter: function(name) {
      return echarts.format.truncateText(name, 500, '12px Microsoft Yahei', '…');
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      name: '系列1',
      type: 'line',
      data: [10, 20, 30, 40, 50]
    },
    {
      name: '系列2',
      type: 'line',
      data: [50, 40, 30, 20, 10]
    }
  ]
};

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 绘制图表
myChart.setOption(option);

在上面的例子中，我们设置了legend的宽度为500，当内容超出宽度时，使用`echarts.format.truncateText`方法将文本截取为500个像素长度，并添加省略号。同时，我们设置了tooltip的trigger属性为axis，当鼠标悬停在图表上时，展示每个系列对应的数值。

最新版echarts 的 legend设置了宽度但是里边自定义的内容过长就会影藏,想让他超出就...,然后有tooltip提示 例子

您可以使用 `formatter` 属性来自定义 legend 的显示内容，然后使用 CSS 样式来控制其宽度和超出部分的显示效果。

以下是一个例子：

option = {
  legend: {
    width: 200, // 设置宽度
    formatter: function(name) {
      // 自定义显示内容
      return name.length > 10 ? name.substring(0, 10) + '...' : name;
    }
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    formatter: function(params) {
      // 提示框内容
      return params[0].name + ': ' + params[0].value;
    }
  },
  // 其他配置项
  // ...
}

然后，在 CSS 中设置 `text-overflow` 和 `white-space` 属性来控制超出部分的显示效果：

.echarts-legend-container {
  width: 200px;
}

.echarts-legend-container li {
  text-overflow: ellipsis;
  white-space: nowrap;
}

这样，legend 中的内容就可以超出部分显示，并且在鼠标悬浮时会有 tooltip 提示。