ucharts自定义tooltips修改format配置，可换行展示标题

搬砖的小宝

已于 2024-05-29 15:25:03 修改

阅读量795

点赞数 6

分类专栏： uniapp使用日记文章标签：前端 javascript 前端框架 echarts

于 2024-05-29 15:14:25 首次发布

本文链接：https://blog.csdn.net/m0_57462721/article/details/139296121

版权

uniapp使用日记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ucharts提示窗tooltips默认显示格式，显示横轴数据+类别+纵轴数据，如下图所示我现在做的不需要横轴数据或者日期在最上面显示一个就好了

只需修改ucharts中的config-ucharts.js和u-charts.js

第一步：修改config-ucharts.js

// 自己修改的提示
	"myTooltip":function(item, category, index, opts){
		return item.name+'：'+item.data
	},

第二步：修改u-charts.js

var myTitleText = null;
  var textList = seriesData.map(function(item) {
    let titleText = null;
    if (opts.categories && opts.categories.length>0) {
      titleText = categories[index];
    };
	myTitleText = titleText;
    return {
      text: option.formatter ? option.formatter(item, titleText, index, opts) : item.name + ': ' + item.data,
      color: item.color,
      legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
    };
  });
  textList.unshift({text:myTitleText,color:null});

使用的话不要忘记tooltipFormat="myTooltip"

效果预览我这边只需到第一步就行了