echarts targetvisuals

Question

echart中配置heatmap的时候会报错 Uncaught TypeError: Cannot read properties of undefined (reading 'targetVisuals')，有大神解答一下吗？
配置series代码如下

{
                    type: 'heatmap',
                    coordinateSystem: 'geo',
                    // geoIndex: 0,
                    pointSize: 10,
                    blurSize: 8,
                    minOpacity: 0,
                    manOpacity: 1,
                    data: [
                        [116.405285, 39.904989, 100],
                        [117.190182, 39.125596, 458],
                    ],
                    zlevel: 1
 }
option={
  title: {
                text: '来穗地图'
            },
            // 地图
            geo: { map: 'china',
                // 是否缩放
                roam: true,
                // 默认缩放
                zoom: 1.2,
                // 缩放的大小值
                scaleLimit: {
                    max: 2,
                    min: 0.5
                },
                label: {
                    show: false,
                    textStyle: {
                        color: 'blue',
                        fontSize: 12
                    }
                },
                // 所有的事件取消
                // silent: true,
                itemStyle: {
                    // 正常样式
                    normal: {
                        color: '#ccc',
                        borderWidth: 1,
                    },
                    // 高亮样式
                    emphasis: {
                        color: 'red',
                        borderWidth: 4,

                    },
                },
                // 高亮
                emphasis: {
                    label: {
                        show: true,
                        borderWidth: 0,
                        borderColor: 'red',
                        backgroundColor: 'yellow',
                        padding: [0, 0, 0, 0],
                        // padding: [50, 10, 5, 10], // 设置标签的上、右、下、左四个方向的内边距
                    },
                    itemStyle: {
                        opacity: 0.1
                    }
                },
}

Answer 1

根据你提供的配置代码，你在配置 ECharts 中的热力图（heatmap）系列时，可能会报错 "Uncaught TypeError: Cannot read properties of undefined (reading 'targetVisuals')"。这是因为在 ECharts 中，heatmap 系列需要依赖 visualMap 组件进行颜色的映射配置，而你的配置中没有包含 visualMap 相关的配置项。

要解决这个错误，你可以在 option 对象中添加 visualMap 相关的配置项，例如：

option = {
  title: {
    text: '来穗地图'
  },
  geo: { // 地图配置项 },
  visualMap: {
    show: false, // 是否显示 visualMap 组件
    min: 0, // 数据最小值
    max: 1000, // 数据最大值
    calculable: true, // 是否可计算，用于手动调整 visualMap 组件的值
    inRange: {
      color: ['#ccc', 'red'] // 颜色范围配置，从低到高依次配置颜色
    },
    textStyle: { // visualMap 文字样式配置
      color: 'blue',
      fontSize: 12
    }
  },
  series: [{
    type: 'heatmap',
    coordinateSystem: 'geo',
    pointSize: 10,
    blurSize: 8,
    minOpacity: 0,
    maxOpacity: 1, // 注意这里修正为 maxOpacity
    data: [
      [116.405285, 39.904989, 100],
      [117.190182, 39.125596, 458],
    ],
    zlevel: 1
  }]
};