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() } }); 复制代码看下效果吧
作者：邓惠子本尊
链接：https://juejin.cn/post/7028144309853487134