186Echarts - 日历坐标系（Calendar Pie）

效果图

源代码

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）相关推荐

Pyecharts之日历图(Calendar)
Pyecharts之日历图(Calendar) 一.基本概念 class pyecharts.charts.Calendar class Calendar(init_opts: opts.InitOp ...
c linux time微秒_Python时间处理模块：time模块、datetime模块及日历模块Calendar
无论是那一个开发语言进行开发,时间的处理都是非常重要的,正确的处理时间是一个程序员开发中必备的技能,特别是对时间精度要求比较高,或者是要分清楚本地时间和服务器时间的这些业务要求,今天就来讲一讲Pyth ...
2019日历全年一张_python 日历模块calendar
calendar #打印2019年的日历x= calendar.calendar(2019)print(x) #打印全年日历 calendar.prcal(2019) # 打印月份 c = calen ...
java中实现工厂日历_Java Calendar实现控制台日历
public static void main(String[] args) throws IOException { //初始化日历对象 Calendar calendar = Calendar.g ...
php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤本日历插件支持cmd模块化如下调用:xvDate( ...
Python学习八：pip 最常用命令、pip升级、pip 清华大学开源软件镜像站、Python日期和时间（Time模块、日历（Calendar）模块）
pip 是 Python 包管理工具,该工具提供了对Python 包的查找.下载.安装.卸载的功能. 注意:Python 2.7.9 + 或 Python 3.4+ 以上版本都自带 pip 工具. p ...
python日历模块_python 日历模块calendar
calendar #打印2019年的日历 x= calendar.calendar(2019) print(x) #打印全年日历 calendar.prcal(2019) # 打印月份 c = cal ...
41.从入门到精通：格式化日期获取某月日历 Time 模块日历（Calendar）模块其他相关模块和函数
41.从入门到精通:格式化日期获取某月日历 Time 模块日历(Calendar)模块其他相关模块和函数格式化日期获取某月日历 Time 模块日历(Calendar)模块其他相关模块和函 ...
Java 日历类 Calendar
Java 日历类 Calendar 1.java.util.Calendar(日历)类 1.java.util.Calendar(日历)类 Calendar是一个抽象基类,==主要用于完成日期字段之间 ...

186Echarts - 日历坐标系（Calendar Pie）

效果图

源代码

186Echarts - 日历坐标系（Calendar Pie）相关推荐

最新文章

热门文章