Echart自定义显示后缀

image.png

• 在线运行代码https://echarts.baidu.com/examples/editor.html?c=bar-y-category-stack

app.title = '堆叠条形图'; 
option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {             
            type : 'shadow' 
        },
       formatter: function (params,ticket,callback) {
           //设置返回信息
           var result = params[0].name; 
           //由于下面进行拼接重新赋值一个变量作为key值
           var key = params[0].name;  
           for(var index = 0 ,i=params.length;index < i;index++){
              result 
              += '<br/>' 
              + params[index].marker 
              + params[index].seriesName
              + ' : ' 
              + params[index].value 
              +"  ("+map.get(key)[index]+")";
           } 
           return result;   
     
         },
    },
    legend: {
        data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    series: [
        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
            name: '搜索引擎',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
    ]
};
/*---data build----*/
var arr = new Array();
arr[0] = '2019-01-01';
arr[1] = '2019-01-02';
arr[2] = '2019-01-03';
arr[3] = '2019-01-04';
arr[4] = '2019-01-05';
var arr2 = new Array();
arr2[0] = '2019-02-01';
arr2[1] = '2019-02-02';
arr2[2] = '2019-02-03';
arr2[3] = '2019-02-04';
arr2[4] = '2019-02-05';
var arr3 = new Array();
arr3[0] = '2019-03-01';
arr3[1] = '2019-03-02';
arr3[2] = '2019-03-03';
arr3[3] = '2019-03-04';
arr3[4] = '2019-03-05';
var arr4 = new Array();
arr4[0] = '2019-04-01';
arr4[1] = '2019-04-02';
arr4[2] = '2019-04-03';
arr4[3] = '2019-04-04';
arr4[4] = '2019-04-05';
var arr5 = new Array();
arr5[0] = '2019-05-01';
arr5[1] = '2019-05-02';
arr5[2] = '2019-05-03';
arr5[3] = '2019-05-04';
arr5[4] = '2019-05-05';
var arr6 = new Array();
arr6[0] = '2019-06-01';
arr6[1] = '2019-06-02';
arr6[2] = '2019-06-03';
arr6[3] = '2019-06-04';
arr6[4] = '2019-06-05';
var arr7 = new Array();
arr7[0] = '2019-07-01';
arr7[1] = '2019-07-02';
arr7[2] = '2019-07-03';
arr7[3] = '2019-07-04';
arr7[4] = '2019-07-05'; 
var map = new Map();
map.set('周一',arr);
map.set('周二',arr2);
map.set('周三',arr3);
map.set('周四',arr4);
map.set('周五',arr5);
map.set('周六',arr6);
map.set('周日',arr7);