记录一次echarts4升级到echart5

Posted 2023-02-07 wangmj518

背景

由于安装了postcss-pxtorem插件，让单位px变成了rem
发现此插件无法穿透echarts 所以想让echarts单位也变成rem
如何把图表中文字大小使用rem控制, 经查阅，echart5才支持rem

升级

• 卸载原有的echarts npm uninstall echarts -D
• 当前最新版是5.1.2 (npm info echarts versions可以查看)
• 安装 npm i echarts@5.1.2 -D

api变化

• 基本把提示的两层数据结构变成一层就行

例如

1、legend问题

• itemGap是间隔，都设置成rem单位，不然屏幕变大，间隔会不够用

        legend: 
          textStyle: 
            fontSize: '1rem',
            color: '#333',
            itemGap: '1.5rem'
          ,
          data: data.legend
        ,
复制代码

2、resize动效消失

        this.myChart.resize(
          animation: 
            duration: 1
          
        )
复制代码

3、设置皮肤(还没有5版本的js/json)

4.0

 import theme from '@/util/chartTheme'
 echarts.init(this.$refs[this.chartId], theme)
复制代码

皮肤还没有更新到echarts5的版本
皮肤地址

问题，通过提示，基本手动改都能解决

4、一些修改格式提示

基本是把两层内容，去掉外层属性 还有一种属性对调的 如下

作者：fangzhou_lu
链接：https://juejin.cn/post/6981985613020921863
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。