使用canvas和toDataURL绘制雷达图时，没有绘制雷达面积

[wind4gis]

General Questions

Issue Type

• [ ] I have a question to ask about how to use ECharts to ...；我想提问如何使用 ECharts 实现某功能
• [x] I have a bug to report；我想要报 bug
• [x] I have a feature to request, e.g.: I'd like a new feature that ...；我需要一个新功能
• [ ] I have a feature to enhance, e.g.: The current feature should be improved in the way that ...；我希望改进某个功能
• [ ] There's something wrong with the documents；文档有些问题
• [ ] Others, or I'm not sure which issue types to choose here；其他，或我不知道应该选什么类型

Issue Details

我使用最新版的echarts 4.2.0-rc.2，在绘制雷达图的时候出问题了。绘制海报图时，使用radar直接绘制时可以绘制出雷达的面积，但是使用getDataURL和getConnectedDataURL方法，导出图片用canvas绘制后，发现雷达面积无法绘制出来

Expected Behavior

使用getDataURL和getConnectedDataURL方法导出的图片，通过canvas绘制可以画出对应的面积图

Current Behavior

使用canvas之后面积变小或消失

没有使用canvas表现正常

Online Example

https://gallery.echartsjs.com/editor.html?c=xJ_CSOnRPo&v=1

class Result extends Component {
  componentDidMount() {
    this.drawRadarEchart()
    this.saveToImg()
  }

  drawRadarEchart() {
    const { clientWidth, clientHeight } = document.documentElement
    console.log(window.devicePixelRatio)

    const myChart = echarts.init(document.getElementById('radarDiv'),
      {},
      {
        devicePixelRatio: window.devicePixelRatio,
        width: clientWidth,
        height: clientHeight,
      });
    myChart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      calculable: true,
      radar: {
        name: {
          textStyle: {
            color: '#000',
            fontSize: 18,
            fontWeight: 600,
          }
        },
        splitArea: {
          areaStyle: {
            color: '#fff',
            shadowColor: 'rgba(0, 0, 0, 1)',
            shadowBlur: 20,
            opacity: 1
          }
        },
        splitLine: {
          lineStyle: {

          }
        },
        indicator: [
          { text: '销售天才', max: 100 },
          { text: '伯乐慧眼', max: 100 },
          { text: '单品大咖', max: 100 },
          { text: '晋升达人', max: 100 },
          { text: '积极分子', max: 100 },
        ],
        splitNumber: 8,
        radius: 80,
      }
      ,
      series: [
        {
          name: '完全实况球员数据',
          type: 'radar',
          symbolSize: 1,
          itemStyle: {
            normal: {
              areaStyle: {
                color: '#FED502',
                type: 'default'
              },
              lineStyle: {
                color: '#FED502'
              }
            }
          },
          data: [
            {
              value: [60, 30, 30, 30, 60],
              name: '个人数据'
            }
          ]
        }
      ]
    });
    this.radarChart = myChart
  }

  saveToImg() {
    const { clientWidth, clientHeight } = document.documentElement
    const canvasElem = document.createElement('canvas')
    const saveImg = document.querySelector('#saveImg')
    const saveCtx = canvasElem.getContext('2d')
    const ratio = getPixelRatio(saveCtx);
    canvasElem.style.width = clientWidth + 'px';
    canvasElem.style.height = clientHeight + 'px';
    canvasElem.width = clientWidth * ratio;
    canvasElem.height = clientHeight * ratio;

    const radarImg = new Image()
    const radarSrc = this.radarChart.getConnectedDataURL({
      // pixelRatio: window.devicePixelRatio
    })
    console.log(radarSrc)
    radarImg.src = radarSrc
    radarImg.onload = () => {
      saveCtx.drawImage(radarImg, 0, 0, clientWidth, clientHeight, 0, 0, canvasElem.width, canvasElem.height)
      saveImg.src = canvasElem.toDataURL()
      console.log(canvasElem.toDataURL())
    }
  }

  render() {
    const { clientWidth, clientHeight } = document.documentElement
    return (
      <div className={style.con}>
        <div id='radarDiv' className={style.radarDiv}></div>
        <img id='saveImg' className={style.img} alt="" />
      </div>
    );
  }
}

Topics

Anything Else We Need to Know

Environment

• ECharts version；ECharts 版本: {DESCRIBE_HERE}

• [ ] It happens only on certain browsers or operating systems. 对于特定浏览器或操作系统才会出现的问题，请提供相应环境信息：{BROWSER_VERSION_OR_OS_INFORMATION_HERE}

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!