echarts添加图片，文字和图片更换位置

客官°小女子只卖身不卖艺 2023-01-11 08:52 245阅读 0赞

# 一、添加图片 #

1.  找到 legend》data
2.  处理数据  
    添加 icon:‘image://./img/报警.png’  
    将 **‘题1’** 换成 **\{name:‘题1’,icon:‘image://./img/报警.png’\}**
3.  代码：

legend: {
                            type:"plain",
                            orient: 'vertical',
                            x: 'left',
                            top:50,
                            left:20,
                            data:[{name:'题1',icon:'image://./img/报警.png'},'题2',题3','题4','题5'],
                            textStyle:{
                                color:'#2DA7F6',
                                fontSize:'16'
                            }
                        },

1.  效果：  
    ![在这里插入图片描述][20210126115623329.png_pic_center]

# 二、 更换位置 #

1.  找到 legend
2.  添加属性 align:‘right’,
3.  代码：

legend: {
                            type:"plain",
                            orient: 'vertical',
                            x: 'left',
                            top:50,
                            left:20,
                            data:['题2',题3','题4','题5'],
                            align:'right',
                            textStyle:{
                                color:'#2DA7F6',
                                fontSize:'16'
                            }
                        },

1.  效果  
    ![在这里插入图片描述][20210126134204762.png_pic_center]  
    **变成**  
    ![在这里插入图片描述][20210126134216299.png_pic_center]

# 三、文字后面加富文本 #

1.  找到 legend
2.  添加属性

formatter: function (value) {
                                return value+'{a|}';
                            },
                            textStyle: {
                                color:'#2DA7F6',
                                fontSize:'16',
                                //rich放在textStyle里面
                                rich: {
                                    a: {
                                        color: 'red',
                                        fontSize:'24',
                                        height: 20,
                                        width: 20,
                                        backgroundColor: {
                                            image:  './img/报警.png'
                                        },
                                    },
                                }
                            },

1.  代码：

legend: {
                            type:"plain",
                            orient: 'vertical',
                            x: 'left',
                            top:50,
                            left:20,
                            data:['题2',题3','题4','题5'],
                          
                            formatter: function (value) {
                                return value+'{a|}';
                            },
                            textStyle: {
                                color:'#2DA7F6',
                                fontSize:'16',
                                //rich放在textStyle里面
                                rich: {
                                    a: {
                                        color: 'red',
                                        fontSize:'24',
                                        height: 20,
                                        width: 20,
                                        backgroundColor: {
                                            image:  './img/报警.png'
                                        },
                                    },
                                }
                            },
                        },

1.  效果  
    ![在这里插入图片描述][20210126143005878.png_pic_center]

[20210126115623329.png_pic_center]: /images/20221119/ee6f5f74cb404b4285f690bce69e4099.png
[20210126134204762.png_pic_center]: /images/20221119/315447ed77944a3b817d1311202917fb.png
[20210126134216299.png_pic_center]: /images/20221119/aa7a6879f26947499edfbfd065b00621.png
[20210126143005878.png_pic_center]: /images/20221119/e5cd693d49f14ab6a46f37199815d924.png