Echarts tooltip加上单位并带着图例颜色

模仿腾讯疫情地图，Y轴有个百分比，也就是Y轴有单位，使用JS代码如下：

        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var relVal = params[0].name;
                for (var i = 0, l = params.length; i < l; i++) {
                    relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
                }
                return relVal;
            }

        },

X轴倾斜代码如下：

            axisLabel: {
                interval: 0,
                rotate: 35
            }

 

demo的实现效果如下：

完整的demo代码如下：

function showLine(container, time, valueMap) {
    timeTmp = time.reverse();
    time = [];
    for (i = 0; i < timeTmp.length; i++) {
        args = timeTmp[i].split("-");
        time.push(args[1] + "-" + args[2])
    }
    a = valueMap.get("亚洲").reverse();
    b = valueMap.get("欧洲").reverse();
    c = valueMap.get("北美洲").reverse();
    d = valueMap.get("南美洲").reverse();
    e = valueMap.get("非洲").reverse();
    f = valueMap.get("大洋洲").reverse();

    arate = [];
    brate = [];
    crate = [];
    drate = [];
    erate = [];
    frate = [];
    for (i = 1; i < time.length; i++) {
        console.log(a[i]);
        arate.push(Math.floor((a[i] - a[i - 1]) / a[i - 1] * 10000 + 0.5) / 100);
        brate.push(Math.floor((b[i] - b[i - 1]) / b[i - 1] * 10000 + 0.5) / 100);
        crate.push(Math.floor((c[i] - c[i - 1]) / c[i - 1] * 10000 + 0.5) / 100);
        drate.push(Math.floor((d[i] - d[i - 1]) / d[i - 1] * 10000 + 0.5) / 100);
        erate.push(Math.floor((e[i] - e[i - 1]) / e[i - 1] * 10000 + 0.5) / 100);
        frate.push(Math.floor((f[i] - f[i - 1]) / f[i - 1] * 10000 + 0.5) / 100);
    }
    time = time.slice(1);
    console.log(time);

    var dom = document.getElementById(container);
    var myChart = echarts.init(dom, 'theme');
    var app = {};
    option = null;
    option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var relVal = params[0].name;
                for (var i = 0, l = params.length; i < l; i++) {
                    relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
                }
                return relVal;
            }

        },
        legend: {
            data: ['亚洲', '欧洲', '北美洲', '南美洲', '非洲', '大洋洲']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            //x 轴
            data: time,
            axisLabel: {
                interval: 0,
                rotate: 35
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value}%'
            },
            show: true
        },
        series: [
            {
                name: "亚洲",
                type: 'line',
                data: arate
            },
            {
                name: '欧洲',
                type: 'line',
                data: brate
            },
            {
                name: '北美洲',
                type: 'line',
                data: crate
            },
            {
                name: '南美洲',
                type: 'line',
                data: drate
            },
            {
                name: '非洲',
                type: 'line',
                data: erate
            },
            {
                name: '大洋洲',
                type: 'line',
                data: frate
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}