提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

31Echarts - 柱状图（特性示例：渐变色 阴影 点击缩放）

示例 特性 点击 缩放 柱状图 阴影 渐变色
2023-09-11 14:15:43 时间

效果图

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;

			var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
			var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
			var yMax = 500;
			var dataShadow = [];

			for(var 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,
						textStyle: {
							color: '#fff'
						}
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					z: 10
				},
				yAxis: {
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						textStyle: {
							color: '#999'
						}
					}
				},
				dataZoom: [{
					type: 'inside'
				}],
				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
					}
				]
			};

			// Enable data zoom when user click bar.
			var 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)]
				});
			});
			myChart.setOption(option);
		</script>
	</body>

</html>

相关文章