echarts tooltip 的formatter配置

echarts4.2

ECHART显示比较丑的可以去官网下载主题

第一种配置

function mychart(data) {
    var chartDom = document.getElementById('myChart');
    var myChart = echarts.init(chartDom,'customed');
    var option;
    var data1 = [];
    var ser = []
    if (data) {
        data1 = data;
        var len = data1[0].length;
        for (var i = 1; i < len; i++) {
            ser[i] = {type: 'bar'}
        }
    }
    option = {
        backgroundColor: '#fff',
        legend: {},
        tooltip: {
            show:true,
            // trigger: 'axis',
            formatter: function (params, ticket, callback) {
                var x = params.seriesName;
                var y = params.name;
                var data = params.data[params.seriesIndex+1];
                var color = params.color;
                // var htm = `<div>${x}</br>${y}</br>${data}</div>`;
                var htm = ` ${y}</br><span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${color}"></span>${x}:${data}<br/>`;
                return htm;
            }
            // formatter: function (params,a,b) {
            //     let str = params[0].data[0] + "<br />";
            //     params.forEach((item) => {
            //         str +=
            //             '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+item.color+'"></span>' + item.seriesName + " : " + item.data[1] + "<br />";
            //     });
            //     return str;
            // }
        },
        dataset: {
            source: data1
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: ser
    };
    option && myChart.setOption(option);
    window.addEventListener('resize', function() {
        myChart.resize();
    });

}

第一种效果图

每次点一个柱提示自己的数据

第二种配置

function mychart(data) {
    var chartDom = document.getElementById('myChart');
    var myChart = echarts.init(chartDom,'customed');
    var option;
    var data1 = [];
    var ser = []
    if (data) {
        data1 = data;
        var len = data1[0].length;
        for (var i = 1; i < len; i++) {
            ser[i] = {type: 'bar'}
        }
    }
    option = {
        backgroundColor: '#fff',
        legend: {},
        tooltip: {
            show:true,
            trigger: 'axis',
            // formatter: function (params, ticket, callback) {
            //     var x = params.seriesName;
            //     var y = params.name;
            //     var data = params.data[params.seriesIndex+1];
            //     var color = params.color;
            //     // var htm = `<div>${x}</br>${y}</br>${data}</div>`;
            //     var htm = ` ${y}</br><span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${color}"></span>${x}:${data}<br/>`;
            //     return htm;
            // }
            formatter: function (params,a,b) {
                let str = params[0].data[0] + "<br />";
                params.forEach((item) => {
                    str +=
                        '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+item.color+'"></span>' + item.seriesName + " : " + item.data[1] + "<br />";
                });
                return str;
            }
        },
        dataset: {
            source: data1
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: ser
    };
    option && myChart.setOption(option);
    window.addEventListener('resize', function() {
        myChart.resize();
    });

}

第二种效果图

每次点一个柱会提示所有数据