ECharts图表ajax动态赋值Tab选项卡切换数据表的解决方案

《tab选项卡切换时echarts无法正常加载显示问题的解决方案》，早期的Tab选项卡的解决方案。

1.建立echarts图表函数

function echartStr(names, dataList) {
    // 基于准备好的dom，初始化echarts实例
    if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();
    }
    myChart = echarts.init(document.getElementById('main'));
    var option = {
        title: {
            text: '漏刻有时用户访问来源',
            subtext: '挖掘数据背后的价值',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            //orient: 'vertical',
            bottom: "10",
            data: names
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: dataList,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    normal: {
                        show: false,
                    }
                },
            }
        ]
    };

    myChart.setOption(option);
};

2.建立tab选项卡执行函数

function getData(that) {
    var dataList = [], names = [];
    var index = $(that).data('index');

    $.ajax({
        type: 'get',
        url: 'js/data.json',
        dataType: "json",
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            //'result.list' + index 请求json的其中一个
            //eval() 将对应的字符串解析成JS代码并运行
            $.each(eval('result.list' + index), function (index, item) {
                names.push(item.name);    //挨个取出类别并填入类别数组
                dataList.push({
                    name: item.name,
                    value: item.value
                });
            });

            //console.log(dataList);

            //执行echarts函数，进行渲染;
            echartStr(names, dataList);
        },
        error: function (errorMsg) {
            alert(errorMsg + "图表请求数据失败!");
        }
    });
}

3.建立tab选项卡按钮状态函数

function getCss(that) {
    var index = $(that).data('index');
    //console.log(index);

    if (index == "1") {
        $("#dayData").addClass("active");
        $("#weekData").removeClass("active");
        $("#monthData").removeClass("active");
    }

    if (index == "2") {
        $("#dayData").removeClass("active");
        $("#weekData").addClass("active");
        $("#monthData").removeClass("active");
    }

    if (index == "3") {
        $("#dayData").removeClass("active");
        $("#weekData").removeClass("active");
        $("#monthData").addClass("active");
    }
}

4.HTML代码

<div id="tabBtn">
    <h3>
        <button id="dayData" data-index="1">日统计</button>
        <button id="weekData" data-index="2">周统计</button>
        <button id="monthData" data-index="3">月统计</button>
    </h3>
</div>

<div id="main"></div>

5.初始化按钮

    $(function () {
        //按钮状态;
        $("#dayData").addClass("active");

        //默认执行初始化数据;
        getData('#dayData');

        //单击事件渲染数据;
        $("h3 button").click(function () {
            getData(this);
            getCss(this);
        })
    });

Done!