课程表

Echarts 基础教程

Echarts 案例教程

工具箱
速查手册

Echarts 生成日历图

当前位置：免费教程 » JS/JS库/框架 » Echarts

在ECharts中，我们新增了日历坐标系，如何快速写出一个日历图呢？

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="/js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11.     <div id="main" style="width: 600px;height:400px;"></div>
  12.     <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14.         var myChart = echarts.init(document.getElementById('main'));
  15.  
  16.         // 指定图表的配置项和数据
  17.         function getVirtulData(year) {
  18.     year = year || '2017';
  19.     var date = +echarts.number.parseDate(year + '-01-01');
  20.     var end = +echarts.number.parseDate(year + '-12-31');
  21.     var dayTime = 3600 * 24 * 1000;
  22.     var data = [];
  23.     for (var time = date; time <= end; time += dayTime) {
  24.         data.push([
  25.             echarts.format.formatTime('yyyy-MM-dd', time),
  26.             Math.floor(Math.random() * 10000)
  27.         ]);
  28.     }
  29.     return data;
  30. }
  31.  
  32. option = {
  33.     visualMap: {
  34.         show: false,
  35.         min: 0,
  36.         max: 10000
  37.     },
  38.     calendar: {
  39.         range: '2017'
  40.     },
  41.     series: {
  42.         type: 'heatmap',
  43.         coordinateSystem: 'calendar',
  44.         data: getVirtulData(2017)
  45.     }
  46. };
  47.  
  48.  
  49.         // 使用刚指定的配置项和数据显示图表。
  50.         myChart.setOption(option);
  51.     </script>
  52. </body>
  53. </html>

在线运行案例

通过以下三个步骤即可实现上述效果：

第一步：引入js文件

下载的最新完整版本echarts.min.js即可，无需再单独引入其他文件哦

  1. <script src="echarts.min.js"></script>
  2. <script>
  3.     // ...
  4. </script>

第二步：指定DOM元素作为图表容器

和ECharts中的其他图表一样，创建一个DOM来作为绘制图表的容器

  1. <div id="main" style="width=100%; height = 400px"></div>

使用ECharts进行初始化

  1. var myChart = echarts.init(document.getElementById('main'));

第三步：配置参数

以常见的日历图为例: calendar坐标 + heatmap图

  1. var option = {
  2.     visualMap: {
  3.         show: false
  4.         min: 0,
  5.         max: 1000
  6.     },
  7.     calendar: {
  8.         range: '2017'
  9.     },
  10.     series: {
  11.         type: 'heatmap',
  12.         coordinateSystem: 'calendar',
  13.         data: [['2017-01-02', 900], ['2017-01-02', 877], ['2017-01-02', 699], ...]
  14.     }
  15. }
  16. myChart.setOption(option);

在heatmap图的基础上，加上coordinateSystem: 'calendar',和calendar: { range: '2017' }heatmap图就秒变为日历图了。

若发现图表没有正确显示，你可以检查以下几种可能：

  • JS文件是否正确加载；

  • echarts 变量是否存在；

  • 控制台是否报错;

  • DOM 元素在 echarts.init 的时候是否有高度和宽度。

  • 若为 type: heatmap，检查是否配置了 visualMap。

以上就是绘制最简日历图的步骤了，如若还想进一步私人定制，还可以通过自定义配置参数来实现。

自定义配置参数

使用日历坐标绘制日历图时，支持自定义各项属性:

  • range: 设置时间的范围，可支持某年、某月、某天，还可支持跨年

  • cellSize: 设置日历格的大小，可支持设置不同高宽，还可支持自适应auto

  • width、height: 也可以直接设置改日历图的整体高宽，让其基于已有的高宽全部自适应

  • orient: 设置坐标的方向，既可以横着也可以竖着

  • splitLine: 设置分隔线样式，也可以直接不显示

  • itemStyle: 设置日历格的样式，背景色、方框线颜色大小类型、透明度均可自定义，甚至还能加阴影

  • dayLabel: 设置坐标中 星期样式，可以设置星期从第几天开始，快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、通过formatter 可以想怎么显示就怎么显示;

  • monthLabel: 设置坐标中 月样式，和星期一样，可快捷设置中英文和自定义混搭

  • yearLabel: 设置坐标中 年样式，默认显示一年，通过formatter 文字可以想显示什么就能通过string function任性自定义，上下左右方位随便选;

完整的配置项参数参见：calendar API

日历坐标系的其他形式

日历坐标系是一种新的 ECharts 坐标系，提供了在日历上绘制图表的能力; 所以除了制作常用的日历图外，我们可以在热力图、散点图、关系图中使用日历坐标系。

