echarts 添加滚动轴

需求：解决x轴数据过多导致页面拥挤
解决：添加滚动轴 dataZoom

             dataZoom:[{ //y轴固定,让内容滚动type: 'slider',xAxisIndex: [0],show:true, //显示滚轴height:8, //设置滚轴的高度bottom:0, //设置滚轴在底部start: 0,end: 80,//设置X轴刻度之间的间隔(根据数据量来调整)zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)minValueSpan:0,//用于限制窗口大小的最小值（实际数值）。maxValueSpan:7,//用于限制窗口大小的最大值（实际数值）。realtime:true,//拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新showDetail: false,//即拖拽时候滚动条两侧不显示信息 默认truefilterMode:'empty' // 溢出窗口数据隐藏        },          ],

效果
完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 450px;height:300px;"></div></body><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script><script type="text/javascript">var xArr = ['横坐标1','横坐标2','横坐标3','横坐标4','横坐标5','横坐标6','横坐标7','横坐标8','横坐标9','横坐标10','横坐标13','横坐标14','横坐标15','横坐标16','横坐标17','横坐标18','横坐标19','横坐标26','横坐标27','横坐标28']var dataArr = [100, 600, 300, 100, 250, 500,400,449,600, 600, 300, 100, 250, 500,400,149,201,332,123,455];// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {backgroundColor: '#ffffff',title: {text: '测试统计表',subtext: '这是一个测试统计表',x: 'center'},tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},dataZoom:[{ //y轴固定,让内容滚动type: 'slider',xAxisIndex: [0],show:true, //显示滚轴height:8, //设置滚轴的高度bottom:0, //设置滚轴在底部start: 0,end: 80,//设置X轴刻度之间的间隔(根据数据量来调整)zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)minValueSpan:0,//用于限制窗口大小的最小值（实际数值）。maxValueSpan:7,//用于限制窗口大小的最大值（实际数值）。realtime:true,//拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新showDetail: false,//即拖拽时候滚动条两侧不显示信息 默认truefilterMode:'empty' // 溢出窗口数据隐藏       },          ],xAxis: [{type: 'category',data: xArr,axisTick: {alignWithLabel: true},axisLabel: {margin: 10,color: '#a4a4a4',interval: 0,},axisLine: {show: false},axisTick: {show: false}}],yAxis: [{type: 'value',axisLabel: {color: '#a4a4a4',},axisLine: {show: true},axisTick: {show: true},splitLine: {show: true}}],series: [{name: '',type: 'bar',barWidth: '20px',data: dataArr,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 1,color: 'rgba(102,159,239,1)'}, {offset: 0,color: 'rgba(170,202,246,1)' }], )}},}]};    // 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</html>

echarts 添加滚动轴相关推荐

如何使用echarts给y轴x轴添加单位
如何使用echarts给y轴x轴添加单位 y轴每个单位刻度加单位使用 y轴顶部设置单位 x轴添加单位 y轴每个单位刻度加单位使用 yAxis: [{ type: 'value',axisLabel: ...
总结整理Echarts双y轴曲线图（全）
最近因为项目需要,用到了Echarts,自己学习了相关东西,也参考了一些文件,最终把双y轴曲线图实现了,跟大家分享一下.下面是最终需要的效果图: 不多说了,直接上代码!O(∩_∩)O哈哈~ ----- ...
echart 横坐标文字太长时，添加滚动拉条
选项里添加: dataZoom: [ { type: "slider", show: true, xAxisIndex: [0], //X轴添加滚动拉条 left: "0 ...
html上div加滑轮,css如何实现给div添加滚动并隐藏滚动条
css 给div添加滚动并隐藏滚动条 ,具体代码如下所示: 在html中下面内容会单独滚动 1111111111111111 222222222222222 333333333333333 4444 ...
echarts的x轴标签重叠解决
1:Echarts X 轴标签倾斜摆放 axisLabel: {// X 坐标轴标签相关设置,写在xAxis里面interval: 0,//全部标签显示rotate: '45'//标签倾斜度数} 2 ...
vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...
R语言plotly可视化：plotly可视化分组归一化直方图(historgram)并在直方图中添加密度曲线kde、并在直方图的底部部边缘使用geom_rug函数添加边缘轴须图
R语言plotly可视化:plotly可视化分组归一化直方图(historgram)并在直方图中添加密度曲线kde.并在直方图的底部部边缘使用geom_rug函数添加边缘轴须图Marginal rug ...
R语言plotly可视化：plotly可视化互相重叠的归一化直方图并在直方图中添加密度曲线kde、设置不同的直方图使用不同的分箱大小（bin size）、在直方图的边缘添加边缘轴须图
R语言plotly可视化:plotly可视化互相重叠的归一化直方图并在直方图中添加密度曲线kde.设置不同的直方图使用不同的分箱大小(bin size).在直方图的边缘添加边缘轴须图Marginal ...
使用Pandas的rolling函数计算滚动平均值（rolling average with Pandas rolling）、seaborn使用lineplot函数可视化时间序列数据、并添加滚动平均值
使用Pandas的rolling函数计算滚动平均值(rolling average with Pandas rolling).seaborn使用lineplot函数可视化时间序列数据(time ser ...

echarts 添加滚动轴

echarts 添加滚动轴相关推荐

最新文章

热门文章