【EChart】用柱状图表示区间，以及区间不等距的解决方案

通常情况下，柱状图会表示的应用场景是：当x等于某个值时，y等于多少。即1对1的关系，如EChart官网所示的例子。

现在，组内项目有一个需求：用柱状图表示在在该区间内的数据是多少，如下图所示（已完成的效果图）。例如：有一个数组，数据在0.001到0002之间的个数为598个。

需要解决的问题有如下几条：
1.如何将X轴数据显示在刻度正下方，而不是刻度之间。
2.如何format X轴数据，例如：显示“>0.013”

试错方案：
将boundaryGap设置为false。此时，X轴数据显示在刻度正下方，但是Y轴数据也会发生错位（未找到解决方案）。效果如下图所示。

最终解决方案：
1.使用min/max/interval，来生成X轴。EChart将会自动帮你生成[min,max]之间的数据点。
EChart官网解释：使用 interval 配合 min、max 强制设定刻度划分。
axisLabel下，可以设置不显示X轴的最大值，即“>0.013”之后就不用再显示最后一个值，即设置showMaxLabel为false。也可以通过写formatter函数，将X轴进行自定义，即可以解决第2个问题。
具体代码如下：

xAxis: [{
    min: begin,
    max: _.round(end + interval, 3),
    interval: interval,
    name: "(ms)",
    type: 'value',
    splitLine: false,
    axisLabel: {
        showMaxLabel: false,
        formatter: function (value, index) {
            if (index === histogram.length - 1) {
                return '>' + value;
            }
            return value;
        }
    }
}],

2.使用custom series来绘制bar chart。

具体代码如下：

series: [{
    name: 'height',
    type: 'custom',
    renderItem: this.renderHistogramItem,
    label: {
        show: true,
        position: 'top'
    },
    encode: {
//表示维度0和1的数据，会对应到X轴上，维度2对应到Y轴和label。
        x: [0, 1],
        y: 2,
        label: 2
    },
    data: histogram,
    tooltip: {
        formatter :function (params) {
            let count = params.value[2],
            percent = params.value[3];
            return `<div>Count: ${count}</div><div>Percent: ${percent}%</div>`
        }
    }
}]

上述代码的核心是renderHistogramItem函数。

在渲染阶段，对于 series.data 中的每个数据项（为方便描述，这里称为 dataItem)，会调用此 renderItem 函数。这个 renderItem 函数的职责，就是返回一个（或者一组）图形元素定义，图形元素定义 中包括图形元素的类型、位置、尺寸、样式等。echarts 会根据这些 图形元素定义 来渲染出图形元素。

renderItem 函数提供了两个参数：
params：包含了当前数据信息（如 seriesIndex、dataIndex 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。
api：是一些开发者可调用的方法集合（如 api.value()、api.coord()）。
renderItem 函数须返回根据此 dataItem 绘制出的图形元素的定义信息，参见 renderItem.return。

renderHistogramItem函数如下：

renderHistogramItem: function (params, api) {
    let yValue = api.value(2);
    let start = api.coord([api.value(0), yValue]);
    let size = api.size([api.value(1) - api.value(0), yValue]);
    let style = api.style();
    return {
        type: 'rect',
        shape: {
            x: start[0] + 1,
            y: start[1],
            width: size[0] - 2,
            height: size[1]
        },
        style: style
    };
}

3.不等距X轴的解决方案
在此之上，组内项目又有了一个新的需求：让用户自定义X轴。这个会存在一个问题就是：X轴不等距，无法再用min/max/interval生成X轴。
解决方案：利用formatter函数。继续用min/max/interval生成想要的长度的X轴，并在生成barChart的函数中传入X轴数据组，利用index来获取真实的需要被渲染的数据。

具体代码如下：

xAxis: [{
    min: data[0],//use original as index
    max: _.round(data[13] + interval, 3),
    interval: interval,
    name: "(ms)",
    type: 'value',
    splitLine: false,
    axisLabel: {
        showMaxLabel: false,
        formatter: function (value, index) {
            if (index === histogram.length - 1) {
                return '>' + xAxis[index];
            }
            return xAxis[index];
        }
    }
}],

more details: https://blog.csdn.net/WuLex/a...