在日历坐标系中使用热力图：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="/js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11.     <div id="main" style="width: 600px;height:400px;"></div>
  12.     <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14.         var myChart = echarts.init(document.getElementById('main'));
  15.  
  16.         // 指定图表的配置项和数据
  17. function getVirtulData(year) {
  18.     year = year || '2017';
  19.     var date = +echarts.number.parseDate(year + '-01-01');
  20.     var end = +echarts.number.parseDate((+year + 1) + '-01-01');
  21.     var dayTime = 3600 * 24 * 1000;
  22.     var data = [];
  23.     for (var time = date; time < end; time += dayTime) {
  24.         data.push([
  25.             echarts.format.formatTime('yyyy-MM-dd', time),
  26.             Math.floor(Math.random() * 10000)
  27.         ]);
  28.     }
  29.     return data;
  30. }
  31.  
  32. option = {
  33.     title: {
  34.         top: 30,
  35.         left: 'center',
  36.         text: '2016年某人每天的步数'
  37.     },
  38.     tooltip : {},
  39.     visualMap: {
  40.         min: 0,
  41.         max: 10000,
  42.         type: 'piecewise',
  43.         orient: 'horizontal',
  44.         left: 'center',
  45.         top: 65,
  46.         textStyle: {
  47.             color: '#000'
  48.         }
  49.     },
  50.     calendar: {
  51.         top: 120,
  52.         left: 30,
  53.         right: 30,
  54.         cellSize: ['auto', 13],
  55.         range: '2016',
  56.         itemStyle: {
  57.             normal: {borderWidth: 0.5}
  58.         },
  59.         yearLabel: {show: false}
  60.     },
  61.     series: {
  62.         type: 'heatmap',
  63.         coordinateSystem: 'calendar',
  64.         data: getVirtulData(2016)
  65.     }
  66. };
  67.  
  68.  
  69.  
  70.         // 使用刚指定的配置项和数据显示图表。
  71.         myChart.setOption(option);
  72.     </script>
  73. </body>
  74. </html>

在线运行案例

在日历坐标系中使用散点图：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="/js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11.     <div id="main" style="width: 95%;height:95%;"></div>
  12.     <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14.         var myChart = echarts.init(document.getElementById('main'));
  15.  
  16.         // 指定图表的配置项和数据
  17. function getVirtulData(year) {
  18.     year = year || '2017';
  19.     var date = +echarts.number.parseDate(year + '-01-01');
  20.     var end = +echarts.number.parseDate((+year + 1) + '-01-01');
  21.     var dayTime = 3600 * 24 * 1000;
  22.     var data = [];
  23.     for (var time = date; time < end; time += dayTime) {
  24.         data.push([
  25.             echarts.format.formatTime('yyyy-MM-dd', time),
  26.             Math.floor(Math.random() * 10000)
  27.         ]);
  28.     }
  29.     return data;
  30. }
  31.  
  32. var data = getVirtulData(2016);
  33.  
  34. option = {
  35.     backgroundColor: '#404a59',
  36.  
  37.     title: {
  38.         top: 30,
  39.         text: '2016年某人每天的步数',
  40.         subtext: '数据纯属虚构',
  41.         left: 'center',
  42.         textStyle: {
  43.             color: '#fff'
  44.         }
  45.     },
  46.     tooltip : {
  47.         trigger: 'item'
  48.     },
  49.     legend: {
  50.         top: '30',
  51.         left: '100',
  52.         data:['步数', 'Top 12'],
  53.         textStyle: {
  54.             color: '#fff'
  55.         }
  56.     },
  57.     calendar: [{
  58.         top: 100,
  59.         left: 'center',
  60.         range: ['2016-01-01', '2016-06-30'],
  61.         splitLine: {
  62.             show: true,
  63.             lineStyle: {
  64.                 color: '#000',
  65.                 width: 4,
  66.                 type: 'solid'
  67.             }
  68.         },
  69.         yearLabel: {
  70.             formatter: '{start}  1st',
  71.             textStyle: {
  72.                 color: '#fff'
  73.             }
  74.         },
  75.         itemStyle: {
  76.             normal: {
  77.                 color: '#323c48',
  78.                 borderWidth: 1,
  79.                 borderColor: '#111'
  80.             }
  81.         }
  82.     }, {
  83.         top: 340,
  84.         left: 'center',
  85.         range: ['2016-07-01', '2016-12-31'],
  86.         splitLine: {
  87.             show: true,
  88.             lineStyle: {
  89.                 color: '#000',
  90.                 width: 4,
  91.                 type: 'solid'
  92.             }
  93.         },
  94.         yearLabel: {
  95.             formatter: '{start}  2nd',
  96.             textStyle: {
  97.                 color: '#fff'
  98.             }
  99.         },
  100.         itemStyle: {
  101.             normal: {
  102.                 color: '#323c48',
  103.                 borderWidth: 1,
  104.                 borderColor: '#111'
  105.             }
  106.         }
  107.     }],
  108.     series : [
  109.         {
  110.             name: '步数',
  111.             type: 'scatter',
  112.             coordinateSystem: 'calendar',
  113.             data: data,
  114.             symbolSize: function (val) {
  115.                 return val[1] / 500;
  116.             },
  117.             itemStyle: {
  118.                 normal: {
  119.                     color: '#ddb926'
  120.                 }
  121.             }
  122.         },
  123.         {
  124.             name: '步数',
  125.             type: 'scatter',
  126.             coordinateSystem: 'calendar',
  127.             calendarIndex: 1,
  128.             data: data,
  129.             symbolSize: function (val) {
  130.                 return val[1] / 500;
  131.             },
  132.             itemStyle: {
  133.                 normal: {
  134.                     color: '#ddb926'
  135.                 }
  136.             }
  137.         },
  138.         {
  139.             name: 'Top 12',
  140.             type: 'effectScatter',
  141.             coordinateSystem: 'calendar',
  142.             calendarIndex: 1,
  143.             data: data.sort(function (a, b) {
  144.                 return b[1] - a[1];
  145.             }).slice(0, 12),
  146.             symbolSize: function (val) {
  147.                 return val[1] / 500;
  148.             },
  149.             showEffectOn: 'render',
  150.             rippleEffect: {
  151.                 brushType: 'stroke'
  152.             },
  153.             hoverAnimation: true,
  154.             itemStyle: {
  155.                 normal: {
  156.                     color: '#f4e925',
  157.                     shadowBlur: 10,
  158.                     shadowColor: '#333'
  159.                 }
  160.             },
  161.             zlevel: 1
  162.         },
  163.         {
  164.             name: 'Top 12',
  165.             type: 'effectScatter',
  166.             coordinateSystem: 'calendar',
  167.             data: data.sort(function (a, b) {
  168.                 return b[1] - a[1];
  169.             }).slice(0, 12),
  170.             symbolSize: function (val) {
  171.                 return val[1] / 500;
  172.             },
  173.             showEffectOn: 'render',
  174.             rippleEffect: {
  175.                 brushType: 'stroke'
  176.             },
  177.             hoverAnimation: true,
  178.             itemStyle: {
  179.                 normal: {
  180.                     color: '#f4e925',
  181.                     shadowBlur: 10,
  182.                     shadowColor: '#333'
  183.                 }
  184.             },
  185.             zlevel: 1
  186.         }
  187.     ]
  188. };
  189.  
  190.  
  191.         // 使用刚指定的配置项和数据显示图表。
  192.         myChart.setOption(option);
  193.     </script>
  194. </body>
  195. </html>

