background

The postCSs-pxtoREM plugin can’t penetrate echarts, so we want to change the echarts to REM

upgrade

  • Offload originalecharts

npm uninstll echarts -D

  • The latest version is5.1.2 (npm info echarts versionsCan be viewed)
  • The installation

NPM [email protected] - I D

API changes

  • Basically turn the two-tier data structure into one

For example,

1. Legend problem

  • ItemGap is the interval, both set toremUnit, otherwise the screen will get bigger and the spacing will not be enough
        legend: {
          textStyle: {
            fontSize: '1rem'.color: '# 333'.itemGap: '1.5 rem'
          },
          data: data.legend
        },
Copy the code

2, resize dynamic effect disappeared

        this.myChart.resize({
          animation: {
            duration: 1}})Copy the code

3. Set skins (js/ JSON version 5 is not available)

4.0

 import {theme} from '@/util/chartTheme'
 echarts.init(this.$refs[this.chartId], theme)
Copy the code

The skin has not been updated to the echarts5 version

Address of the skin

Problems, through the prompt, basic manual change can be solved

4, some modification of the format tips

Basically, you take two layers of content, you get rid of the outer properties and then you swap the properties as follows