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

发布于 09-12 13:18 字数 78 浏览 21 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

在梵高的星空下2022-09-19 13:18:05

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文