echarts设置柱状图柱状图粗细大小

王小婷

发布于 2025-05-19 13:18:43

32700

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

主要属性：

　 //设置柱状图大小
					barWidth: 20,

demo:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>柱状图大小</title>
		<!-- 引入 echarts.js -->
		<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/jquery-1.8.0.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'));
			// 指定图表的配置项和数据
			myChart.setOption({
				title: {
					text: '柱状图'
				},
				tooltip: {},
				legend: {
					data: ['销量']
				},
				xAxis: {
					data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					　 //设置柱状图大小
					barWidth: 20,
					//设置柱状图渐变颜色
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: "#1268f3" // 0% 处的颜色
							}, {
								offset: 0.6,
								color: "#08a4fa" // 60% 处的颜色
							}, {
								offset: 1,
								color: "#01ccfe" // 100% 处的颜色
							}], false)
						}
					},
					data: ["1", "2", "3", "4", "5", "2", "3", "4", "3"]
				}]
			});
		</script>
	</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除

图表