在线运行案例

还可以混合放置不同的图表，例如下例子，同时放置了热力图和关系图：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="/js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11.     <div id="main" style="width: 95%;height:95%;"></div>
  12.     <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14.         var myChart = echarts.init(document.getElementById('main'));
  15.  
  16.         // 指定图表的配置项和数据
  17. var graphData = [
  18.     [
  19.         // Consider timeoffset, add two days to avoid overflow.
  20.         1485878400000 + 3600 * 24 * 1000 * 2,
  21.         260
  22.     ],
  23.     [
  24.         1486137600000,
  25.         200
  26.     ],
  27.     [
  28.         1486569600000,
  29.         279
  30.     ],
  31.     [
  32.         1486915200000,
  33.         847
  34.     ],
  35.     [
  36.         1487347200000,
  37.         241
  38.     ],
  39.     [
  40.         1487779200000 + 3600 * 24 * 1000 * 15,
  41.         411
  42.     ],
  43.     [
  44.         1488124800000 + 3600 * 24 * 1000 * 23,
  45.         985
  46.     ]
  47. ];
  48.  
  49. var links = graphData.map(function (item, idx) {
  50.     return {
  51.         source: idx,
  52.         target: idx + 1
  53.     };
  54. });
  55. links.pop();
  56.  
  57. function getVirtulData(year) {
  58.     year = year || '2017';
  59.     var date = +echarts.number.parseDate(year + '-01-01');
  60.     var end = +echarts.number.parseDate((+year + 1) + '-01-01');
  61.     var dayTime = 3600 * 24 * 1000;
  62.     var data = [];
  63.     for (var time = date; time < end; time += dayTime) {
  64.         data.push([
  65.             echarts.format.formatTime('yyyy-MM-dd', time),
  66.             Math.floor(Math.random() * 1000)
  67.         ]);
  68.     }
  69.     return data;
  70. }
  71.  
  72.  
  73. option = {
  74.     tooltip : {},
  75.     calendar: {
  76.         top: 'middle',
  77.         left: 'center',
  78.         orient: 'vertical',
  79.         cellSize: 40,
  80.         yearLabel: {
  81.             margin: 50,
  82.             textStyle: {
  83.                 fontSize: 30
  84.             }
  85.         },
  86.         dayLabel: {
  87.             firstDay: 1,
  88.             nameMap: 'cn'
  89.         },
  90.         monthLabel: {
  91.             nameMap: 'cn',
  92.             margin: 15,
  93.             textStyle: {
  94.                 fontSize: 20,
  95.                 color: '#999'
  96.             }
  97.         },
  98.         range: ['2017-02', '2017-03-31']
  99.     },
  100.     visualMap: {
  101.         min: 0,
  102.         max: 1000,
  103.         type: 'piecewise',
  104.         left: 'center',
  105.         bottom: 20,
  106.         inRange: {
  107.             color: ['#5291FF', '#C7DBFF']
  108.         },
  109.         seriesIndex: [1],
  110.         orient: 'horizontal'
  111.     },
  112.     series: [{
  113.         type: 'graph',
  114.         edgeSymbol: ['none', 'arrow'],
  115.         coordinateSystem: 'calendar',
  116.         links: links,
  117.         symbolSize: 15,
  118.         calendarIndex: 0,
  119.         itemStyle: {
  120.             normal: {
  121.                 color: 'yellow',
  122.                 shadowBlue: 9,
  123.                 shadowOffsetX: 1.5,
  124.                 shadowOffsetY: 3,
  125.                 shadowColor: '#555'
  126.             }
  127.         },
  128.         lineStyle: {
  129.             normal: {
  130.                 color: '#D10E00',
  131.                 width: 1,
  132.                 opacity: 1
  133.             }
  134.         },
  135.         data: graphData,
  136.         z: 20
  137.     }, {
  138.         type: 'heatmap',
  139.         coordinateSystem: 'calendar',
  140.         data: getVirtulData(2017)
  141.     }]
  142. };
  143.  
  144.  
  145.  
  146.         // 使用刚指定的配置项和数据显示图表。
  147.         myChart.setOption(option);
  148.     </script>
  149. </body>
  150. </html>

