自定义echarts中tooltip提示框显示的内容和格式

自定义echarts中tooltip提示框显示的内容和格式

公司最近在做的项目里,所有图表全部都是用echarts组件做的,包括柱状图,折线图,雷达图,扇形图,圆环图(饼图),因此
tooltip提示框显示的内容及文字是必须涉及到的一点.

问题一:显示tooltip显示框

只需在option里设置:
tooltip:{}

问题二:tooltip显示的内容没有自己想要的

这里便涉及到重点了:

tooltip:{
	 formatter : function(params){  
		console.log(params);//打印params
		return  params;
	}
}

 
 

在formatter里面打印参数params对象,于是我们能看到所有关于你的图表里所有的信息,通过’params.属性名’拿到自己要显示的信息进行显示.
但我要讲的重点是:如果我们要返回参数params对象里面没有的信息呢?
这里我们就要用到传参,假如要将:"你是一个好人"传进来在提示框里面显示,因此:

let theWords = '你是一个好人';
drawCharts(theWords);
drawCharts(words ) {  
  let myChart = this.$echarts.init(document.getElementById("myChart"));
  myChart.setOption({
    title: {},
    tooltip: {
       formatter : function(params){  
      		params.words = words;//对象的赋值
        	return  params.words;//返回在提示框——'你是一个好人'
        }
      },    
    yAxis: {
        data: [], //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        axisLabel: {
        interval: 0
      },
    dataZoom: {
        show: true,
        realtime: true,
        y: 40,
        height: 20,
        start: 20,
        end: 100
      }
    },
    xAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [] //[5, 20, 36, 10, 10, 20]
      }
    ],
  });

 
 

问题三:tooltip显示的格式不符合自己要求

同样的在的tooltip里面设置:

tooltip: {
          formatter : function(params){  
          	console.log(params)//通过对象的点语法拿到自己想要的内容,通过连接+,将想要的字符串进行自行的拼接,用<br/>来换行
          	let res = '';
          	res = params.name + ':' + params.data
            return  res ;//最后返回拼接好的值
            }
          }