Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
501 views
in Technique[技术] by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

没有找到一模一样的图表控件,不过可以换个思路,自己组装一下,用百度的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的值即可


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...