echarts設置柱狀圖柱狀圖粗細大小

時間 2021-08-13

標籤 javascript css html java jquery echarts dom ide code orm 欄目 JavaScript 简体版

原文原文鏈接

主要屬性：javascript

　 //設置柱狀圖大小
					barWidth: 20,

demo:css

<!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>