Echarts在线免费图表

 
            function getVirtualData(year) {
  const date = +echarts.time.parse(year + '-01-01');
  const end = +echarts.time.parse(+year + 1 + '-01-01');
  const dayTime = 3600 * 24 * 1000;
  const data = [];
  for (let time = date; time < end; time += dayTime) {
    data.push([
      echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
      Math.floor(Math.random() * 1000)
    ]);
  }
  return data;
}
option = {

  tooltip: {
    position: 'top',
    formatter: function (p) {
      const format = echarts.time.format(p.data[0], '{yyyy}-{MM}-{dd}', false);
      return format + ': ' + p.data[1];
    }
  },
visualMap: {
          min: 0,
          max: 1000,
          top: "center",
          show: false,
          inRange: {
            color: ["#5291FF", "#C7DBFF"],
          },
        },

  calendar: {
    width: 200,
          cellSize: [30, 30],
          dayLabel: {
            nameMap: "cn",
          },
          monthLabel: {
            margin: 20,
            nameMap: "cn",
          },
          yearLabel: {
            show: false,
          },
          orient: "vertical",
          range: "2020",
          itemStyle: {
            borderColor: "#ccc",
          },
          splitLine: {
            lineStyle: {
              width: 2,
              color: "#fff",
            },
          },

  },
  series: [
    {
            type: "heatmap",
            coordinateSystem: "calendar",
            calendarIndex: 0,
            data: getVirtualData(2020),
            label: {
              show: true,
              formatter: function (params) {
                return Number(params.data[0].substring(8, 10));
              },
            },
          },

  ]
};