echarts图表缩放时，怎么让文字也跟着缩放？

前言

echarts将roam属性设置成 scale 或者 true,就开启鼠标缩放的效果。但是缩放过程中会发现字体并不会随着缩放变化。如下图所示。本文要解决的问题就是，让echarts缩放时文字也跟着缩放。

问题难点

echarts支持的鼠标事件包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'。echarts缩放是鼠标滚动触发的，echarts并没有支持mousewheel。直接使用echartsInstance注册mousewheel是不起作用的。

使用getZr()注册和取消mousewheel事件

getZr是啥我也不清楚，百度发现有一个这样的函数，能够支持事件的注册和取消。有清楚的小伙伴可以留言共享。

注册事件： echartsInstance.getZr().on('eventName', callback)

取消事件： echartsInstance.getZr().off('eventName', callback)

原生echarts图表，实现字体缩放

根据缩放后的zoom值，动态变化标签label的fontsize

//注册之前先取消事件
hotWordCloud.getZr().off("mousewheel")
//设置文字(缩放文字)
hotWordCloud.getZr().on("mousewheel", function () {
    let option2 = hotWordCloud.getOption();
    if(option2.series[0]){
        let zoom = option2.series[0].zoom;
        wordsArr.forEach(item => {
            item.label.fontSize = item.label.fontSize * zoom;
            item.symbolSize = item.symbolSize * zoom;
            return item;
        })
        option.series[0].force.edgeLength = option.series[0].force.edgeLength * zoom
        option.series[0].force.repulsion = option.series[0].force.repulsion * zoom

        option.series[0].data = wordsArr
        hotWordCloud.setOption(option);
    }
});

react-for-echarts组件图表，实现字体缩放

由于react-for-echarts把echarts进行了封装，getZr函数被封装在了this.refs.myEcharts.getEchartsInstance()._api里面了。

<ReactEcharts ref="myEcharts" className="echarts-warpper" option={this.state.option}/>

let hotWordCloud = this.refs.myEcharts.getEchartsInstance()._api;
hotWordCloud.getZr().off("mousewheel")
//设置文字(缩放文字)
hotWordCloud.getZr().on("mousewheel",  () => {
    let option2 = hotWordCloud.getOption();
    if(option2.series[0]){
        let zoom = option2.series[0].zoom;
        option2.series[0].data.forEach(item => {
            item.label.normal.fontSize = item.label.normal.fontSize * zoom;
            item.symbolSize = item.symbolSize * zoom;
            return item;
        })
        let option = {...this.state.option};
        //@ts-ignore
        option.series[0].force.edgeLength *=  zoom
        //@ts-ignore
        option.series[0].force.repulsion *= zoom
        //@ts-ignore
        option.series[0].data = option2.series[0].data
        this.setState({option})
        //@ts-ignore
        this.refs.myEcharts.rerender()
    }
});

看下效果吧