效果圖

源代碼

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)});}}; }

總結

以上是生活随笔為你收集整理的186Echarts - 日历坐标系（Calendar Pie）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。