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

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

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!

相关文章
|
1月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
107 0
|
1月前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
65 1
|
7月前
|
移动开发 JavaScript 算法
echarts图表坐标轴数据标签添加下划线(下)
echarts图表坐标轴数据标签添加下划线(下)
143 0
|
7月前
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
263 0
|
8月前
213Echarts - 数据区域缩放(Tooltip and DataZoom on Mobile)
213Echarts - 数据区域缩放(Tooltip and DataZoom on Mobile)
30 0
|
11月前
|
定位技术 数据格式
Echarts实战案例代码(59):geomap实现飞线、散点、引导线以及重叠label的解决
Echarts实战案例代码(59):geomap实现飞线、散点、引导线以及重叠label的解决
401 0
|
27天前
|
前端开发 搜索推荐 UED
HTML基础-文本格式化标签:美化网页内容
【6月更文挑战第1天】本文介绍了HTML的文本格式化标签,包括`<b>`、`<strong>`、`<i>`、`<em>`、`<u>`、`<s>`、`<mark>`、`<small>`、`<sub>`和`<sup>`等,强调了语义化使用和避免常见错误的重要性。示例代码展示了这些标签的用法,帮助提升网页内容的可读性和吸引力。
|
1月前
|
移动开发 监控 前端开发
HTML5与CSS3教学:美化员工行为监控软件前端页面的代码技巧
在当今信息时代,企业对员工行为的监控成为了一项必不可少的工作。而员工行为监控软件作为一种高效的管理工具,其前端页面的设计和美化显得尤为重要。本文将介绍如何利用HTML5和CSS3技术,优雅地美化员工行为监控软件前端页面的代码技巧。
231 0
|
1月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
6月前
Echarts tooltip配置项的属性 图表悬浮框
Echarts tooltip配置项的属性 图表悬浮框