Echarts和jQuery的爱恨情仇，Echarts的tooltip格式自定义

后台接口给了四条数据，可视化展示只需要两个，但toolltip里需要展示四个；
需求和最终结果如图所示：

解决方法，给data里push数组对象的数据，用formatter函数格式化，代码如下：

formatter:function(params){
     console.log('bar',params.data)
     var tipText="";
     params.forEach(function(item,index){
     tipText+=item.data.label1+item.data.value+ item.data.label2+item.data.name+'<br />';
  });

处理tooltip的数据代码：

 				$.each(data, function (i, n) {
                    var temp1 = {
                        label1: '1：',
                        value: parseInt(n.deputyNum),
                        name: n.deputyPercent,
                        label2: '；1占比：'
                    };
                    var temp2 = {
                        label1: '2：',
                        value: parseInt(n.groupNum),
                        name: n.groupPercent,
                        label2: '；2占比：'
                    };
                    name.push(n.period+'届次');
                    data1.push(temp1);
                    data2.push(temp2);

全部代码如下：

function initCenterData() {
        //加载中部数据
        $.ajax({
            url: '/url',
            dataType: 'json',
            success: function (data) {
                console.log(data)
                var data1 = [],
                    data2 = [],
                    data3 = [],
                    data4 = [],
                    type = ['1', '2'],
                    name = [];
                $.each(data, function (i, n) {
                    var temp1 = {
                        label1: '1：',
                        value: parseInt(n.deputyNum),
                        name: n.deputyPercent,
                        label2: '；1占比：'
                    };
                    var temp2 = {
                        label1: '2：',
                        value: parseInt(n.groupNum),
                        name: n.groupPercent,
                        label2: '；2占比：'
                    };
                    name.push(n.period+'届次');
                    data1.push(temp1);
                    data2.push(temp2);
                });
                var chart5 = document.getElementById('tascfl');
                var myChart5 = echarts.init(chart5);
                var colors5 = ['#48aead', '#cc4c5b'];
                var option5 = {
                    color: colors5,
                    tooltip: {
                        trigger: 'axis',
                        //提示文字
                        formatter:function(params){
                            console.log('bar',params.data)
                            var tipText="";
                            params.forEach(function(item,index){
                                tipText+=item.data.label1+item.data.value+ item.data.label2+item.data.name+'<br />';
                            });
                            return tipText;
                        }
                    },
                    grid: {
                        right: '12%',
                        left: '12%',
                        bottom: '10%'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                color: "#ffffff",
                            },
                            data: name
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '1',
                            min: 0,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: colors5[0]
                                }
                            },
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '2',
                            min: 0,
                            position: 'right',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: colors5[1]
                                }
                            },
                            axisLabel: {
                                formatter: '{value} '
                            }
                        },
                    ],
                    series: [
                        {
                            name: '1',
                            type: 'bar',
                            data: data1,
                            itemStyle: {
                                normal: {
                                    barBorderRadius:[8, 8, 0, 0]
                                }
                            },
                            label: {
                                show: true,
                                position: 'top'
                            },
                        },
                        {
                            name: '2',
                            type: 'bar',
                            yAxisIndex: 1,
                            data: data2,
                            itemStyle: {
                                normal: {
                                    barBorderRadius:[8, 8, 0, 0]
                                }
                            },
                            label: {
                                show: true,
                                position: 'top'
                            },
                        },
                    ]
                };
                myChart5.setOption(option5);
            }
        })