echarts 柱形图自动循环滚动

转载https://blog.csdn.net/qq_34720531/article/details/120880230<!DOCTYPE html><htm

Kevin-anycode

6450人浏览 · 2022-05-24 12:30:00

Kevin-anycode · 2022-05-24 12:30:00 发布

转载
https://blog.csdn.net/qq_34720531/article/details/120880230

<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-gradient
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>
			<!-- 新版echarts -->
        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
      
        <script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};

			var option;

			// prettier-ignore
			let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
			// prettier-ignore
			let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
			let yMax = 500;
			let dataShadow = [];
			for (let i = 0; i < data.length; i++) {
			  dataShadow.push(yMax);
			}
			option = {
			  title: {
				text: '特性示例：渐变色 阴影 点击缩放',
				subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
			  },
			  xAxis: {
				data: dataAxis,
			   
				axisLabel: {
				  inside: true,
				  interval: 0,
				  // 文字竖排
				  formatter: function(value) {
					return value.split('').join('\n')
				  },
				  color: '#fff'
				},
				axisTick: {
				  show: false
				},
				axisLine: {
				  show: false
				},
				z: 10
			  },
			  yAxis: {
				axisLine: {
				  show: false
				},
				axisTick: {
				  show: false
				},
				axisLabel: {
				  color: '#999'
				}
			  },
			  dataZoom: [
				{
					xAxisIndex: 0,// 这里是从X轴的0刻度开始
					show: false, // 是否显示滑动条，不影响使用
					type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
					startValue: 0, // 从头开始。
					endValue: 10, // 一次性展示多少个。
				},
			  ],
			  series: [
				{
				  type: 'bar',
				  showBackground: true,
				  itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					  { offset: 0, color: '#83bff6' },
					  { offset: 0.5, color: '#188df0' },
					  { offset: 1, color: '#188df0' }
					])
				  },
				  emphasis: {
					itemStyle: {
					  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: '#2378f7' },
						{ offset: 0.7, color: '#2378f7' },
						{ offset: 1, color: '#83bff6' }
					  ])
					}
				  },
				  data: data
				}
			  ]
			};
			// 双击放大，或滚动放大缩小
			// const zoomSize = 6;
			// myChart.on('click', function (params) {
			//   console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
			//   myChart.dispatchAction({
			// 	type: 'dataZoom',
			// 	startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
			// 	endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
			//   });
			// });

			if (option && typeof option === 'object') {
				myChart.setOption(option);
				// 定时自动滚动
				setInterval(function(){
					if (option.dataZoom[0].endValue == data.length ) {
					  option.dataZoom[0].endValue = 10;
					  option.dataZoom[0].startValue = 0;
					} else {
					  option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
					  option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
					}
					myChart.setOption(option);
				}, 2000)
			}

        </script>
    </body>
</html>