echarts条形图添加滚动条

已于 2024-02-02 09:53:56 修改
阅读量1.2k 收藏 8
点赞数 12
文章标签： echarts 前端 javascript
于 2024-01-30 14:56:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53769810/article/details/135933066
版权

效果展示:
在这里插入图片描述
测试数据:

taskList:[{majorDeptName:'测试',finishCount:54,notFinishCount:21},
{majorDeptName:'测试',finishCount:54,notFinishCount:21},
{majorDeptName:'测试',finishCount:54,notFinishCount:21},
{majorDeptName:'测试',finishCount:54,notFinishCount:21},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},]

代码如下:

   initBarchart(){
          this.barChart = this.$echarts.init(this.$refs.barChart);
        let finishData = [];
        let unFinishData = []
	      let chartName = [];
      if (  this.taskList && this.taskList.length > 0) {
          this.taskList.forEach(item => {
          chartName.push(item.majorDeptName)  
          finishData.push(item.finishCount)
          unFinishData.push(item.notFinishCount)
          })
      }
    
	let max = Math.max.apply(null,finishData.concat(unFinishData));
	let emptyData = finishData.map(function(v, i) {
     let item = {
         value: max,
         label: {   
             formatter: '{a|' + v + '}',
             position: 'right',
           
             rich: {
                 a: {
                     color:'#BFF4FF',
                     fontSize:14,
                     padding:[5, 10]
                 }
             }
         }
     }
     return item
	});
	let emptyData2 = unFinishData.map(function(v, i) {
     let item = {
         value: max,
         label: {  
             formatter: '{a|' + v + '}',
             position: 'right',
             rich: {
                 a: {
                     color:'#BFF4FF',
                     fontSize:14,
                     padding:[5, 10]
                 }
             }
         }
     }
     return item
	});
const barGap = '80%'
	let option = {
       tooltip: {
		    show: true,
		    trigger: 'item',
		},
            
        legend: {
          data: ['已完成','未完成'],
          right:'5%',
          //  itemWidth:15, 
          textStyle:{
          color:'#fff'
        },
        },
       grid: {
           top: '10%',
           right: '15%',
           left: '10%',
           bottom: '5%',
           containLabel: true    
       },
	    xAxis: [
		    {
	            type : 'value',
              position: 'top',
                name: '/个',
	            axisLabel:{      //坐标轴字体颜色
	            	show:false,
	            },
	            axisLine:{
	            	show:false,
	            	lineStyle: {
		                  color: "#218BA0",
		            }
	            },
		        axisTick:{       //y轴刻度线
		            show:false
		        },
	            splitLine:{    //网格
	            	show: false,
	            },
	            max: function(value) {
		            return value.max
		        },
		    }
        ],
	    yAxis: [{
	        type: 'category',
	        data:chartName,
            inverse: true,
	        axisTick:{       //y轴刻度线
	           show:false,
             
	        },

	        axisLabel: {
	            formatter: '{value}',
	            color: '#218BA0',
	            fontSize:14
	        },
        	axisLine: {
        		show:false,
	        },
	        splitLine: {
	            show:false
	        },
	    },
	    {
	        type: "category",
	        name: "",
	        axisTick: {
	            show: false,
               
	        },
	        splitLine: {
	            show: false
	        },
	        axisLabel: {
	            show: false,
	        },
	        axisLine: {
	            show: false
	        },
	        inverse: true,
	        data: chartName
	    }],
	    series: [
	       	{
	            type: 'bar',
              show: true,
	            barWidth: '18%',
	                yAxisIndex: 0,
               barGap,
            	silent:true,
	            itemStyle: {
	                normal: {
	                    color: '#11353d',
	                }
	            },
	            label: {
	                show:true,
	            },
	            data: emptyData
	        },
	        {
	            show: true,
	            type: 'bar',
                barGap,
                 yAxisIndex: 1,
	            barWidth: '18%',
                 name:'已完成',
	            z: 2,
	            label: {
                show: false,
            },
	            itemStyle: {
			      		normal: {
		                color: '#03bae2',
		                barBorderRadius: [0,0],
		            }
	            },
	            data: finishData,
	       	},
	       		{
	            type: 'bar',
                show: true,           
	            barWidth: '18%',
              barGap,
	            yAxisIndex: 0,
            	silent:true,
	            itemStyle: {
	                normal: {
	                    color: '#11353d',
	                    barBorderRadius: [0,0],
	                }
	            },
	            label: {
	                show:true,
	            },
	            data: emptyData2
	        },
	        {
	            show: true,
	            type: 'bar',
	            barWidth: '18%',
              barGap,
                   yAxisIndex: 1,
              name:'未完成',
	            z: 2,
	            label: {
	                show: false,
	            },
	            itemStyle: {
				      	normal: {
		                color:'#e27903' ,
		                barBorderRadius: [0,0],
		            }
	            },
	            data: unFinishData,
	       	}
	    ],
        dataZoom: [
  {
                    yAxisIndex:[0,1],//这里是从X轴的0刻度开始
                    show: false,//是否显示滑动条，不影响使用
                    weight:2,
                    type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    startValue: 0,
                    endValue: 3, 
                    zoomOnMouseWheel: false,  // 关闭滚轮缩放
                    moveOnMouseWheel: true, // 开启滚轮平移
                    moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                },
               {
                   yAxisIndex: [0,1],//这里是从X轴的0刻度开始
                    show: false,//是否显示滑动条，不影响使用
                    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    fillerColor: "#0089d1", // 滚动条颜色
                    borderColor: "rgba(17, 100, 210, 0.1)",
                    zoomLock:true, // 是否只平移不缩放
                    handleSize:10, // 两边手柄尺寸
                    width:8,
                    heigh:8,
                
                    bottom: 2,
                    backgroundColor: 'rgba(255,255,255,.4)',
                    brushSelect:false,
                    showDetail:false,
                    showDataShadow:false
                }

  ],
         
	};
   if (  this.taskList && this.taskList.length > 4) {
      option.dataZoom[0].show = true
        option.dataZoom[1].show = true
     }
    this.barChart.setOption(option)
    },
