Echarts在线免费图表

 
            let rowData = [
          ['2023-02-1', 1],
          ['2023-02-2', 2],
          ['2023-02-3', 30],
          ['2023-02-4', 4],
          ['2023-02-5', 5],
          ['2023-02-6', 60],
          ['2023-02-7', 70],
          ['2023-02-8', 8],
          ['2023-02-9', 99],
          ['2023-02-10', 109],
          ['2023-02-11', 11],
          ['2023-02-12', 120],
          ['2023-02-13', 103],
          ['2023-02-14', 14],
          ['2023-02-15', 105],
          ['2023-02-16', 16],
          ['2023-02-17', 170],
          ['2023-02-18', 18],
          ['2023-02-19', 109],
          ['2023-02-20', 200],
          ['2023-02-21', 21],
          ['2023-02-22', 220],
          ['2023-02-23', 203],
          ['2023-02-24', 24],
          ['2023-02-25', 255],
          ['2023-02-26', 326],
          ['2023-02-27', 427],
          ['2023-02-28', 370]
        ]
        /**
         * 日历每天没块点击事件
         * this.chartInst.off('click')
         * this.chartInst.on('click', function (params, event) {
         * that.$emit('cellClick', params.data[0], event)
         * // event.stopPropagation() // 防止事件穿透
         * })
          */
option = {
   //你的代码
    tooltip: {
          position: 'top',
          show: true,
          formatter(e) {
            return `<div">
              <p>${e.data[0].substring(0, 10)}</p>
              <p><span style="display:inline-block;margin:0 5px;border-radius:10px;width:10px;height:10px;background-color:${
                e.color
              };"></span>${e.data[1]}</p>
              </div>`
          },
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以echarts 容器的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            let x = 0 // x坐标位置
            let y = 0 // y坐标位置
            // 当前鼠标位置
            let pointX = point[0]
            let pointY = point[1]
            // echarts 容器大小
            // let viewWidth = size.viewSize[0];
            // let viewHeight = size.viewSize[1];
            // 提示框大小
            let boxWidth = size.contentSize[0]
            let boxHeight = size.contentSize[1]
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = pointX + 5 // 此处需要判断 (pointX+5+boxWidth) < size.viewSize[0]
            } else {
              // 左边放的下
              x = pointX - boxWidth
            }
            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5
            } else {
              // 上边放得下
              y = pointY - boxHeight
            }
            return [x, y]
          }
        },
        grid: {
          height: '100%',
          top: '10%',
          width: '86%',
          left: '4%',
          right: '13%'
        },
        visualMap: {
          min: 0,
          max: 500,
          type: 'piecewise',
          calculable: true,
          seriesIndex: [0],
          show: false,
          orient: 'horizontal',
          left: 'center',
          top: '-2%',
          pieces: [
            // 指定颜色区间
            { min: 0, max: 50, color: '#01FC05' },
            { min: 51, max: 100, color: '#FBFD05' },
            { min: 101, max: 150, color: '#F97D00' },
            { min: 151, max: 200, color: '#98014D' },
            { min: 201, max: 300, color: '#98014D' },
            { min: 301, max: 500, color: '#7C0125' }
          ],
          inRange: {
            //自动颜色区间
            //   color: [
            //     '#01FC05',
            //     '#FBFD05',
            //     '#F97D00',
            //     '#98014D',
            //     '#98014D',
            //     '#7C0125'
            //   ],
            opacity: 0.5
          },
          // controller: {
          //   inRange: {
          //     // color: ['red', 'yellow'],
          //     opacity: 0.3
          //   }
          // },
          itemHeight: 44,
          itemWidth: 44,
          text: ['0', '1', '2', '3', '4', '5'],
          textStyle: {
            fontFamily: 'DINCond-Medium',
            color: '#BFEBFF',
            fontSize: 26
          }
        },
        calendar: {
          top: 30,
          left: 20,
          right: 60,
          bottom: 20,
          orient: 'vertical',
          cellSize: 10,
          range: rowData[0][0].substring(0, 7),
          itemStyle: {
            width: 45,
            height: 30,
            borderWidth: 0.5,
            color: 'transparent'
          },
          splitLine: { show: false },
          dayLabel: {
            firstDay: 1,
            nameMap: ['日', '一', '二', '三', '四', '五', '六'],
            color: '#F00',
            fontSize: '18',
            // backgroundColor: '#00BFFF20',
            margin: 10,
            width: 200,
            height: 200,
            borderColor: '#ff0'
          },
          monthLabel: { show: false },
          yearLabel: { show: false }
        },
        series: {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: rowData,
          label: {
            show: true,
            formatter: function (params) {
              return params.value[1]
            },
            color: '#000',
            fontFamily: '微软雅黑',
            fontSize: 18
          },
          itemStyle: {
            borderWidth: 0,
            borderColor: 'rgba(171,223,242,03)'
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
};