0
点赞
收藏
分享

微信扫一扫

Echarts除了tooltip其它的标签暂时都不支持html情况下label标签加背景图片的美化方案

小铺有酒一两不够 2022-02-10 阅读 7


Echarts除了tooltip其它的标签暂时都不支持html情况下label标签加背景图片的美化方案_html

tooltip组件html的用法

tooltip: {
show: true,
backgroundColor: "transparent",
formatter: function (params) {
var htmlStr = '';
htmlStr += '<div class="bgboder">';
htmlStr += '<div id="city">所属城市:' + params.data.name + '</div><div id="trans">交易数量:' + params.data.value + ' 万元</div>';
htmlStr += '</div>';
return htmlStr;
}
},

label组件的用法

label: {
show: true,
formatter: function (params) {
//console.log(params);
let arr = ["所属城市:" + params.data.name, "交易数量" + params.data.value];
return arr.join("\n");
},
backgroundColor: {
image: 'images/bgboder.png',
},
padding: [30, 0, -20, 0],//内边距属性
width: 150,//宽属性
height: 80,//高属性
color: "#fff",
lineHeight: 20,
rich: {}//控制背景高/宽属性;
},

Done!



举报

相关推荐

0 条评论