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!

已标记关键词 清除标记
【为什么还需要学习C++?】 你是否接触很多语言,但从来没有了解过编程语言的本质? 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹?   那么C++就是你个人能力提升,职业之路进阶的不二之选。 【课程特色】 1.课程共19大章节,239课时内容,涵盖数据结构、函数、类、指针、标准库全部知识体系。 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 【学完后我将达到什么水平?】 1.对C++的各个知识能够熟练配置、开发、部署; 2.吊打一切关于C++的笔试面试题; 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 【面向人群】 1.希望一站式快速入门的C++初学者; 2.希望快速学习 C++、掌握编程要义、修炼内功的开发者; 3.有志于挑战更高级的开发项目,成为资深开发的工程师。 【课程设计】 本课程包含3大模块 基础篇 本篇主要讲解c++的基础概念,包含数据类型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、类等基本句法等。 进阶篇 本篇主要讲解编程中常用的一些技能,包含类的高级技术、类的继承、编译链接和命名空间等。 提升篇: 本篇可以帮助学员更加高效的进行c++开发,其中包含类型转换、文件操作、异常处理、代码重用等内容。
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页