这个效果是用什么图表组件做的

Question

区间选择，后面背景颜色也会跟着联动

Answer 1

没有找到一模一样的图表控件，不过可以换个思路，自己组装一下，用百度的echart插件就可以实现。
打开 https://echarts.apache.org/ex... 复制以下代码到左侧编辑栏。

option = {
    xAxis: {
        show: false,
        type: 'value',
        boundaryGap: false,
        minInterval: 1,
    },
    yAxis: {
        show: false,
        type: 'value',
        boundaryGap: [0, '30%']
    },
    visualMap: {
        type: 'piecewise',
        show: false,
        dimension: 0,
        seriesIndex: 1,
        min: 10,
        max: 20,
        inRange: {
            color: ['rgb(120, 220, 140)'],
        }
    },
    series: [
        {
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
                color: 'rgb(228, 228, 228)',
                width: 0
            },
            areaStyle: {
                color: 'rgb(228, 228, 228)',
            },
            data: [
                [0, 200],
                [10, 400],
                [20, 650],
                [30, 500],
                [40, 250],
                [50, 300],
                [60, 450],
                [70, 300],
                [80, 100],
                [90, 200],
                [100, 150]
            ]
        },
        {
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
                width: 0
            },
            areaStyle: {},
            data: [
                [0, 200],
                [10, 400],
                [20, 650],
                [30, 500],
                [40, 250],
                [50, 300],
                [60, 450],
                [70, 300],
                [80, 100],
                [90, 200],
                [100, 150]
            ]
        }
    ]
};

1. 将xAxis中的minInterval设为1，表示坐标轴最小间隔为1.
2. xAxis和yAxis中的show属性设为false，不显示坐标轴
3. series中复制两个数据对象，前一个设置灰色背景色，后一个用来和visualMap属性组合使用
4. visualMap中的seriesIndex字段用来指定取哪个系列的数据，这里将其置为1
5. visualMap中的min，max字段用来改变所选择的区域

上述配置为图表的配置项，想要实现你说的图中的功能只需要再自己添加一个滑块组件，然后根据滑块的位置来动态修改visualMap中的min和max的值即可