提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

65Echarts - 饼图（Calendar Pie）

calendar PIE
2023-09-11 14:15:43 时间

效果图

在这里插入图片描述

源代码

<!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 cellSize = [80, 80];
			var pieRadius = 30;

			function getVirtulData() {
				var date = +echarts.number.parseDate('2017-02-01');
				var end = +echarts.number.parseDate('2017-03-01');
				var dayTime = 3600 * 24 * 1000;
				var data = [];
				for(var time = date; time < end; time += dayTime) {
					data.push([
						echarts.format.formatTime('yyyy-MM-dd', time),
						Math.floor(Math.random() * 10000)
					]);
				}
				return data;
			}

			function getPieSeries(scatterData, chart) {
				return echarts.util.map(scatterData, function(item, index) {
					var center = chart.convertToPixel('calendar', item);
					return {
						id: index + 'pie',
						type: 'pie',
						center: center,
						label: {
							normal: {
								formatter: '{c}',
								position: 'inside'
							}
						},
						radius: pieRadius,
						data: [{
								name: '工作',
								value: Math.round(Math.random() * 24)
							},
							{
								name: '娱乐',
								value: Math.round(Math.random() * 24)
							},
							{
								name: '睡觉',
								value: Math.round(Math.random() * 24)
							}
						]
					};
				});
			}

			function getPieSeriesUpdate(scatterData, chart) {
				return echarts.util.map(scatterData, function(item, index) {
					var center = chart.convertToPixel('calendar', item);
					return {
						id: index + 'pie',
						center: center
					};
				});
			}

			var scatterData = getVirtulData();

			option = {
				tooltip: {},
				legend: {
					data: ['工作', '娱乐', '睡觉'],
					bottom: 20
				},
				calendar: {
					top: 'middle',
					left: 'center',
					orient: 'vertical',
					cellSize: cellSize,
					yearLabel: {
						show: false,
						textStyle: {
							fontSize: 30
						}
					},
					dayLabel: {
						margin: 20,
						firstDay: 1,
						nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
					},
					monthLabel: {
						show: false
					},
					range: ['2017-02']
				},
				series: [{
					id: 'label',
					type: 'scatter',
					coordinateSystem: 'calendar',
					symbolSize: 1,
					label: {
						normal: {
							show: true,
							formatter: function(params) {
								return echarts.format.formatTime('dd', params.value[0]);
							},
							offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
							textStyle: {
								color: '#000',
								fontSize: 14
							}
						}
					},
					data: scatterData
				}]
			};

			if(!app.inNode) {
				var pieInitialized;
				setTimeout(function() {
					pieInitialized = true;
					myChart.setOption({
						series: getPieSeries(scatterData, myChart)
					});
				}, 10);

				app.onresize = function() {
					if(pieInitialized) {
						myChart.setOption({
							series: getPieSeriesUpdate(scatterData, myChart)
						});
					}
				};
			}
			myChart.setOption(option);
		</script>
	</body>

</html>

相关文章