background
The postCSs-pxtoREM plugin can’t penetrate echarts, so we want to change the echarts to REM
upgrade
- Offload original
echarts
npm uninstll echarts -D
- The latest version is
5.1.2
(npm info echarts versions
Can 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 to
rem
Unit, 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