Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如何让Bar 要实现在移动端水平滑动柱状图来显示更多数据,数据量较多。 #4647

Closed
wuxia510 opened this issue Dec 7, 2016 · 1 comment
Labels
stale Inactive for a long time. Will be closed in 7 days.

Comments

@wuxia510
Copy link

wuxia510 commented Dec 7, 2016

One-line summary [问题简述]

柱状图要展示数据量较大,x轴比较长,希望默认显示一部分数据,且默认设置一个合适的缩放比例,让页面看着舒服,然后用户可以通过左右划动屏幕来滚动柱状图,以达到查看更多数据的目的。

现在的问题就是 1、怎么设置默认缩放比例 2、如何默认显示一部分数据(现在的现象是显示全部数据,柱状图变成很细的线了)

代码:

   option = {
        title: {
            text: '特性示例:渐变色 阴影 点击缩放',
            subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
        },
        xAxis: {
            min: 'dataMin',
            max: 'dataMax',
            data: dataAxis,
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#000'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            type: 'value',
            min: 'dataMin',
            max: 'dataMax',
            splitLine: {
                show: true
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            }
        },
        dataZoom: [
            {
                type: 'inside',
                // orient: 'horizontal',
                // zoomLock:true  //如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
            }
        ],
        series: [
            { // For shadow
                type: 'bar',
                itemStyle: {
                    normal: {color: 'rgba(0,0,0,0.05)'}
                },
                barGap: '-100%',
                barCategoryGap: '40%',
                data: dataShadow,
                animation: false
            },
            {
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#188df0'}
                            ]
                        )
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#2378f7'},
                                {offset: 0.7, color: '#2378f7'},
                                {offset: 1, color: '#83bff6'}
                            ]
                        )
                    }
                },
                data: data
            }
        ]
    };

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:
  • Browser version [浏览器类型和版本]:
  • OS Version [操作系统类型和版本]:

Expected behaviour [期望结果]

ECharts option [ECharts配置项]

option = {

}

Other comments [其他信息]

@pissang
Copy link
Contributor

pissang commented Dec 7, 2016

可以设置 start, end,或者具体值 startValue, endValue

@Ovilia Ovilia added the stale Inactive for a long time. Will be closed in 7 days. label Jul 30, 2019
@stale stale bot closed this as completed Aug 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stale Inactive for a long time. Will be closed in 7 days.
Projects
None yet
Development

No branches or pull requests

3 participants