echarts 日历图

下定决心，好好过一天 ~

var app = {};var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
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'); //日期结束console.log(date)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)]);}console.log(data)return data;
}function getPieSeries(scatterData, chart) {return scatterData.map(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 scatterData.map(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,fontSize: 30},dayLabel: {margin: 20,firstDay: 1,nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']},monthLabel: {show: false},range: ['2017-02']},series: [{id: 'label',type: 'scatter',coordinateSystem: 'calendar',symbolSize: 1,label: {show: true,formatter: function (params) {return echarts.format.formatTime('dd', params.value[0]);},offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],fontSize: 14},data: scatterData}]
};var pieInitialized;
setTimeout(function () {pieInitialized = true;myChart.setOption({series: getPieSeries(scatterData, myChart)});
}, 10);app.onresize = function () {if (pieInitialized) {myChart.setOption({series: getPieSeriesUpdate(scatterData, myChart)});}
};option && myChart.setOption(option);

echarts 日历图相关推荐

改编Echarts 日历图
改写Echarts 日历图表,可根据时间选择对应时间段 1.html <div id="divData"><div class="panel panel ...
echarts 日历图calender
1.主要配置var option = {visualMap: { 方便控制日历图每个单元的显示样式...},calendar: {id:'',range: '2017' 某一年 '2017-02' 某 ...
小例子：在 ECharts 中实现日历图
在 ECharts 发布的 3.5 版本中,新增了日历坐标系,用于在日历中绘制图表.如何快速写出一个日历图呢? 通过以下三个步骤即可实现上述效果: 第一步:引入js文件下载的最新完整版本 echa ...
使用 Apache ECharts 实现圣都装饰的延期日历图
使用 Apache ECharts 实现圣都装饰的延期日历图用户需求: 最近朋友选择圣都装饰公司来装修房子,结果公司管理混乱,延期严重,让我帮忙设计一个类似 github 的日历图,方便更直观的查看 ...
ECharts - 14.小例子：实现日历图
小例子:实现日历图在ECharts中,我们新增了日历坐标系,如何快速写出一个日历图呢? 通过以下三个步骤即可实现上述效果: 第一步:引入js文件下载的最新完整版本echarts.min.js即可, ...
vue+echarts封装日历图
前端可视化封装日历图 html <template><divref="calendar":style="{ width: `${width}px`, h ...
echarts 日历热度图设置 calendar
echarts 日历热度图设置 calendar Calendar Option option: {color: this.$CHART_OPTION.COLOR,legend:{top: 10,le ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...

echarts 日历图

echarts 日历图相关推荐

最新文章

热门文章