378420亿千米
关注
echarts设置滚动条或鼠标拖动滚动
weixin_47375788的博客
08-12 1363
页面空间有限,数据无法完全展示,或者展示内容又被隐藏,或者间隔展示时,可以通过添加dataZoom配置 来优化页面体验。：页面直接显示滚动条, 让用户可以拖动展示-柱状图为例。：页面不展示滚动条, 直接操作鼠标即可拖动数据展示。如果想自定义切换按钮可以在graphic中添加样式。
echarts 图表的滚动条
LILEILEILOVE的博客
09-23 1557
const dataZoom = [{ show:true, zoomLock:false,//禁止拉伸 height:8, xAxisIndex:[0], bottom:10, startValue:0, endValue:10, handleIcon:'', handleSize:'100%', handleStyle:{ color:'#bbbbbb', shadowColor:'', shadowBlur:5, }, backgroundColor:'#rgba(222,222,222,.5)',
Echarts鼠标控制滚动以及自动滚动
最新发布
欢迎来到我的技术小天地！我是一名热爱探索的前端程序员。 在这里，你将走进前端开发的奇妙世界。我会分享前端技术的最新趋势与实践心得.
08-16 722
在上述配置中，我们将toolbox的feature配置中的dataZoom的yAxisIndex设置为'none'，表示鼠标控制滚动只控制x轴。然后通过dataZoom配置中的type:'slider'来显示滚动条，设置xAxisIndex为[0]表示只控制第一个x轴，zoomLock设置为true表示禁止通过鼠标拖拽来缩放。对于自动滚动，可以使用Echarts的dataZoom组件和定时器来实现。对于鼠标控制滚动，可以使用Echarts的toolbox组件来实现。以上代码将会每4秒滚动一次。
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
共同学习，共同成长
06-08 8531
​以柱状图为例子，当数据过多时，echarts图就会堆叠在一起，看起来十分难看。通常解决办法是通过减小barWidth值来缩小柱子宽度，但是若数据达到上百条，这场面是相当壮观。另一个很常用的就是在外部容器div添加overflow: scroll;，这确实能解决一些问题，但是若是数据量过少，就会显的非常稀疏，经历过的都懂。言归正传，以上都不是最佳解决方式，echarts其实已经为提供好相应的API配置了，无论是横向滚动还是纵向滚动，dataZoom都能满足。
echarts加滚动条/自动滚动
2301_76634106的博客
09-18 3382
【代码】echarts加滚动条/自动滚动。
echarts柱状图（条形图）数据过大添加滚动条，label数据过长换行，自带loading，主副标题一行显示等等的一些配置，个人简单记录下
全栈科学家的博客
12-20 1490
echarts柱状图（条形图）数据过大添加滚动条，label数据过长换行，自带loading，主副标题一行显示等等的一些配置，个人简单记录下
vue之echart表中datazoom配置用于左右滚动
牛先森家的博客
01-25 2234
dataZoom: [ { // start: 0, //默认为0 // end: 100 - 1500 / 31, //默认为100 endValue: 7, // 一次性展示7个。 type: "slider", show: true, xAxisIndex: [0], handleSize: 0, //滑动条的 左右
echarts条形图动态显示
qq_43840793的博客
07-12 833
为了使左侧的类目和柱子同步变化，左侧类目不写成y轴标签，而写成柱子的标签，即在series里写标签。条形图有两个柱子，一个蓝色柱子，一个灰色柱子，两个柱子重合，且蓝柱子在上面。使用datazoom,一次展示5项数据，轮流展示每2s刷新一次。每次展示5个，轮流展示。
echarts柱状图滚动条两端椭圆
11-15
根据提供的引用内容，没有直接提到如何在ECharts柱状图中添加滚动条两端椭圆的信息。不过，我们可以通过ECharts官方文档中的示例来了解如何实现这个功能。 在ECharts官方文档中，有一个名为“堆叠条形图”的示例，...
实现滚动轮改变多数据的echarts图表
长缨缚苍龙
08-24 212
<div ref="barEcharts"></div> // 添加滚轮事件 let gap = (deltaGap) => { let start = Number(this.lfBarZoomNumStart); let end = Number(this.lfBarZoomNumEnd); if (deltaGap > 0) { if (end != 100) { if (end +
echarts饼图与柱状图联动展示
hongyi_8848的博客
07-07 3213
效果描述：点击左侧饼图动态更新右侧柱状图数据，维度多时增加滚动条 <div id="operationTimeSettingChartPieBox" class="chart-box"></div> <span>手术时长与各维度相关性分析</span> <div id="operationTimeSettingChartBarBox" class="chart-box"></div> <span>单一维度平均手术
ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条
04-12
ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条
可视化绘图技巧100篇基础篇（三）-条形图(一)
getusushu的博客
08-19 292
（Bar Chart），又称之为。
echarts增加滚动条功能
weixin_45458830的博客
11-28 1568
echarts图表刻度整十整百处理算法---终极版。这个算法写的很妙，值得纪念一下。
Echarts实现横向和纵向滚动条、dataZoom及其滚动条设置
林中明月间丶
05-06 3096
echart没有滚动条概念，有配置选项类似滚动条，通过手段模拟滚动条效果....省略很多字（难）
Echarts柱形图 设置滚动条
Beth__hui的博客
07-17 1万+
Echarts具有自适应的功能，因此当x轴的数据非常多的时候，会自动把柱形的宽度挤的非常细，这样的交互肯定是过不去的。 因此就需要有这样一个属性： dataZoom 想要读详细文档的同学，可以看官方文档：https://echarts.baidu.com/option.html#dataZoom 只是想要简单版的同学，看我的这个简易版本即可： 这就是一个最简单的柱形图，带横向滚动条版本。 opti...
Echarts滚动条
雩风季白的博客
11-04 4035
Echarts图表数据过长增加滚动条效果，并且可以用鼠标滚轮滚动 dataZoom:[//x轴滑动条 { type: 'slider', show: true, xAxisIndex: [0], start: 0, //初始化时，滑动条宽度开始标度 bottom: '7%', end: 45, height: 10, fillerColor:'#3E86FF', borderColor: "transparent", backgroundColor: 'w
实现echarts图表滚动，设置自定义滚动条
热门推荐
mango的博客
03-11 2万+
echarts自带的dataZoom设置后触发的鼠标滚轮滚动事件会放大缩小echarts图表本身，而不是我们想要的图表滚动效果。 并且要实现自定义滚动条还是需要自己设置的滚动条用得舒服。通过dataZoom配置项设置很是麻烦。 于是想出了通过内嵌高度溢出的图表，外层使用高度固定的div来设置滚动条。 &lt;el-scrollbar style="height:235px;"&gt; ...
echarts 图表设置 滚动条
zhang_zan
08-10 5177
echarts图表设置滚动条
echarts条形图进条设置样式
04-24
好的，关于echarts条形图设置样式的问题，这里提供一种常见的做法，请参考以下代码： ```javascript option = { xAxis: { data: ['A', 'B', 'C', 'D', 'E'], axisLabel: { textStyle: { color: 'black', //...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值