【echarts使用】之tooltip弹窗使用说明

[yihan12]

trigger

• item

数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

• axis

坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。

• none

什么都不触发。

format

formatter: params => {
    const data1 = thousands(params.value) || '--';
    const data2 = `${params.percent} %` || '--';
    const color = params.color || '#81d3f8';
    const name = params.name || '';
    const system = vm.$t('userData.operateS');
    const systemName1 = vm.$t('userData.userT');
    const systemName2 = vm.$t('userData.userRateT');
    let str = '';
    str += `<div style="margin: 0px 0 0;line-height:1;">
    <div style="margin: 0px 0 0;line-height:1;">
    <div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${system}：${name}</div>
    <div style="margin: 10px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;">
    <div style="margin: 0px 0 0;line-height:1;">
    <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color}"></span>
    <span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">${systemName1}</span>
    <span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${data1}</span>
    <div style="clear:both"></div>
    </div>
    <div style="margin: 8px 0 0;line-height:1;">
    <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color}"></span>
    <span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">${systemName2}</span>
    <span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${data2}</span>
    </div>
    <div style="clear:both"></div></div></div></div></div>`
    return str
}