echarts修改数据视图格式

Posted 2020-10-18 菜鸟丶肖

通过echarts官方文档配置项进行修改

js代码

// 基于准备好的dom，初始化echarts实例
    var Qushi_box = echarts.init(document.getElementById(\'Qushi_box\'));
    option = {
    tooltip : {
        trigger: \'axis\'
    },
    legend: {
        data:[\'邮件营销\',\'联盟广告\',\'视频广告\',\'直接访问\',\'搜索引擎\']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: [\'line\', \'bar\', \'stack\', \'tiled\']},
            restore : {show: true},
            saveAsImage : {show: true},
            dataView:{buttonColor:"green"}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : \'category\',
            boundaryGap : false,
            data : [\'周一\',\'周二\',\'周三\',\'周四\',\'周五\',\'周六\',\'周日\']
        }
    ],
    yAxis : [
        {
            type : \'value\'
        }
    ],
    series : [
        {
            name:\'邮件营销\',
            type:\'line\',
            stack: \'总量\',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:\'联盟广告\',
            type:\'line\',
            stack: \'总量\',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:\'视频广告\',
            type:\'line\',
            stack: \'总量\',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:\'直接访问\',
            type:\'line\',
            stack: \'总量\',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:\'搜索引擎\',
            type:\'line\',
            stack: \'总量\',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ],
    //修改数据视图
    optionToContent: function(opt) {
    var axisData = opt.xAxis[0].data;
    var series = opt.series;
    var table = \'<table style="width:100%;text-align:center" cellspacing="0" cellpadding="0" class="table_Qushi"><tbody><tr>\'
                 + \'<td>时间</td>\'
                 + \'<td>\' + series[0].name + \'</td>\'
                 + \'<td>\' + series[1].name + \'</td>\'
                 + \'<td>\' + series[2].name + \'</td>\'
                 + \'<td>\' + series[3].name + \'</td>\'
                 + \'<td>\' + series[4].name + \'</td>\'
                 + \'</tr>\';
    for (var i = 0, l = axisData.length; i < l; i++) {
        table += \'<tr>\'
                 + \'<td>\' + axisData[i] + \'</td>\'
                 + \'<td>\' + series[0].data[i] + \'</td>\'
                 + \'<td>\' + series[1].data[i] + \'</td>\'
                 + \'<td>\' + series[2].data[i] + \'</td>\'
                 + \'<td>\' + series[3].data[i] + \'</td>\'
                 + \'<td>\' + series[4].data[i] + \'</td>\'
                 + \'</tr>\';
            }
            table += \'</tbody></table>\';
            return table;
        }
    };
Qushi_box.setOption(option);

结果如图