53Echarts - 柱狀圖（Watermark - ECharts Download）

時間 2021-08-15
標籤 javascript html java git github canvas markdown echarts dom ide 欄目 JavaScript 简体版
原文原文鏈接
效果圖

源代碼

<!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 builderJson = {
				"all": 10887,
				"charts": {
					"map": 3237,
					"lines": 2164,
					"bar": 7561,
					"line": 7778,
					"pie": 7355,
					"scatter": 2405,
					"candlestick": 1842,
					"radar": 2090,
					"heatmap": 1762,
					"treemap": 1593,
					"graph": 2060,
					"boxplot": 1537,
					"parallel": 1908,
					"gauge": 2107,
					"funnel": 1692,
					"sankey": 1568
				},
				"components": {
					"geo": 2788,
					"title": 9575,
					"legend": 9400,
					"tooltip": 9466,
					"grid": 9266,
					"markPoint": 3419,
					"markLine": 2984,
					"timeline": 2739,
					"dataZoom": 2744,
					"visualMap": 2466,
					"toolbox": 3034,
					"polar": 1945
				},
				"ie": 9743
			};

			var downloadJson = {
				"echarts.min.js": 17365,
				"echarts.simple.min.js": 4079,
				"echarts.common.min.js": 6929,
				"echarts.js": 14890
			};

			var themeJson = {
				"dark.js": 1594,
				"infographic.js": 925,
				"shine.js": 1608,
				"roma.js": 721,
				"macarons.js": 2179,
				"vintage.js": 1982
			};

			var waterMarkText = 'ECHARTS';

			var canvas = document.createElement('canvas');
			var ctx = canvas.getContext('2d');
			canvas.width = canvas.height = 100;
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.globalAlpha = 0.08;
			ctx.font = '20px Microsoft Yahei';
			ctx.translate(50, 50);
			ctx.rotate(-Math.PI / 4);
			ctx.fillText(waterMarkText, 0, 0);

			option = {
				backgroundColor: {
					type: 'pattern',
					image: canvas,
					repeat: 'repeat'
				},
				tooltip: {},
				title: [{
					text: '在線構建',
					subtext: '總計 ' + builderJson.all,
					x: '25%',
					textAlign: 'center'
				}, {
					text: '各版本下載',
					subtext: '總計 ' + Object.keys(downloadJson).reduce(function(all, key) {
						return all + downloadJson[key];
					}, 0),
					x: '75%',
					textAlign: 'center'
				}, {
					text: '主題下載',
					subtext: '總計 ' + Object.keys(themeJson).reduce(function(all, key) {
						return all + themeJson[key];
					}, 0),
					x: '75%',
					y: '50%',
					textAlign: 'center'
				}],
				grid: [{
					top: 50,
					width: '50%',
					bottom: '45%',
					left: 10,
					containLabel: true
				}, {
					top: '55%',
					width: '50%',
					bottom: 0,
					left: 10,
					containLabel: true
				}],
				xAxis: [{
					type: 'value',
					max: builderJson.all,
					splitLine: {
						show: false
					}
				}, {
					type: 'value',
					max: builderJson.all,
					gridIndex: 1,
					splitLine: {
						show: false
					}
				}],
				yAxis: [{
					type: 'category',
					data: Object.keys(builderJson.charts),
					axisLabel: {
						interval: 0,
						rotate: 30
					},
					splitLine: {
						show: false
					}
				}, {
					gridIndex: 1,
					type: 'category',
					data: Object.keys(builderJson.components),
					axisLabel: {
						interval: 0,
						rotate: 30
					},
					splitLine: {
						show: false
					}
				}],
				series: [{
					type: 'bar',
					stack: 'chart',
					z: 3,
					label: {
						normal: {
							position: 'right',
							show: true
						}
					},
					data: Object.keys(builderJson.charts).map(function(key) {
						return builderJson.charts[key];
					})
				}, {
					type: 'bar',
					stack: 'chart',
					silent: true,
					itemStyle: {
						normal: {
							color: '#eee'
						}
					},
					data: Object.keys(builderJson.charts).map(function(key) {
						return builderJson.all - builderJson.charts[key];
					})
				}, {
					type: 'bar',
					stack: 'component',
					xAxisIndex: 1,
					yAxisIndex: 1,
					z: 3,
					label: {
						normal: {
							position: 'right',
							show: true
						}
					},
					data: Object.keys(builderJson.components).map(function(key) {
						return builderJson.components[key];
					})
				}, {
					type: 'bar',
					stack: 'component',
					silent: true,
					xAxisIndex: 1,
					yAxisIndex: 1,
					itemStyle: {
						normal: {
							color: '#eee'
						}
					},
					data: Object.keys(builderJson.components).map(function(key) {
						return builderJson.all - builderJson.components[key];
					})
				}, {
					type: 'pie',
					radius: [0, '30%'],
					center: ['75%', '25%'],
					data: Object.keys(downloadJson).map(function(key) {
						return {
							name: key.replace('.js', ''),
							value: downloadJson[key]
						}
					})
				}, {
					type: 'pie',
					radius: [0, '30%'],
					center: ['75%', '75%'],
					data: Object.keys(themeJson).map(function(key) {
						return {
							name: key.replace('.js', ''),
							value: themeJson[key]
						}
					})
				}]
			}

			myChart.setOption(option);
		</script>
	</body>

</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。