echarts改造实现代码提交日历热力图

项目新需求，拿到需求给的图，说实话我有点懵，总不能HTML+css徒手画吧。。。
其次我去看了echarts，热力图类似，但是还是很不一样的样式，又懵了。。。

首先是解决方式，徒手画我是放弃了，逻辑处理麻烦，更何况每年日期的块块也不一样，于是我决定，改造echarts！！！

好吧，废话不说，上echarts实现代码：

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
// 制造当年假数据，具体情况数据请从接口获取
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), 2]);
  }
  return data;
}
let nowyear = '2003'; // 动态改变年日期 
option = {
  tooltip: {
    formatter(params) {
      return (
        `${params.data[0]},` + `\n` + `
        提交代码：${params.data[1]}行`
      );
    }
  },
  visualMap: {
    show: false,
    min: 0,
    max: 10000,
    type: 'piecewise',
    orient: 'horizontal',
    left: 'center',
    top: 65,
    pieces: [
      // 自定义每一段的范围，以及每一段的文字
      { gte: 150, color: 'blue' }, // 不指定 max，表示 max 为无限大（Infinity）。
      { gte: 100, lte: 150, color: 'rgb(98,155,223)' },
      { gte: 50, lte: 100, color: 'rgb(167,213,255)' },
      { gte: 1, lte: 50, color: 'rgb(214,233,250)' },
      { lte: 0, color: 'rgb(238,238,238)' }
    ]
  },
  calendar: {
    top: 120,
    left: 30,
    right: 30,
    cellSize: 25,
    splitLine: false,
    range: nowyear,
    itemStyle: {
      borderWidth: 0.5,
      borderColor: 'black',
      normal: {
        borderWidth: 3,
        borderColor: 'rgb(255, 255, 255)'
      }
    },
    yearLabel: { show: false }
  },
  series: {
    type: 'heatmap',
    coordinateSystem: 'calendar',
    data: getVirtualData(nowyear)
  }
};

option && myChart.setOption(option);

以上代码亲测可以实现以上原型图效果，但是坑还是很多，小心使用，大胆改造！good luck~