echarts

最新推荐文章于 2023-06-30 21:56:12 发布

原创最新推荐文章于 2023-06-30 21:56:12 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在ECharts中处理长文本显示问题，包括使用省略号缩短过长的坐标轴标签和通过换行增强可读性。同时，提供了实现图表自适应布局的方法，确保不同屏幕尺寸下图表的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

构建要在mounted里进行
echart坐标文字显示不开：

文字显示不开显示6位剩下的用...代替

axisLabel: {
  color: "#000",
  interval: 0,//显示所有类目，设为1则隔一个显示一个类目
  formatter: function(value) {
    if (value.length > 6) {
      return value.substring(0, 6) + "...";
    } else {
      return value;
    }
  }
},

echart自适应

  多个动态生成的图表，找个数组存储起来遍历
 _initChart (id, option) {
      let chart = this.charts[id]
      if (chart) {
        // 数据都为空值时，图表不会重新渲染，用来刷新图表
        chart.clear()
        chart.setOption(option)
      } else {
        const dom = document.getElementById(id)
        if (dom) {
          chart = echart.init(dom)
          if (this.charts instanceof Object) {
            this.charts[id] = chart
          } else {
            console.error('请传入对象类型的charts来存储图表')
          }
          chart.setOption(option)
        }
      }
      window.onresize = () => {
        for (let i in this.charts) {
          this.charts[i].resize()
        }
      }
    }


//多图表自适应
window.addEventListener("resize", function () {
myEnergyChart.resize();
myEnergyChart2.resize();
});


// 单个图表自适应
window.onresize = myChart.resize。

文字显示不开换行：

/**
 * @param title             将要换行处理x轴值
 * @param data              x轴的数据
 * @param fontSize          x轴数据字体大小，根据图片字体大小设置而定，此处内部默认为12
 * @param barContainerWidth         柱状图初始化所在的外层容器的宽度
 * @param xWidth            柱状图x轴左边的空白间隙 x 的值，详见echarts文档中grid属性，默认80
 * @param x2Width           柱状图x轴邮编的空白间隙 x2 的值，详见echarts文档中grid属性，默认80
 * @param insertContent     每次截取后要拼接插入的内容， 不传则默认为换行符：\n
 * @returns titleStr        截取拼接指定内容后的完整字符串
 * @author lixin
 */
export const getEchartBarXAxisTitle = (title, datas, fontSize, barContainerWidth, xWidth, x2Width, insertContent) => {
  debugger
  if (!title || title.length === 0) {
    return false
  }
  if (!datas || datas.length === 0) {
    return false
  }
  if (isNaN(barContainerWidth)) {
    return false
  }
  if (!fontSize) {
    fontSize = 12
  }
  if (isNaN(xWidth)) {
    xWidth = 80 // 默认与echarts的默认值一致
  }
  if (isNaN(x2Width)) {
    x2Width = 80 // 默认与echarts的默认值一致
  }
  if (!insertContent) {
    insertContent = '\n'
  }
var xAxisWidth = parseInt(barContainerWidth) - (parseInt(xWidth) + parseInt(x2Width)) // 柱状图x轴宽度=统计页面宽度-柱状图x轴的空白间隙(x + x2)
  var barCount = datas.length // x轴单元格的个数（即为获取x轴的数据的条数）
  var preBarWidth = Math.floor(xAxisWidth / barCount) // 统计x轴每个单元格的间隔
  var preBarFontCount = Math.floor(preBarWidth / fontSize) // 柱状图每个柱所在x轴间隔能容纳的字数 = 每个柱子 x 轴间隔宽度 / 每个字的宽度（12px）
  if (preBarFontCount > 3) { // 为了x轴标题显示美观，每个标题显示留两个字的间隙，如：原本一个格能一样显示5个字，处理后一行就只显示3个字
    preBarFontCount -= 2
  } else if (preBarFontCount <= 3 && preBarFontCount >= 2) { // 若每个间隔距离刚好能放两个或者字符时，则让其只放一个字符
    preBarFontCount -= 1
  }
  var newTitle = '' // 拼接每次截取的内容，直到最后为完整的值
  var titleSuf = '' // 用于存放每次截取后剩下的部分
  var rowCount = Math.ceil(title.length / preBarFontCount) // 标题显示需要换行的次数
  if (rowCount > 1) { // 标题字数大于柱状图每个柱子x轴间隔所能容纳的字数，则将标题换行
    for (var j = 1; j <= rowCount; j++) {
      if (j === 1) {
        newTitle += title.substring(0, preBarFontCount) + insertContent
        titleSuf = title.substring(preBarFontCount) // 存放将截取后剩下的部分，便于下次循环从这剩下的部分中又从头截取固定长度
      } else {
        var startIndex = 0
        var endIndex = preBarFontCount
        if (titleSuf.length > preBarFontCount) { // 检查截取后剩下的部分的长度是否大于柱状图单个柱子间隔所容纳的字数
          newTitle += titleSuf.substring(startIndex, endIndex) + insertContent
          titleSuf = titleSuf.substring(endIndex) // 更新截取后剩下的部分，便于下次继续从这剩下的部分中截取固定长度
        } else if (titleSuf.length > 0) {
          newTitle += titleSuf.substring(startIndex)
        }
      }
    }
  } else {
    newTitle = title
  }
  return newTitle
}

vue里调用


 xAxis: [{
            type: 'category',
            data: optionX,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              formatter: function (val) {
                // 此处处理
                let newVal = getEchartBarXAxisTitle(val, optionX, 12, 930)
                console.log(newVal)
                return newVal
              }
            }
          }],