e-charts use rich (rich text) image position is wrong, record

It is best to set the height and width for the picture, otherwise there will be an error that the position of the picture loaded for the first time is wrong

It is best to set the height and width for the picture, otherwise there will be an error that the position of the picture loaded for the first time is wrong

It is best to set the height and width for the picture, otherwise there will be an error that the position of the picture loaded for the first time is wrong

Import the pictures that need to be used (currently this kind of import is relatively easy to use)

import xzImg from '../../../../../../public/img/analysis/xz1.png'
import cgImg from '../../../../../../public/img/analysis/cg1.png'
import qtImg from '../../../../../../public/img/analysis//qt1.png'
import syImg from '../../../../../../public/img/analysis/sy1.png'

If you want the x-axis to display values, the y-axis to display pictures as coordinates, the type of xAxis and yAxis represents how to display

xAxis: { type: 'value', },

yAxis: {
                type: 'category',
                data: data,
                axisLabel: {
                  inverse: true,
                  formatter: function (value) {
                    return '{' + value + '| }';
                  },
                  rich: {
                    xz: {
                      height: 40,
                      width:90,
                      align: 'center',
                      backgroundColor: {
                        image: xzImg
                      }
                    },
                    cg: {
                      height: 40,
                      width:90,
                      align: 'center',
                      backgroundColor: {
                        image: cgImg
                      }
                    },
                    sy: {
                      height: 40,
                      width:90,
                      align: 'center',
                      backgroundColor: {
                        image: syImg
                      }
                    },
                    qt: {
                      height: 40,
                      width:90,
                      align: 'center',
                      backgroundColor: {
                        image: qtImg
                      }
                    }
                  }
                }
              },

The rich definition currently only supports English. If the coordinates need to display Chinese characters, the value in the formatter needs to be treated specially, for example: formatter: function (value) {
  if(value==='administrative'){
    value='xz'
  }
  return '{' + value + '| }';
},

' xz' is the picture defined in rich.