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>