没有找到一模一样的图表控件,不过可以换个思路,自己组装一下,用百度的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]
]
}
]
};
- 将xAxis中的minInterval设为1,表示坐标轴最小间隔为1.
- xAxis和yAxis中的show属性设为false,不显示坐标轴
- series中复制两个数据对象,前一个设置灰色背景色,后一个用来和visualMap属性组合使用
- visualMap中的seriesIndex字段用来指定取哪个系列的数据,这里将其置为1
- visualMap中的min,max字段用来改变所选择的区域
上述配置为图表的配置项,想要实现你说的图中的功能只需要再自己添加一个滑块组件,然后根据滑块的位置来动态修改visualMap中的min和max的值即可