以不规则跨度绘制图表数据的技巧和实践

2023-10-22 06:15:16

将数字转换成刻度线

echarts 中提供了丰富的刻度线配置项，可以帮助您轻松地创建各种类型的刻度线。为了实现不均匀跨度，我们需要将数字转换成刻度线。这可以通过使用 axisLabel 配置项来实现。

axisLabel: {
  formatter: function (value) {
    // 将数字转换成字符串
    var str = value.toString();

    // 将字符串中的数字拆分成数组
    var arr = str.split('');

    // 将数组中的数字重新组合成字符串，并添加刻度线分隔符
    var result = '';
    for (var i = 0; i < arr.length; i++) {
      result += arr[i];
      if (i < arr.length - 1) {
        result += ',';
      }
    }

    // 返回重新组合后的字符串
    return result;
  }
}

设置不规则跨度

为了设置不规则跨度，我们需要修改 axisTick 配置项。

axisTick: {
  // 设置不规则跨度
  interval: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}

示例代码

以下是一个完整的示例代码，演示了如何使用 echarts 绘制不均匀刻度的图表：

var myChart = echarts.init(document.getElementById('main'));

var option = {
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    axisLabel: {
      formatter: function (value) {
        var str = value.toString();
        var arr = str.split('');
        var result = '';
        for (var i = 0; i < arr.length; i++) {
          result += arr[i];
          if (i < arr.length - 1) {
            result += ',';
          }
        }
        return result;
      }
    },
    axisTick: {
      interval: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320, 1332, 982, 901, 954, 984],
    type: 'bar'
  }]
};

myChart.setOption(option);