码迷,mamicode.com
首页 > 其他好文 > 详细

Echart中X轴数据过多时横向拉动展示

时间:2019-12-12 15:06:53      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:sid   ima   orm   line   val   技术   tooltip   png   lse   

        chart.setOption(
                {
                    tooltip: {
                        trigger: ‘axis‘
                    },

                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: ‘3%‘,
                        right: ‘4%‘,
                        bottom: ‘3%‘,
                        containLabel: true
                    },
                                     
                    
                    dataZoom: [
                        {
                            show: true,
                            realtime: true,
                            start: 65,
                            end: 85
                        },
                        {
                            type: ‘inside‘,
                            realtime: true,
                            start: 65,
                            end: 85
                        }
                    ],
                    
                    xAxis: [
                        {
                            type: ‘category‘,
                            boundaryGap: false,
                            data: xdata
                        }
                    ],
                    yAxis: [
                        {
                            type: ‘value‘,
                            axisLabel: {
                                formatter: ‘{value}‘
                            }

                        }
                    ],
                    series: [
                        {
                            name: ‘指标值‘,
                            type: viewtype,
                            stack: ‘指标值‘,
                            data: zbvalue
                                              
                        },
                        {
                            name: ‘预警值‘,
                            type: ‘line‘,
                            stack: ‘预警值‘,
                            data: yjvalue
                                              
                        }
                    ]
                                       
                })    

在setOption的时候加上dataZoom 

dataZoom: [
{
show: true,
realtime: true,
start: 65,
end: 85
},
{
type: ‘inside‘,
realtime: true,
start: 65,
end: 85
}
],

 

技术图片

 

 

Echart中X轴数据过多时横向拉动展示

标签:sid   ima   orm   line   val   技术   tooltip   png   lse   

原文地址:https://www.cnblogs.com/nje19951205/p/12028788.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!