/**
* 自动生成热力图所需的模拟数据
* @param {number} roomCount 数量 (y轴)
* @param {number} dayCount 天数 (x轴)
*/
export function generateMockData(roomCount = 8, dayCount = 15) {
const xAxisData = []
const yAxisData = []
const seriesData = []
// 1. 生成日期格式的 xAxisData (如：'5-20', '5-21' 等)
for (let i = 0; i < dayCount; i++) {
xAxisData.push(`5-${20 + i}`)
}
// 2. 生成名称 yAxisData
for (let j = 0; j < roomCount; j++) {
yAxisData.push(`${j + 1}`)
}
// 3. 生成热力图坐标矩阵数据 [xIndex, yIndex, value]
// value 为秒数，对应 visualMap 中的各个区间颜色
const possibleValues = [0, 1800, 3600, 7200, 14400, 21600, 28800, 36000]
for (let y = 0; y < roomCount; y++) {
for (let x = 0; x < dayCount; x++) {
const randomVal = possibleValues[Math.floor(Math.random() * possibleValues.length)]
seriesData.push([x, y, randomVal])
}
}
return {
xAxisData,
yAxisData,
seriesData,
}
}
// 自动生成一份默认的模拟数据
const mock = generateMockData(8, 15)
export const roomHeatmapOption = {
tooltip: {
position: 'top',
},
grid: {
left: 65,
right: 10,
top: 10,
bottom: 30,
containLabel: false,
},
xAxis: {
type: 'category',
data: mock.xAxisData, // 自动使用模拟生成的数据
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: false },
splitArea: { show: false },
axisLabel: {
fontSize: 10,
color: '#86909c',
rotate: 45,
},
},
yAxis: {
type: 'category',
data: mock.yAxisData, // 自动使用模拟生成的数据
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: false },
splitArea: { show: false },
axisLabel: {
fontSize: 10,
color: '#4e5969',
width: 60,
overflow: 'truncate',
},
},
visualMap: {
type: 'piecewise',
show: false,
pieces: [
{ lte: 0, color: '#f2f3f5' },
{ gt: 0, lte: 3600, color: '#e8f3ff' },
{ gt: 3600, lte: 7200, color: '#bedaff' },
{ gt: 7200, lte: 14400, color: '#94bfff' },
{ gt: 14400, lte: 28800, color: '#4080ff' },
{ gt: 28800, color: '#165dff' },
],
},
series: [
{
type: 'heatmap',
label: { show: false },
itemStyle: {
borderWidth: 1,
borderColor: '#fff',
borderRadius: 2,
},
data: mock.seriesData, // 自动使用模拟生成的数据
},
],
dataZoom: [
{
type: 'inside',
xAxisIndex: 0,
zoomLock: true,
startValue: 0,
endValue: 14,
},
{
type: 'inside',
yAxisIndex: 0,
zoomLock: true,
startValue: 0,
endValue: 9,
},
],
}- OS:
- Browser:
- Framework:
Version
6.1.0
Link to Minimal Reproduction
no
Steps to Reproduce
使用热力图
Current Behavior
在6.0 中热力图是没有问题的，没有执行drawImage
6.1 中 同样的options 热力图执行了 drawImage 并且报错
https://github.com/ecomfe/zrender/blob/32b6686724832dcea026e9443d056ea216ed0ab2/src/canvas/Painter.ts#L507
options 如下
Expected Behavior
不报错并且正常渲染
Environment
Any additional comments?
No response