180Echarts - 日历坐标系（Calendar Charts）
生活随笔
收集整理的這篇文章主要介紹了
180Echarts - 日历坐标系（Calendar Charts）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖
源代碼
<!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 + 1) + '-01-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() * 1000)]);}console.log(data[data.length - 1]);return data; }var graphData = [[1485878400000,260],[1486137600000,200],[1486569600000,279],[1486915200000,847],[1487347200000,241],[1487779200000,411],[1488124800000,985] ];var links = graphData.map(function (item, idx) {return {source: idx,target: idx + 1}; }); links.pop();option = {tooltip: {position: 'top'},visualMap: [{min: 0,max: 1000,calculable: true,seriesIndex: [2, 3, 4],orient: 'horizontal',left: '55%',bottom: 20}, {min: 0,max: 1000,inRange: {color: ['grey'],opacity: [0, 0.3]},controller: {inRange: {opacity: [0.3, 0.6]},outOfRange: {color: '#ccc'}},calculable: true,seriesIndex: [1],orient: 'horizontal',left: '10%',bottom: 20}],calendar: [{orient: 'vertical',yearLabel: {margin: 40},monthLabel: {nameMap: 'cn',margin: 20},dayLabel: {firstDay: 1,nameMap: 'cn'},cellSize: 40,range: '2017-02'},{orient: 'vertical',yearLabel: {margin: 40},monthLabel: {margin: 20},cellSize: 40,left: 460,range: '2017-01'},{orient: 'vertical',yearLabel: {margin: 40},monthLabel: {margin: 20},cellSize: 40,top: 350,range: '2017-03'},{orient: 'vertical',yearLabel: {margin: 40},dayLabel: {firstDay: 1,nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']},monthLabel: {nameMap: 'cn',margin: 20},cellSize: 40,top: 350,left: 460,range: '2017-04'}],series: [{type: 'graph',edgeSymbol: ['none', 'arrow'],coordinateSystem: 'calendar',links: links,symbolSize: 10,calendarIndex: 0,data: graphData}, {type: 'heatmap',coordinateSystem: 'calendar',data: getVirtulData(2017)}, {type: 'effectScatter',coordinateSystem: 'calendar',calendarIndex: 1,symbolSize: function (val) {return val[1] / 40;},data: getVirtulData(2017)}, {type: 'scatter',coordinateSystem: 'calendar',calendarIndex: 2,symbolSize: function (val) {return val[1] / 60;},data: getVirtulData(2017)}, {type: 'heatmap',coordinateSystem: 'calendar',calendarIndex: 3,data: getVirtulData(2017)}] };myChart.setOption(option);</script></body></html>總結
以上是生活随笔為你收集整理的180Echarts - 日历坐标系（Calendar Charts）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql多表查询原生jdbc
- 下一篇： 怎么给游戏配音？快看这篇游戏配音教程吧