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

主要属性:

  //设置柱状图大小
					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>
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值