遇到類似的情況,很大情況是echart 配置中因為圖片引入路徑的問題

如今的框架,ng,vue,react 在打包編譯的時候 都需要先用webpack 進行解析后再壓縮打包,路徑引入問題，一定要注意

image

?

image.gif

解決辦法1

....
//引入圖片
import echartMapLocation from "@/assets/images/echartMapLocation.png"
import dbsBox from "@/assets/images/dbs_box.png"

...

//echart配置引入
....
                    type: 'image',
                        style: {
                                image:dbsBox,
                                 width:130,
                                height:80,
                                textFill:'#ffffff',
                                // textAlign:'center',
                                textPosition:'center',

                        },
......

image.gif

解決方法2

用require引入

                type: 'image',
                    style: {
                     image:require('../../../src/assets/images/echartMapLocation.png') ,
                            width:20,
                            height:18,

                    }

image.gif