echars 日历饼图



	//日历饼图
 var myChart = echarts.init(document.getElementById('container'));
var cellSize = [106, 106];  //日历大少
var pieRadius = 44;  //饼图大小
var app = {};
var incomclass=[[{name:"药费",value:900},
								{name:"检查","value":1212},
								{name:"治疗","value":343},
								{name:"手术","value":345},
								{name:"材料","value":156},
								{name:"其他","value":67}],
							[{name:"药费","value":421},
								{name:"检查","value":800},
								{name:"治疗","value":343},
								{name:"手术","value":345},
								{name:"材料","value":156},
								{name:"其他","value":67}],
							[{name:"药费","value":421},
								{name:"检查","value":800},
								{name:"治疗","value":343},
								{name:"手术","value":345},
								{name:"材料","value":156},
								{name:"其他","value":67}],
							[{name:"药费","value":421},
								{name:"检查","value":800},
								{name:"治疗","value":343},
								{name:"手术","value":345},
								{name:"材料","value":156},
								{name:"其他","value":67}],
							[{name:"药费","value":421},
								{name:"检查","value":800},
								{name:"治疗","value":343},
								{name:"手术","value":345},
								{name:"材料","value":156},
								{name:"其他","value":67}],
							[{name:"药费","value":421},
								{name:"检查","value":800},
								{name:"治疗","value":343},
								{name:"手术","value":345},
								{name:"材料","value":156},
								{name:"其他","value":67}],
							[{name:"药费","value":421},
								{name:"检查","value":800},
								{name:"治疗","value":343},
								{name:"手术","value":345},
								{name:"材料","value":156},
								{name:"其他","value":67}]]



//获取日历显示的日期范围
	function getVirtulData() {
		var date = +echarts.number.parseDate('2020-06-01');
		var end = +echarts.number.parseDate('2020-06-13');
		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 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();
var option = {
				tooltip: {
					trigger: 'item',
			        formatter: "{b} : {c} ({d}%)"
				},
				legend: {
					data: ['药费', '检查', '治疗','材料', '手术', '其他'],
					top: 20
				},
				calendar: {
					top: 'middle',
					left: 'center',
					orient: 'vertical',
					cellSize: cellSize,
					yearLabel: {
						show: false,
					},
					dayLabel: {
						show:false
					},
					monthLabel: {
						  show: false
					},
					range: ['2020-06-01', '2020-06-12']
				},
				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
				}]
			};


			function getPieSeries(scatterData, chart) {
				var i = 0;
				return echarts.util.map(scatterData, function (item, index) {
					var center = chart.convertToPixel('calendar', item);
					var pieData = incomclass[i]
					i = i+ 1;
					return {
						id: index + 'pie',
						type: 'pie',
						center: center,
						label: {
							normal: {
								formatter: '{b}',
								fontSize:10,
								position: 'inside'
							}
						},
						radius: pieRadius,
						data:pieData
					};
				});
			}
			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);

			// 刷新调整
			window.onresize = function () {
				myChart.resize();
			}
			 

 
		 <div class="row"> 
			<div class="col-lg-7 col-md-7"> 
				 <div class="card"   data-background="color" data-color="grey"> 
					<div class="chart" style="min-height: 360px; " id="container"  >div>
				 div> 
			 div> 
		 div> 

你可能感兴趣的:(echars)