react使用echart绘制大饼图

需求： 封装echart-option,手动实现下载png图片功能(echart提供的saveImage由于不能控制位置，故弃用)

除echart-option以外的配置

//resource:array echart渲染依赖的数组, title:string 保存图片时的文件名
function MajorBar（resource,title）{
  if (!Array.isArray(receiveEchartResource) || Array.isArray(receiveEchartResource) && receiveEchartResource.length < 1) return
    const divRef = useRef()  //echart dom
    const [imgSrc, setImgSrc] = useState('')  //图片地址，需要ehcart返回 
    useEffect(() => {}
      if (!divRef.current) return
      // 这里配置options,放到第二步来写
          const option = {
              ....第二步来写 
          }
      //
      // 初始化mychart，过程详见上一文章
        const myChart = echarts.getInstanceByDom(divRef.current) ?? echarts.init(divRef.current, ECHARTS_THEME)
        myChart.setOption(option)
        window.onresize = () => {
            myChart.resize()
        }
       // 获取图片路径，返回base64码
        setImgSrc(myChart.getDataURL('png'))
    }，[receiveEchartResource])  //监听receiveEchartResource变化，


  //配置下载图片,本质是使用js动态创建a链接实现下载
  const saveAsImage=（title,imgSrc）=>{
      const elink = document.createElement('a')
    elink.download = title
    elink.style.display = 'none'
    elink.href = imgSrc
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href) // 释放URL 对象
    document.body.removeChild(elink)
  }

//有时候由于echart渲染图表太多，可能需要使用横向滚动条，因而，需要给echart容器开启**横向滚动**
return <>
      <div ref={divRef} style={{
                height: "440px", overflowX: 'scroll',/* 定义超出此盒子横向滚动 */
                overflowY: 'hidden'
            }}  >
            </div>

<>
}

option详细配置

/***
大饼图的基础配置有以下几点，
xAxis：表示横轴
series中的data表示纵向数据，type标识图表的类型
值得一提的是yAxis不表示纵向数据，牢记
有时候横轴数据个体字数可能太多，所以需要使用`formmat`进行折行处理
***/
const option = {
//横轴
 xAxis: {
    type: 'category',
     data: receiveEchartResource.map(v => v.spec_name),
     //折行处理 使用formmat
     axisLabel: {
      show: true,
      color: '#00000073',
      fontSize: 12,
      interval: 0,
      formatter: (params) => {
        //粘贴以下function内未注释的代码
        let newParamsName = ''
        let paramsNameNumber = params.length
        if (paramsNameNumber > 14) {
          paramsNameNumber = 14
        }
        let provideNumber = 5
        let rowNumber = Math.ceil(paramsNameNumber / provideNumber)
        if (paramsNameNumber > provideNumber) {
          for (var p = 0; p < rowNumber; p++) {
            let tempStr = ''
            let start = p * provideNumber
            let end = start + provideNumber
            if (p == rowNumber - 1) {
              tempStr = params.substring(start, paramsNameNumber)
            } else {
              tempStr = params.substring(start, end) + '\n'
            }
            newParamsName += tempStr
          }
        } else {
          newParamsName = params
        }
        return newParamsName
      },
      textStyle: {
        lineHeight: 16,
      },
    },
},
//此配置不代表纵轴数据
  yAxis: {
      type: 'value'
},
//data标识纵轴数据，type标识图表类型
series: [{
    data: [100, 150, 120, 90, 50, 130, 110],
    type: 'bar',
    // 显示字段label
    label: {
        show: true,
        position: 'top'
    },

}],
}

以上