echarts example

by shiv_veerashetty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.7/plugin/weekYear.min.js"></script>
<div id="main" style="width: 800px;height:800px;"></div>

JavaScript

var hours = [1,2,3,4,5,6,7,8,9,10,11,12];
/* var hours = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; */
var days = ['1', '2', '3','4', '5'];

/* function getWeeksByMonth(year) {
  const weeksByMonth = [];

  // Loop through each month (1 to 12)
  for (let month = 1; month <= 12; month++) {
    // Get the number of weeks in the month
    const startOfMonth = dayjs().year(year).month(month - 1).date(1);
    const endOfMonth = dayjs().year(year).month(month - 1).endOf('month');
    const numWeeks = endOfMonth.diff(startOfMonth, 'week') + 1;

    // Add the week numbers to the array
    const weeks = [];
    for (let i = 0; i < numWeeks; i++) {
      weeks.push(startOfMonth.add(i, 'week').week());
    }

    weeksByMonth.push({ month, weeks });
  }

  return weeksByMonth;
}

const year = 2023;
const weeksByMonth = getWeeksByMonth(year);
console.log(weeksByMonth); */

const calData = [
    {
        "month": 1,
        "weeks": [
            1,
            2,
            3,
            4,
            5
        ]
    },
    {
        "month": 2,
        "weeks": [
            5,
            6,
            7,
            8
        ]
    },
    {
        "month": 3,
        "weeks": [
            9,
            10,
            11,
            12,
            13
        ]
    },
    {
        "month": 4,
        "weeks": [
            13,
            14,
            15,
            16,
            17
        ]
    },
    {
        "month": 5,
        "weeks": [
            18,
            19,
            20,
            21,
            22
        ]
    },
    {
        "month": 6,
        "weeks": [
            22,
            23,
            24,
            25,
            26
        ]
    },
    {
        "month": 7,
        "weeks": [
            26,
            27,
            28,
            29,
            30
        ]
    },
    {
        "month": 8,
        "weeks": [
            31,
            32,
            33,
            34,
  ...