前端 - 有人遇到过ehcarts地图覆盖的颜色在不改变窗口大小的时候颜色是正常的，一旦改变窗口大小就会变为白色嘛？

Question

改变窗口大小前

改变窗口大小后

// resize方法
window.addEventListener('resize', () => {
state.myChart.resize()
// state.myChart.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
})

// `Options：`数据
Options = {
 showLegendSymbol: true,
        tooltip: {
          trigger: 'item',
          fontSize: 20,
          position: (point) => {
            // 固定在顶部
            return [point[0] + 10, point[1] - 40]
          },
          backgroundColor: 'rgba(0,0,0,.6)',
          borderColor: 'rgba(147, 235, 248, .8)',
          textStyle: {
            color: '#FFF',
          },
          // 如果需要自定义 tooltip样式，需要使用formatter
          formatter:formatter
          },
        },
        visualMap: {
          min: 0,
          max: 10,
          show: false,
          seriesIndex: 0,
          // 颜色
          inRange: {
            color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
          },
        },
        // 底部背景
        geo: {
          show: true,
          aspectScale: 0.85, //长宽比
          zoom: 1.2,
          top: '10%',
          left: '25%',
          map: state.currentName,
          roam: false,
          itemStyle: {
            areaColor: 'rgba(0,0,0,0)',
            shadowColor: 'rgba(7,114,204, .8)',
            shadowOffsetX: 5,
            shadowOffsetY: 5,
          },
          emphasis: {
            itemStyle: {
              areaColor: '#00aeef',
            },
          },
        },
        series: [
          {
            name: `${state.currentName}地区`,
            //使用上面注册的地图
            map: state.currentName,
            //初始化类型写地图00
            type: 'map',
            roam: false, //鼠标滚轮缩放
            aspectScale: 0.85, //长宽比
            zoom: 1.2,
            top: '10%',
            left: '25%',
            selectedMode: false, // 点击选中区域
            // 区块文字样式
            label: {
              show: true,
              color: '#fff',
              formatter: '{b}',
              fontSize: 15,
            },
            // 区块样式
            itemStyle: {
              itemStyle: {
                color: 'red',
                areaColor: 'rgba(19,54,162, .5)',
                borderColor: 'rgba(0,242,252,.3)',
                borderWidth: 1,
                shadowBlur: 7,
                shadowColor: '#00f2fc',
              },
              label: {
                formatter: (params) => `${params.name}`,
                show: true,
                position: 'insideRight',
                fontSize: 14,
                color: '#efefef',
              },
            },
            emphasis: {
              show: true,
              color: '#05C3F9',
              itemStyle: {
                areaColor: '#4f7fff',
                borderColor: 'rgba(0,242,252,.6)',
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: '#00f2fc',
                color: '#fff',
              },
            },
            select: {
              // 地图选中区域样式
            },
            rippleEffect: {
              period: 4,
              scale: 2.5,
              brushType: 'stroke',
            },
            // data: [],
            data: props.seriesData,
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: 7,
            effectType: 'ripple',
            legendHoverLink: false,
            showEffectOn: 'render',
            rippleEffect: {
              period: 4,
              scale: 2.5,
              brushType: 'stroke',
            },
            zlevel: 1,
            itemStyle: {
              color: '#99FBFE',
              shadowBlur: 5,
              shadowColor: '#fff',
            },
            data: convertData(seriesData),
          },
        ],
}

Answer 1

在 resize 方法里销毁 echarts 销毁即可

  window.addEventListener('resize', () => {
    echarts.dispose()
    state.myChart.resize()
    // debugger
  })