echarts图 自定义tooltip的样式

当碰到的需求需要在tooltip里面展示不同的内容的时候，比如在红色的区域显示的内容，和不在红色的区域显示又是不一样的内容。如下图：

怎么做的呢？

通过规则rules（规则根据需求来定），横纵坐标的值来自定义当前折线图上面点的提示框的内容

const {rules} = this.state;
        
tooltip: {
    trigger: 'axis',
    formatter(params) {
        const currentTime = params[0].data.time;
        const area = rules.find(item => currentTime >= item.areaStart && currentTime <= item.areaEnd);
        let text = '';
        if(area && params[0].data.value >= area.ratePercent){
            text = `<span style="color: red;">ﺴღﺴ&nbsp;警告：${moment(area.areaStart).format('HH:mm')}-${moment(area.areaEnd).format('HH:mm')}</span><br/><span style="font-size: 12px; color: red;">ratePercent&nbsp;${area.ratePercentSign}&nbsp;${area.ratePercent}%&nbsp;and&nbsp;totalNum&nbsp;${area.totalNumSign}&nbsp;${area.totalNum}</span><p style="height: 1px; width: 100%; background: rgba(190,190,190,.4); margin-top: 5px;" ></p>时间：${params[0].axisValue}<br />成交量：${params[0].data.count}<br />成交率:${params[0].data.value}%`
        }else{
            text = `时间：${params[0].axisValue}<br />成交量：${params[0].data.count}<br />成交率:${params[0].data.value}%`

        }
        return text;
    },
},

params[0].data里面返回的内容我们也可以自己定义,data里面return返回来的东西就是我们能在params[0].data里面取到。

const {dataSource} = this.state;
 
series: [
	{
	    showSymbol: false,
	    name: '今日承兑率',
	    type: 'line',
	    color: ['#2E8B57'],
	    legendHoverLink: false,
	    data: dataSource.map(item => {            
	        return {
	            value: item.rate,
	            count: item.tranCount,
	            showAllSymbol: true,
	            symbolSize: 0.1,
	            time: item.time,
	        };
	    }),
	},]