《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!