vue+echarts 实现日历坐标系+热力图 按月隔开的图表

预览(由于图表过长，用div包裹后实现滚动)

实现分隔思路

1. 日历坐标系不自带分隔，就用边框粗细来实现伪分隔
2. 还有一种分隔思路是使用多张热力图图表，这意味着series中会有多个对象，而且不方便传值
3. echarts官方实例中不带文字的显示，所以根据文档查阅，自定义热力图中的label就可以实现

实现代码

<div class="ip-risk--left">
   <div ref="chart" class="ip-risk__chart">div>
 div>

getDateData() {
     
      // 模拟数据start
      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),
          ]);
        }
        return data;
      }
      // 模拟数据end
      let chartDom = echarts.init(this.$refs.chart);
      let option = {
     
        tooltip: {
     
          position: "top",
          formatter: function (p) {
     
            var format = echarts.format.formatTime("yyyy-MM-dd", p.data[0]);
            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: 5,
              color: "#fff",
            },
          },
        },
        series: [
          {
     
            type: "heatmap",
            coordinateSystem: "calendar",
            calendarIndex: 0,
            data: getVirtulData(2020),
            label: {
     
              show: true,
              formatter: function (params) {
     
                return Number(params.data[0].substring(8, 10));
              },
            },
          },
        ],
      };
      chartDom && chartDom.setOption(option);
      chartDom.resize();
      let sizeFun = () => {
     
        chartDom.resize();
      };
      window.addEventListener("resize", sizeFun);
      this.$once("hook:beforeDestroy", function () {
     
        echarts.dispose(chartDom);
      });
    }