echarts日历热力图代码

好的，以下是一个简单的 echarts 日历热力图的代码示例：

// 引入 echarts
import echarts from 'echarts';

// 初始化 echarts 实例
const myChart = echarts.init(document.getElementById('myChart'));

// 配置 option
const option = {
  // 设置图表类型为日历热力图
  type: 'heatmap',
  // 设置 x 轴为时间轴
  calendar: {
    orient: 'vertical',
    yearLabel: {
      show: false,
      textStyle: {
        color: '#333',
        fontSize: 12,
      },
    },
    monthLabel: {
      show: true,
      textStyle: {
        color: '#333',
        fontSize: 12,
      },
    },
    dayLabel: {
      show: true,
      textStyle: {
        color: '#333',
        fontSize: 12,
      },
    },
    range: ['2021-01-01', '2021-12-31'],
    cellSize: [30, 30],
  },
  // 设置颜色映射规则
  visualMap: {
    min: 0,
    max: 100,
    type: 'piecewise',
    orient: 'horizontal',
    left: 'center',
    top: '10%',
    pieces: [
      { min: 0, max: 20, label: '0-20', color: '#ebedf0' },
      { min: 20, max: 40, label: '20-40', color: '#c6e48b' },
      { min: 40, max: 60, label: '40-60', color: '#7bc96f' },
      { min: 60, max: 80, label: '60-80', color: '#239a3b' },
      { min: 80, max: 100, label: '80-100', color: '#196127' },
    ],
  },
  // 设置数据
  series: [
    {
      data: [
        { name: '2021-01-01', value: 50 },
        { name: '2021-01-02', value: 80 },
        { name: '2021-01-03', value: 20 },
        // ...更多数据
      ],
      type: 'heatmap',
    },
  ],
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

以上代码中，我们首先引入了 echarts 库，并初始化了一个 echarts 实例。然后，通过配置 option 对象来设置日历热力图的各种属性，包括数据、日期范围、颜色映射规则等。最后，使用 `setOption` 方法将配置项和数据显示在页面上。

当然，这只是一个简单的示例，实际的 echarts 日历热力图可能会更加复杂，需要根据具体需求做出相应的调整。