在线运行案例

其他更丰富的效果

灵活利用 ECharts 图表和坐标系的组合，以及 API，还可以实现更丰富的效果。

例如，制作农历：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="/js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11.     <div id="main" style="width: 95%;height:95%;"></div>
  12.     <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14.         var myChart = echarts.init(document.getElementById('main'));
  15.  
  16.         // 指定图表的配置项和数据
  17. var dateList = [
  18.     ['2017-1-1', '初四'],
  19.     ['2017-1-2', '初五'],
  20.     ['2017-1-3', '初六'],
  21.     ['2017-1-4', '初七'],
  22.     ['2017-1-5', '初八', '小寒'],
  23.     ['2017-1-6', '初九'],
  24.     ['2017-1-7', '初十'],
  25.     ['2017-1-8', '十一'],
  26.     ['2017-1-9', '十二'],
  27.     ['2017-1-10', '十三'],
  28.     ['2017-1-11', '十四'],
  29.     ['2017-1-12', '十五'],
  30.     ['2017-1-13', '十六'],
  31.     ['2017-1-14', '十七'],
  32.     ['2017-1-15', '十八'],
  33.     ['2017-1-16', '十九'],
  34.     ['2017-1-17', '二十'],
  35.     ['2017-1-18', '廿一'],
  36.     ['2017-1-19', '廿二'],
  37.     ['2017-1-20', '廿三', '大寒'],
  38.     ['2017-1-21', '廿四'],
  39.     ['2017-1-22', '廿五'],
  40.     ['2017-1-23', '廿六'],
  41.     ['2017-1-24', '廿七'],
  42.     ['2017-1-25', '廿八'],
  43.     ['2017-1-26', '廿九'],
  44.     ['2017-1-27', '三十'],
  45.     ['2017-1-28', '正月'],
  46.     ['2017-1-29', '初二'],
  47.     ['2017-1-30', '初三'],
  48.     ['2017-1-31', '初四'],
  49.     ['2017-2-1', '初五'],
  50.     ['2017-2-2', '初六'],
  51.     ['2017-2-3', '初七', '立春'],
  52.     ['2017-2-4', '初八'],
  53.     ['2017-2-5', '初九'],
  54.     ['2017-2-6', '初十'],
  55.     ['2017-2-7', '十一'],
  56.     ['2017-2-8', '十二'],
  57.     ['2017-2-9', '十三'],
  58.     ['2017-2-10', '十四'],
  59.     ['2017-2-11', '十五'],
  60.     ['2017-2-12', '十六'],
  61.     ['2017-2-13', '十七'],
  62.     ['2017-2-14', '十八'],
  63.     ['2017-2-15', '十九'],
  64.     ['2017-2-16', '二十'],
  65.     ['2017-2-17', '廿一'],
  66.     ['2017-2-18', '廿二', '雨水'],
  67.     ['2017-2-19', '廿三'],
  68.     ['2017-2-20', '廿四'],
  69.     ['2017-2-21', '廿五'],
  70.     ['2017-2-22', '廿六'],
  71.     ['2017-2-23', '廿七'],
  72.     ['2017-2-24', '廿八'],
  73.     ['2017-2-25', '廿九'],
  74.     ['2017-2-26', '二月'],
  75.     ['2017-2-27', '初二'],
  76.     ['2017-2-28', '初三'],
  77.     ['2017-3-1', '初四'],
  78.     ['2017-3-2', '初五'],
  79.     ['2017-3-3', '初六'],
  80.     ['2017-3-4', '初七'],
  81.     ['2017-3-5', '初八', '驚蟄'],
  82.     ['2017-3-6', '初九'],
  83.     ['2017-3-7', '初十'],
  84.     ['2017-3-8', '十一'],
  85.     ['2017-3-9', '十二'],
  86.     ['2017-3-10', '十三'],
  87.     ['2017-3-11', '十四'],
  88.     ['2017-3-12', '十五'],
  89.     ['2017-3-13', '十六'],
  90.     ['2017-3-14', '十七'],
  91.     ['2017-3-15', '十八'],
  92.     ['2017-3-16', '十九'],
  93.     ['2017-3-17', '二十'],
  94.     ['2017-3-18', '廿一'],
  95.     ['2017-3-19', '廿二'],
  96.     ['2017-3-20', '廿三', '春分'],
  97.     ['2017-3-21', '廿四'],
  98.     ['2017-3-22', '廿五'],
  99.     ['2017-3-23', '廿六'],
  100.     ['2017-3-24', '廿七'],
  101.     ['2017-3-25', '廿八'],
  102.     ['2017-3-26', '廿九'],
  103.     ['2017-3-27', '三十'],
  104.     ['2017-3-28', '三月'],
  105.     ['2017-3-29', '初二'],
  106.     ['2017-3-30', '初三'],
  107.     ['2017-3-31', '初四'],
  108.     ['2017-4-1', '初五'],
  109.     ['2017-4-2', '初六'],
  110.     ['2017-4-3', '初七'],
  111.     ['2017-4-4', '初八', '清明'],
  112.     ['2017-4-5', '初九'],
  113.     ['2017-4-6', '初十'],
  114.     ['2017-4-7', '十一'],
  115.     ['2017-4-8', '十二'],
  116.     ['2017-4-9', '十三'],
  117.     ['2017-4-10', '十四'],
  118.     ['2017-4-11', '十五'],
  119.     ['2017-4-12', '十六'],
  120.     ['2017-4-13', '十七'],
  121.     ['2017-4-14', '十八'],
  122.     ['2017-4-15', '十九'],
  123.     ['2017-4-16', '二十'],
  124.     ['2017-4-17', '廿一'],
  125.     ['2017-4-18', '廿二'],
  126.     ['2017-4-19', '廿三'],
  127.     ['2017-4-20', '廿四', '穀雨'],
  128.     ['2017-4-21', '廿五'],
  129.     ['2017-4-22', '廿六'],
  130.     ['2017-4-23', '廿七'],
  131.     ['2017-4-24', '廿八'],
  132.     ['2017-4-25', '廿九'],
  133.     ['2017-4-26', '四月'],
  134.     ['2017-4-27', '初二'],
  135.     ['2017-4-28', '初三'],
  136.     ['2017-4-29', '初四'],
  137.     ['2017-4-30', '初五'],
  138.     ['2017-5-1', '初六'],
  139.     ['2017-5-2', '初七'],
  140.     ['2017-5-3', '初八'],
  141.     ['2017-5-4', '初九'],
  142.     ['2017-5-5', '初十', '立夏'],
  143.     ['2017-5-6', '十一'],
  144.     ['2017-5-7', '十二'],
  145.     ['2017-5-8', '十三'],
  146.     ['2017-5-9', '十四'],
  147.     ['2017-5-10', '十五'],
  148.     ['2017-5-11', '十六'],
  149.     ['2017-5-12', '十七'],
  150.     ['2017-5-13', '十八'],
  151.     ['2017-5-14', '十九'],
  152.     ['2017-5-15', '二十'],
  153.     ['2017-5-16', '廿一'],
  154.     ['2017-5-17', '廿二'],
  155.     ['2017-5-18', '廿三'],
  156.     ['2017-5-19', '廿四'],
  157.     ['2017-5-20', '廿五'],
  158.     ['2017-5-21', '廿六', '小滿'],
  159.     ['2017-5-22', '廿七'],
  160.     ['2017-5-23', '廿八'],
  161.     ['2017-5-24', '廿九'],
  162.     ['2017-5-25', '三十'],
  163.     ['2017-5-26', '五月'],
  164.     ['2017-5-27', '初二'],
  165.     ['2017-5-28', '初三'],
  166.     ['2017-5-29', '初四'],
  167.     ['2017-5-30', '初五'],
  168.     ['2017-5-31', '初六'],
  169.     ['2017-6-1', '初七'],
  170.     ['2017-6-2', '初八'],
  171.     ['2017-6-3', '初九'],
  172.     ['2017-6-4', '初十'],
  173.     ['2017-6-5', '十一', '芒種'],
  174.     ['2017-6-6', '十二'],
  175.     ['2017-6-7', '十三'],
  176.     ['2017-6-8', '十四'],
  177.     ['2017-6-9', '十五'],
  178.     ['2017-6-10', '十六'],
  179.     ['2017-6-11', '十七'],
  180.     ['2017-6-12', '十八'],
  181.     ['2017-6-13', '十九'],
  182.     ['2017-6-14', '二十'],
  183.     ['2017-6-15', '廿一'],
  184.     ['2017-6-16', '廿二'],
  185.     ['2017-6-17', '廿三'],
  186.     ['2017-6-18', '廿四'],
  187.     ['2017-6-19', '廿五'],
  188.     ['2017-6-20', '廿六'],
  189.     ['2017-6-21', '廿七', '夏至'],
  190.     ['2017-6-22', '廿八'],
  191.     ['2017-6-23', '廿九'],
  192.     ['2017-6-24', '六月'],
  193.     ['2017-6-25', '初二'],
  194.     ['2017-6-26', '初三'],
  195.     ['2017-6-27', '初四'],
  196.     ['2017-6-28', '初五'],
  197.     ['2017-6-29', '初六'],
  198.     ['2017-6-30', '初七'],
  199.     ['2017-7-1', '初八'],
  200.     ['2017-7-2', '初九'],
  201.     ['2017-7-3', '初十'],
  202.     ['2017-7-4', '十一'],
  203.     ['2017-7-5', '十二'],
  204.     ['2017-7-6', '十三'],
  205.     ['2017-7-7', '十四', '小暑'],
  206.     ['2017-7-8', '十五'],
  207.     ['2017-7-9', '十六'],
  208.     ['2017-7-10', '十七'],
  209.     ['2017-7-11', '十八'],
  210.     ['2017-7-12', '十九'],
  211.     ['2017-7-13', '二十'],
  212.     ['2017-7-14', '廿一'],
  213.     ['2017-7-15', '廿二'],
  214.     ['2017-7-16', '廿三'],
  215.     ['2017-7-17', '廿四'],
  216.     ['2017-7-18', '廿五'],
  217.     ['2017-7-19', '廿六'],
  218.     ['2017-7-20', '廿七'],
  219.     ['2017-7-21', '廿八'],
  220.     ['2017-7-22', '廿九', '大暑'],
  221.     ['2017-7-23', '閏六',],
  222.     ['2017-7-24', '初二'],
  223.     ['2017-7-25', '初三'],
  224.     ['2017-7-26', '初四'],
  225.     ['2017-7-27', '初五'],
  226.     ['2017-7-28', '初六'],
  227.     ['2017-7-29', '初七'],
  228.     ['2017-7-30', '初八'],
  229.     ['2017-7-31', '初九'],
  230.     ['2017-8-1', '初十'],
  231.     ['2017-8-2', '十一'],
  232.     ['2017-8-3', '十二'],
  233.     ['2017-8-4', '十三'],
  234.     ['2017-8-5', '十四'],
  235.     ['2017-8-6', '十五'],
  236.     ['2017-8-7', '十六', '立秋'],
  237.     ['2017-8-8', '十七'],
  238.     ['2017-8-9', '十八'],
  239.     ['2017-8-10', '十九'],
  240.     ['2017-8-11', '二十'],
  241.     ['2017-8-12', '廿一'],
  242.     ['2017-8-13', '廿二'],
  243.     ['2017-8-14', '廿三'],
  244.     ['2017-8-15', '廿四'],
  245.     ['2017-8-16', '廿五'],
  246.     ['2017-8-17', '廿六'],
  247.     ['2017-8-18', '廿七'],
  248.     ['2017-8-19', '廿八'],
  249.     ['2017-8-20', '廿九'],
  250.     ['2017-8-21', '三十'],
  251.     ['2017-8-22', '七月'],
  252.     ['2017-8-23', '初二', '處暑'],
  253.     ['2017-8-24', '初三'],
  254.     ['2017-8-25', '初四'],
  255.     ['2017-8-26', '初五'],
  256.     ['2017-8-27', '初六'],
  257.     ['2017-8-28', '初七'],
  258.     ['2017-8-29', '初八'],
  259.     ['2017-8-30', '初九'],
  260.     ['2017-8-31', '初十'],
  261.     ['2017-9-1', '十一'],
  262.     ['2017-9-2', '十二'],
  263.     ['2017-9-3', '十三'],
  264.     ['2017-9-4', '十四'],
  265.     ['2017-9-5', '十五'],
  266.     ['2017-9-6', '十六'],
  267.     ['2017-9-7', '十七', '白露'],
  268.     ['2017-9-8', '十八'],
  269.     ['2017-9-9', '十九'],
  270.     ['2017-9-10', '二十'],
  271.     ['2017-9-11', '廿一'],
  272.     ['2017-9-12', '廿二'],
  273.     ['2017-9-13', '廿三'],
  274.     ['2017-9-14', '廿四'],
  275.     ['2017-9-15', '廿五'],
  276.     ['2017-9-16', '廿六'],
  277.     ['2017-9-17', '廿七'],
  278.     ['2017-9-18', '廿八'],
  279.     ['2017-9-19', '廿九'],
  280.     ['2017-9-20', '八月'],
  281.     ['2017-9-21', '初二'],
  282.     ['2017-9-22', '初三'],
  283.     ['2017-9-23', '初四', '秋分'],
  284.     ['2017-9-24', '初五'],
  285.     ['2017-9-25', '初六'],
  286.     ['2017-9-26', '初七'],
  287.     ['2017-9-27', '初八'],
  288.     ['2017-9-28', '初九'],
  289.     ['2017-9-29', '初十'],
  290.     ['2017-9-30', '十一'],
  291.     ['2017-10-1', '十二'],
  292.     ['2017-10-2', '十三'],
  293.     ['2017-10-3', '十四'],
  294.     ['2017-10-4', '十五'],
  295.     ['2017-10-5', '十六'],
  296.     ['2017-10-6', '十七'],
  297.     ['2017-10-7', '十八'],
  298.     ['2017-10-8', '十九', '寒露'],
  299.     ['2017-10-9', '二十'],
  300.     ['2017-10-10', '廿一'],
  301.     ['2017-10-11', '廿二'],
  302.     ['2017-10-12', '廿三'],
  303.     ['2017-10-13', '廿四'],
  304.     ['2017-10-14', '廿五'],
  305.     ['2017-10-15', '廿六'],
  306.     ['2017-10-16', '廿七'],
  307.     ['2017-10-17', '廿八'],
  308.     ['2017-10-18', '廿九'],
  309.     ['2017-10-19', '三十'],
  310.     ['2017-10-20', '九月'],
  311.     ['2017-10-21', '初二'],
  312.     ['2017-10-22', '初三'],
  313.     ['2017-10-23', '初四', '霜降'],
  314.     ['2017-10-24', '初五'],
  315.     ['2017-10-25', '初六'],
  316.     ['2017-10-26', '初七'],
  317.     ['2017-10-27', '初八'],
  318.     ['2017-10-28', '初九'],
  319.     ['2017-10-29', '初十'],
  320.     ['2017-10-30', '十一'],
  321.     ['2017-10-31', '十二'],
  322.     ['2017-11-1', '十三'],
  323.     ['2017-11-2', '十四'],
  324.     ['2017-11-3', '十五'],
  325.     ['2017-11-4', '十六'],
  326.     ['2017-11-5', '十七'],
  327.     ['2017-11-6', '十八'],
  328.     ['2017-11-7', '十九', '立冬'],
  329.     ['2017-11-8', '二十'],
  330.     ['2017-11-9', '廿一'],
  331.     ['2017-11-10', '廿二'],
  332.     ['2017-11-11', '廿三'],
  333.     ['2017-11-12', '廿四'],
  334.     ['2017-11-13', '廿五'],
  335.     ['2017-11-14', '廿六'],
  336.     ['2017-11-15', '廿七'],
  337.     ['2017-11-16', '廿八'],
  338.     ['2017-11-17', '廿九'],
  339.     ['2017-11-18', '十月'],
  340.     ['2017-11-19', '初二'],
  341.     ['2017-11-20', '初三'],
  342.     ['2017-11-21', '初四'],
  343.     ['2017-11-22', '初五', '小雪'],
  344.     ['2017-11-23', '初六'],
  345.     ['2017-11-24', '初七'],
  346.     ['2017-11-25', '初八'],
  347.     ['2017-11-26', '初九'],
  348.     ['2017-11-27', '初十'],
  349.     ['2017-11-28', '十一'],
  350.     ['2017-11-29', '十二'],
  351.     ['2017-11-30', '十三'],
  352.     ['2017-12-1', '十四'],
  353.     ['2017-12-2', '十五'],
  354.     ['2017-12-3', '十六'],
  355.     ['2017-12-4', '十七'],
  356.     ['2017-12-5', '十八'],
  357.     ['2017-12-6', '十九'],
  358.     ['2017-12-7', '二十', '大雪'],
  359.     ['2017-12-8', '廿一'],
  360.     ['2017-12-9', '廿二'],
  361.     ['2017-12-10', '廿三'],
  362.     ['2017-12-11', '廿四'],
  363.     ['2017-12-12', '廿五'],
  364.     ['2017-12-13', '廿六'],
  365.     ['2017-12-14', '廿七'],
  366.     ['2017-12-15', '廿八'],
  367.     ['2017-12-16', '廿九'],
  368.     ['2017-12-17', '三十'],
  369.     ['2017-12-18', '十一月',],
  370.     ['2017-12-19', '初二'],
  371.     ['2017-12-20', '初三'],
  372.     ['2017-12-21', '初四'],
  373.     ['2017-12-22', '初五', '冬至'],
  374.     ['2017-12-23', '初六'],
  375.     ['2017-12-24', '初七'],
  376.     ['2017-12-25', '初八'],
  377.     ['2017-12-26', '初九'],
  378.     ['2017-12-27', '初十'],
  379.     ['2017-12-28', '十一'],
  380.     ['2017-12-29', '十二'],
  381.     ['2017-12-30', '十三'],
  382.     ['2017-12-31', '十四']
  383. ];
  384.  
  385. var heatmapData = [];
  386. var lunarData = [];
  387. for (var i = 0; i < dateList.length; i++) {
  388.     heatmapData.push([
  389.         dateList[i][0],
  390.         Math.random() * 300
  391.     ]);
  392.     lunarData.push([
  393.         dateList[i][0],
  394.         1,
  395.         dateList[i][1],
  396.         dateList[i][2]
  397.     ]);
  398. }
  399.  
  400.  
  401. option = {
  402.     tooltip: {
  403.         formatter: function (params) {
  404.             return '降雨量: ' + params.value[1].toFixed(2);
  405.         }
  406.     },
  407.  
  408.     visualMap: {
  409.         show: false,
  410.         min: 0,
  411.         max: 300,
  412.         calculable: true,
  413.         seriesIndex: [2],
  414.         orient: 'horizontal',
  415.         left: 'center',
  416.         bottom: 20,
  417.         inRange: {
  418.             color: ['#e0ffff', '#006edd'],
  419.             opacity: 0.3
  420.         },
  421.         controller: {
  422.             inRange: {
  423.                 opacity: 0.5
  424.             }
  425.         }
  426.     },
  427.  
  428.     calendar: [{
  429.         left: 'center',
  430.         top: 'middle',
  431.         cellSize: [70, 70],
  432.         yearLabel: {show: false},
  433.         orient: 'vertical',
  434.         dayLabel: {
  435.             firstDay: 1,
  436.             nameMap: 'cn'
  437.         },
  438.         monthLabel: {
  439.             show: false
  440.         },
  441.         range: '2017-03'
  442.     }],
  443.  
  444.     series: [{
  445.         type: 'scatter',
  446.         coordinateSystem: 'calendar',
  447.         symbolSize: 1,
  448.         label: {
  449.             normal: {
  450.                 show: true,
  451.                 formatter: function (params) {
  452.                     var d = echarts.number.parseDate(params.value[0]);
  453.                     return d.getDate() + '\n\n' + params.value[2] + '\n\n';
  454.                 },
  455.                 textStyle: {
  456.                     color: '#000'
  457.                 }
  458.             }
  459.         },
  460.         data: lunarData
  461.     }, {
  462.         type: 'scatter',
  463.         coordinateSystem: 'calendar',
  464.         symbolSize: 1,
  465.         label: {
  466.             normal: {
  467.                 show: true,
  468.                 formatter: function (params) {
  469.                     return '\n\n\n' + (params.value[3] || '');
  470.                 },
  471.                 textStyle: {
  472.                     fontSize: 14,
  473.                     fontWeight: 700,
  474.                     color: '#a00'
  475.                 }
  476.             }
  477.         },
  478.         data: lunarData
  479.     }, {
  480.         name: '降雨量',
  481.         type: 'heatmap',
  482.         coordinateSystem: 'calendar',
  483.         data: heatmapData
  484.     }]
  485. };
  486.  
  487.  
  488.  
  489.         // 使用刚指定的配置项和数据显示图表。
  490.         myChart.setOption(option);
  491.     </script>
  492. </body>
  493. </html>

