echarts 足压云图

以下是使用Echarts制作足压云图的步骤和示例代码：

1. 引入Echarts库和主题库

<!-- 引入Echarts库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 引入Echarts主题库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>

2. 准备数据

var data = [
  [0, 0, 5],
  [0, 1, 1],
  [0, 2, 0],
  [0, 3, 0],
  [0, 4, 0],
  [0, 5, 0],
  [0, 6, 0],
  [0, 7, 0],
  [0, 8, 0],
  [0, 9, 0],
  [0, 10, 0],
  [0, 11, 2],
  [0, 12, 4],
  [0, 13, 6],
  [0, 14, 8],
  [0, 15, 10],
  [0, 16, 8],
  [0, 17, 6],
  [0, 18, 4],
  [0, 19, 2],
  [0, 20, 0],
  [0, 21, 0],
  [0, 22, 0],
  [0, 23, 0],
  [1, 0, 1],
  [1, 1, 6],
  [1, 2, 0],
  [1, 3, 0],
  [1, 4, 0],
  [1, 5, 0],
  [1, 6, 0],
  [1, 7, 0],
  [1, 8, 0],
  [1, 9, 0],
  [1, 10, 0],
  [1, 11, 3],
  [1, 12, 5],
  [1, 13, 7],
  [1, 14, 9],
  [1, 15, 11],
  [1, 16, 9],
  [1, 17, 7],
  [1, 18, 5],
  [1, 19, 3],
  [1, 20, 1],
  [1, 21, 0],
  [1, 22, 0],
  [1, 23, 0],
  [2, 0, 0],
  [2, 1, 0],
  [2, 2, 7],
  [2, 3, 0],
  [2, 4, 0],
  [2, 5, 0],
  [2, 6, 0],
  [2, 7, 0],
  [2, 8, 0],
  [2, 9, 0],
  [2, 10, 0],
  [2, 11, 4],
  [2, 12, 6],
  [2, 13, 8],
  [2, 14, 10],
  [2, 15, 12],
  [2, 16, 10],
  [2, 17, 8],
  [2, 18, 6],
  [2, 19, 4],
  [2, 20, 2],
  [2, 21, 0],
  [2, 22, 0],
  [2, 23, 0],
  [3, 0, 0],
  [3, 1, 0],
  [3, 2, 0],
  [3, 3, 8],
  [3, 4, 0],
  [3, 5, 0],
  [3, 6, 0],
  [3, 7, 0],
  [3, 8, 0],
  [3, 9, 0],
  [3, 10, 0],
  [3, 11, 5],
  [3, 12, 7],
  [3, 13, 9],
  [3, 14, 11],
  [3, 15, 13],
  [3, 16, 11],
  [3, 17, 9],
  [3, 18, 7],
  [3, 19, 5],
  [3, 20, 3],
  [3, 21, 1],
  [3, 22, 0],
  [3, 23, 0],
  [4, 0, 0],
  [4, 1, 0],
  [4, 2, 0],
  [4, 3, 0],
  [4, 4, 9],
  [4, 5, 0],
  [4, 6, 0],
  [4, 7, 0],
  [4, 8, 0],
  [4, 9, 0],
  [4, 10, 0],
  [4, 11, 6],
  [4, 12, 8],
  [4, 13, 10],
  [4, 14, 12],
  [4, 15, 14],
  [4, 16, 12],
  [4, 17, 10],
  [4, 18, 8],
  [4, 19, 6],
  [4, 20, 4],
  [4, 21, 2],
  [4, 22, 0],
  [4, 23, 0],
  [5, 0, 0],
  [5, 1, 0],
  [5, 2, 0],
  [5, 3, 0],
  [5, 4, 0],
  [5, 5, 10],
  [5, 6, 0],
  [5, 7, 0],
  [5, 8, 0],
  [5, 9, 0],
  [5, 10, 0],
  [5, 11, 7],
  [5, 12, 9],
  [5, 13, 11],
  [5, 14, 13],
  [5, 15, 15],
  [5, 16, 13],
  [5, 17, 11],
  [5, 18, 9],
  [5, 19, 7],
  [5, 20, 5],
  [5, 21, 3],
  [5, 22, 1],
  [5, 23, 0],
  [6, 0, 0],
  [6, 1, 0],
  [6, 2, 0],
  [6, 3, 0],
  [6, 4, 0],
  [6, 5, 0],
  [6, 6, 11],
  [6, 7, 0],
  [6, 8, 0],
  [6, 9, 0],
  [6, 10, 0],
  [6, 11, 8],
  [6, 12, 10],
  [6, 13, 12],
  [6, 14, 14],
  [6, 15, 16],
  [6, 16, 14],
  [6, 17, 12],
  [6, 18, 10],
  [6, 19, 8],
  [6, 20, 6],
  [6, 21, 4],
  [6, 22, 2],
  [6, 23, 0],
  [7, 0, 0],
  [7, 1, 0],
  [7, 2, 0],
  [7, 3, 0],
  [7, 4, 0],
  [7, 5, 0],
  [7, 6, 0],
  [7, 7, 12],
  [7, 8, 0],
  [7, 9, 0],
  [7, 10, 0],
  [7, 11, 9],
  [7, 12, 11],
  [7, 13, 13],
  [7, 14, 15],
  [7, 15, 17],
  [7, 16, 15],
  [7, 17, 13],
  [7, 18, 11],
  [7, 19, 9],
  [7, 20, 7],
  [7, 21, 5],
  [7, 22, 3],
  [7, 23, 1],
  [8, 0, 0],
  [8, 1, 0],
  [8, 2, 0],
  [8, 3, 0],
  [8, 4, 0],
  [8, 5, 0],
  [8, 6, 0],
  [8, 7, 0],
  [8, 8, 13],
  [8, 9, 0],
  [8, 10, 0],
  [8, 11, 10],
  [8, 12, 12],
  [8, 13, 14],
  [8, 14, 16],
  [8, 15, 18],
  [8, 16, 16],
  [8, 17, 14],
  [8, 18, 12],
  [8, 19, 10],
  [8, 20, 8],
  [8, 21, 6],
  [8, 22, 4],
  [8, 23, 2],
  [9, 0, 0],
  [9, 1, 0],
  [9, 2, 0],
  [9, 3, 0],
  [9, 4, 0],
  [9, 5, 0],
  [9, 6, 0],
  [9, 7, 0],
  [9, 8, 0],
  [9, 9, 14],
  [9, 10, 0],
  [9, 11, 11],
  [9, 12, 13],
  [9, 13, 15],
  [9, 14, 17],
  [9, 15, 19],
  [9, 16, 17],
  [9, 17, 15],
  [9, 18, 13],
  [9, 19, 11],
  [9, 20, 9],
  [9, 21, 7],
  [9, 22, 5],
  [9, 23, 3],
  [10, 0, 0],
  [10, 1, 0],
  [10, 2, 0],
  [10, 3, 0],
  [10, 4, 0],
  [10, 5, 0],
  [10, 6, 0],
  [10, 7, 0],
  [10, 8, 0],
  [10, 9, 0],
  [10, 10, 15],
  [10, 11, 12],
  [10, 12, 14],
  [10, 13, 16],
  [10, 14, 18],
  [10, 15, 20],
  [10, 16, 18],
  [10, 17, 16],
  [10, 18, 14],
  [10, 19, 12],
  [10, 20, 10],
  [10, 21, 8],
  [10, 22, 6],
  [10, 23, 4],
  [11, 0, 0],
  [11, 1, 0],
  [11, 2, 0],
  [11, 3, 0],
  [11, 4, 0],
  [11, 5, 0],
  [11, 6, 0],
  [11, 7, 0],
  [11, 8, 0],
  [11, 9, 0],
  [11, 10, 0],
  [11, 11, 13],
  [11, 12, 15],
  [11, 13, 17],
  [11, 14, 19],
  [11, 15, 21],
  [11, 16, 19],
  [11, 17, 17],
  [11, 18, 15],
  [11, 19, 13],
  [11, 20, 11],
  [11, 21, 9],
  [11, 22, 7],
  [11, 23, 5],
];

3. 配置Echarts

var option = {
  tooltip: {},
  visualMap: {
    min: 0,
    max: 20,
    calculable: true,
    orient: "horizontal",
    left: "center",
    bottom: "15%",
  },
  calendar: {
    top: "middle",
    left: "center",
    orient: "vertical",
    cellSize: [80, 80],
    yearLabel: { show: false },
    dayLabel: {
      nameMap: "cn",
      firstDay: 1,
      margin: 20,
      fontSize: 20,
      color: "#999",
    },
    monthLabel: {
      nameMap: "cn",
      margin: 20,
      fontSize: 20,
      color: "#999",
    },
    range: ["2021-01-01", "2021-12-31"],
  },
  series: {
    type: "heatmap",
    coordinateSystem: "calendar",
    data: data,
  },
  animation: false,
  color: ["#f6efa6", "#d88273