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

一、添加图片 找到 legend》data处理数据 添加 icon:‘image://./img/报警.png’ 将 ‘题1’ 换成 {name:‘题1’,i

一、添加图片

  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. 效果:
    在这里插入图片描述

二、 更换位置

  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. 效果
    在这里插入图片描述
    变成
    在这里插入图片描述

三、文字后面加富文本

  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. 效果
    在这里插入图片描述