先说结果,补上了一行tooltip.trigger后能正常渲染了。
报错情况:
在页面中添加了一个日历热力图后,一渲染它就白屏,控制台报错如下:
echarts-for-react版本是当前最新的3.0.2,尝试debug但没看懂源码这里是怎么就取到undefined了:
项目里的配置数据如下,在echarts-for-react官网上运行也没问题,但就是在本地运行时会导致白屏。
// 日历图配置const calendarOption ={"title": {"text": "任务完成热力图","left": "center"},"tooltip": {},"visualMap": {"min": 0,"max": 5,"calculable": true,"orient": "horizontal","left": "center","bottom": 0,"inRange": {"color": ["#e6f3ff","#667eea"]}},"calendar": [{"range": "2025-06","cellSize": ["auto",20],"itemStyle": {"borderWidth": 0.5},"yearLabel": {"show": false},"dayLabel": {"firstDay": 1,"nameMap": "cn"},"monthLabel": {"nameMap": "cn"}}],"series": [{"type": "heatmap","coordinateSystem": "calendar","calendarIndex": 0,"data": [["2025-06-01",0],// …略["2025-06-29",0],["2025-06-30",0]]}]
}
<ReactEChartsoption={calendarOption}style={{ height: '300px' }}
/>
有一个比较全面的echarts配置项查询文档:https://echarts.apache.org/zh/option.html#title。