echarts中tooltip方法组件化

echarts中tooltip方法和formatter结合时的处理

export const tooltip = () => { let tooltip = { trigger: 'axis', textStyle: { color: 'black', }, borderWidth: '1', borderColor: '#eee', backgroundColor: 'rgba(255,255,255,1)' } return tooltip } export const formatterFun = (data, str) => { var htmlStr = ''; var valMap = {}; for (var i = 0; i < data.length; i++) { var param = data[i]; var xName = param.name; //x轴的名称 / var seriesName = param.seriesName; //图例名称 var value = param.value; //y轴值 var color = param.color; //图例颜色 //过滤无效值 if (value == '-') { continue; } //过滤重叠值 if (valMap[seriesName] == value) { continue; } // if (i === 0) { htmlStr += xName + '<br/>'; //x轴的名称 // } htmlStr += '<div>'; //为了保证和原来的效果一样，这里自己实现了一个点的效果 htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'; //圆点后面显示的文本 if (str == 'lc') { htmlStr += seriesName + '：' + value + '%'; } else { htmlStr += seriesName + '：' + value; } htmlStr += '</div>'; valMap[seriesName] = value; } return htmlStr; } this.charts.setOption({ tooltip:{ ...tooltip(), formatter: function(data){ return formatterFun(data) }, } })