| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../common/jquery.min.js"></script> |
| <!--<script src="../common/echarts.min.js"></script>--> |
| <script src="../common/echarts.js"></script> |
| <script src="../common/prettify/prettify.js"></script> |
| <script src="../common/showCode.js"></script> |
| <link rel="stylesheet" href="../common/reset.css"> |
| <link rel="stylesheet" href="../common/prettify/prettify.css"> |
| <script src="../common/perfect-scrollbar/0.6.8/js/perfect-scrollbar.min.js"></script> |
| <link rel="stylesheet" href="../common/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"> |
| </head> |
| <body> |
| |
| <div id="main"> |
| <pre class="prettyprint"> |
| // 先初始化日历坐标系。 |
| chart.setOption({ |
| calendar: { |
| ... |
| } |
| }); |
| |
| var option2 = { |
| xAxis: [], |
| yAxis: [], |
| grid: [], |
| series: [] |
| }; |
| |
| dateList.each(function (date) { |
| // 对每日，计算其在日历坐标系上的像素位置。 |
| var gridCenter = chart.convertToPixel( |
| 'calendar', date |
| ); |
| // 对每日，做一个直角坐标系。 |
| option2.grid.push({ |
| left: gridCenter[0] - cellWidth / 2, |
| top: gridCenter[1] - cellHeight / 2, |
| width: cellWidth, |
| height: cellHeight, |
| ... |
| }); |
| option2.xAxis.push({...}); |
| option2.yAxis.push({...}); |
| |
| // 直角坐标系里的柱状图。 |
| option2.series.push({ |
| type: 'bar', |
| data: ... |
| }); |
| }); |
| |
| // 将所有直角坐标系和柱状图设置进 chart。 |
| chart.setOption(option2); |
| |
| </pre> |
| <div id="chart"></div> |
| </div> |
| |
| |
| <script> |
| |
| |
| |
| var cellSize = [80, 80]; |
| var cartesianSize = [60, 55]; |
| |
| 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 makeCartesian(scatterData, chart) { |
| var option = { |
| grid: [], |
| xAxis: [], |
| yAxis: [], |
| series: [] |
| }; |
| |
| echarts.util.each(scatterData, function (item, index) { |
| var center = chart.convertToPixel('calendar', item); |
| option.visualMap = { |
| orient: 'horizontal', |
| right: 150, |
| type: 'piecewise', |
| seriesIndex: visualMapSeriesIndices, |
| dimension: 0, |
| itemWidth: 30, |
| itemHeight: 20, |
| textStyle: { |
| color: '#ccc', |
| fontSize: 18 |
| }, |
| pieces: [{ |
| value: 0, |
| label: '工作', |
| color: '#E56666' |
| }, { |
| value: 1, |
| label: '娱乐', |
| color: '#61a0a8' |
| }, { |
| value: 2, |
| label: '睡觉', |
| color: '#E9962B' |
| }] |
| }; |
| option.xAxis.push({ |
| id: index + '_x', |
| data: ['工作', '娱乐', '睡觉'], |
| gridId: index + '_grid', |
| axisLabel: {show: false}, |
| axisLine: {show: false}, |
| axisTick: {show: false} |
| }); |
| option.yAxis.push({ |
| id: index + '_y', |
| gridId: index + '_grid', |
| axisLabel: {show: false}, |
| axisLine: {show: false}, |
| axisTick: {show: false} |
| }); |
| option.grid.push({ |
| id: index + '_grid', |
| left: center[0] - cartesianSize[0] / 2, |
| top: center[1] - cartesianSize[1] / 2 + 10, |
| width: cartesianSize[0], |
| height: cartesianSize[1] |
| }); |
| option.series.push({ |
| id: index + '_bar', |
| type: 'bar', |
| xAxisId: index + '_x', |
| yAxisId: index + '_y', |
| label: { |
| normal: { |
| formatter: '{c}', |
| position: 'inside' |
| } |
| }, |
| data: [ |
| Math.round(Math.random() * 24), |
| Math.round(Math.random() * 24), |
| Math.round(Math.random() * 24) |
| ] |
| }); |
| }); |
| |
| return option; |
| } |
| |
| function makeCartesianUpdate(scatterData, chart) { |
| var option = { |
| grid: [] |
| }; |
| |
| echarts.util.each(scatterData, function (item, index) { |
| var center = chart.convertToPixel('calendar', item); |
| option.grid.push({ |
| id: index + '_grid', |
| left: center[0] - cartesianSize[0] / 2, |
| top: center[1] - cartesianSize[1] / 2 + 10 |
| }); |
| }); |
| |
| return option; |
| } |
| |
| var scatterData = getVirtulData(); |
| var visualMapSeriesIndices = echarts.util.map(function (entry, index) { |
| return index + 1; |
| }); |
| |
| option = { |
| tooltip : {}, |
| animationDurationUpdate: 0, |
| calendar: { |
| top: 'middle', |
| left: 'center', |
| orient: 'vertical', |
| cellSize: cellSize, |
| yearLabel: { |
| show: false, |
| textStyle: { |
| fontSize: 30 |
| } |
| }, |
| dayLabel: { |
| margin: 20, |
| firstDay: 1, |
| nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], |
| textStyle: { |
| color: '#ccc', |
| fontSize: 16, |
| } |
| }, |
| 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 |
| }] |
| }; |
| |
| var chart = initShowCode( |
| option, |
| { |
| codeWidth: 500, |
| noAnimation: true, |
| onResize: function () { |
| chart.resize(); |
| chart.setOption(makeCartesianUpdate(scatterData, chart)); |
| } |
| } |
| ); |
| |
| chart.setOption(makeCartesian(scatterData, chart)); |
| |
| </script> |
| </body> |
| </html> |
