echarts柱狀圖實現顏色漸變效果

時間 2021-08-15

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

原文原文鏈接

先上圖
最近要求實現一個數據統計的界面，就是那種不少個統計圖在一個界面顯示，而且要作出十分炫酷的效果，必然會用到了漸變風格的設置屬性。寫一個小的demo：javascript

<!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","1", "2", "3", "4", "3"]
				},
				yAxis: {},
				series: [{
					name: '銷量',
					type: 'bar',
					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","1", "2", "3", "4", "3"]
				}]
			});
		</script>
	</body>
</html>