在线运行案例

例如，使用 chart.convertToPixel 接口，在日历坐标系绘制饼图：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="/js/echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11.     <div id="main" style="width: 95%;height:95%;"></div>
  12.     <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14.         var myChart = echarts.init(document.getElementById('main'));
  15.  
  16.         // 指定图表的配置项和数据
  17. var cellSize = [80, 80];
  18. var pieRadius = 30;
  19.  
  20. function getVirtulData() {
  21.     var date = +echarts.number.parseDate('2017-02-01');
  22.     var end = +echarts.number.parseDate('2017-03-01');
  23.     var dayTime = 3600 * 24 * 1000;
  24.     var data = [];
  25.     for (var time = date; time < end; time += dayTime) {
  26.         data.push([
  27.             echarts.format.formatTime('yyyy-MM-dd', time),
  28.             Math.floor(Math.random() * 10000)
  29.         ]);
  30.     }
  31.     return data;
  32. }
  33.  
  34. function getPieSeries(scatterData, chart) {
  35.     return echarts.util.map(scatterData, function (item, index) {
  36.         var center = chart.convertToPixel('calendar', item);
  37.         return {
  38.             id: index + 'pie',
  39.             type: 'pie',
  40.             center: center,
  41.             label: {
  42.                 normal: {
  43.                     formatter: '{c}',
  44.                     position: 'inside'
  45.                 }
  46.             },
  47.             radius: pieRadius,
  48.             data: [
  49.                 {name: '工作', value: Math.round(Math.random() * 24)},
  50.                 {name: '娱乐', value: Math.round(Math.random() * 24)},
  51.                 {name: '睡觉', value: Math.round(Math.random() * 24)}
  52.             ]
  53.         };
  54.     });
  55. }
  56.  
  57. function getPieSeriesUpdate(scatterData, chart) {
  58.     return echarts.util.map(scatterData, function (item, index) {
  59.         var center = chart.convertToPixel('calendar', item);
  60.         return {
  61.             id: index + 'pie',
  62.             center: center
  63.         };
  64.     });
  65. }
  66.  
  67. var scatterData = getVirtulData();
  68.  
  69. option = {
  70.     tooltip : {},
  71.     legend: {
  72.         data: ['工作', '娱乐', '睡觉'],
  73.         bottom: 20
  74.     },
  75.     calendar: {
  76.         top: 'middle',
  77.         left: 'center',
  78.         orient: 'vertical',
  79.         cellSize: cellSize,
  80.         yearLabel: {
  81.             show: false,
  82.             textStyle: {
  83.                 fontSize: 30
  84.             }
  85.         },
  86.         dayLabel: {
  87.             margin: 20,
  88.             firstDay: 1,
  89.             nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  90.         },
  91.         monthLabel: {
  92.             show: false
  93.         },
  94.         range: ['2017-02']
  95.     },
  96.     series: [{
  97.         id: 'label',
  98.         type: 'scatter',
  99.         coordinateSystem: 'calendar',
  100.         symbolSize: 1,
  101.         label: {
  102.             normal: {
  103.                 show: true,
  104.                 formatter: function (params) {
  105.                     return echarts.format.formatTime('dd', params.value[0]);
  106.                 },
  107.                 offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
  108.                 textStyle: {
  109.                     color: '#000',
  110.                     fontSize: 14
  111.                 }
  112.             }
  113.         },
  114.         data: scatterData
  115.     }]
  116. };
  117.  
  118.  
  119.     var pieInitialized;
  120.     setTimeout(function () {
  121.         pieInitialized = true;
  122.         myChart.setOption({
  123.             series: getPieSeries(scatterData, myChart)
  124.         });
  125.     }, 10);
  126.  
  127.     var onresize = function () {
  128.         if (pieInitialized) {
  129.             myChart.setOption({
  130.                 series: getPieSeriesUpdate(scatterData, myChart)
  131.             });
  132.         }
  133.     };
  134.  
  135.  
  136.  
  137.  
  138.         // 使用刚指定的配置项和数据显示图表。
  139.         myChart.setOption(option);
  140.     </script>
  141. </body>
  142. </html>

在线运行案例

转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号