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

ECharts图表ajax动态赋值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!