187Echarts - 日历坐标系(Simple Calendar)

简介: 187Echarts - 日历坐标系(Simple Calendar)
效果图

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="dist/extension/dataTool.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 1024px;height:768px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var option;
function getVirtulData(year) {
    year = year || '2017';
    var date = +echarts.number.parseDate(year + '-01-01');
    var end = +echarts.number.parseDate(year + '-12-31');
    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;
}
option = {
    visualMap: {
        show: false,
        min: 0,
        max: 10000
    },
    calendar: {
        range: '2017'
    },
    series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: getVirtulData(2017)
    }
};
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
192Echarts - 自定义系列(Custom Calendar Icon)
192Echarts - 自定义系列(Custom Calendar Icon)
39 0
189Echarts - 日历坐标系(Custom Calendar Icon)
189Echarts - 日历坐标系(Custom Calendar Icon)
52 0
188Echarts - 日历坐标系(Calendar Heatmap Vertical)
188Echarts - 日历坐标系(Calendar Heatmap Vertical)
44 0
186Echarts - 日历坐标系(Calendar Pie)
186Echarts - 日历坐标系(Calendar Pie)
47 0
185Echarts - 日历坐标系(Calendar Lunar)
185Echarts - 日历坐标系(Calendar Lunar)
43 0
184Echarts - 日历坐标系(Calendar Heatmap Horizontal)
184Echarts - 日历坐标系(Calendar Heatmap Horizontal)
36 0
183Echarts - 日历坐标系(Calendar Heatmap)
183Echarts - 日历坐标系(Calendar Heatmap)
50 0
182Echarts - 日历坐标系(Calendar Graph)
182Echarts - 日历坐标系(Calendar Graph)
37 0
181Echarts - 日历坐标系(Calendar Effectscatter)
181Echarts - 日历坐标系(Calendar Effectscatter)
46 0
180Echarts - 日历坐标系(Calendar Charts)
180Echarts - 日历坐标系(Calendar Charts)
62 0

热门文章

最新文章

下一篇
DataWorks