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

简介: 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!

相关文章
|
3月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
55 0
|
3月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
66 2
|
2月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
38 1
|
3天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
15 0
|
6天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
22 0
|
7天前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
13 0
|
7天前
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
11 0
|
13天前
|
容器
echarts图表怎样实现刷新功能?
echarts图表怎样实现刷新功能?
|
16天前
|
JavaScript
如何在vue添加echarts图表
如何在vue添加echarts图表
9 0