echart異步刷新圖表，詳細配置註釋
阿新 • • 發佈：2017-08-20
doc fun als 否則 初始化 ott 組件 異步 order
效果預覽：
直接上代碼：（用之前務必要引入echart.js插件）
<body> <!-- 數據選擇 --> <ul class="tab_menu clearfix"> <li id="week_data" class="active">7天</li> <li id="month_data" >30天</li> <li id="time_sec" class="time_box"><input class="form-control"value="選擇時間"></li> </ul> <!-- 數據展示 --> <div class="chart_show"> <ul class="chart_menu clearfix"> <li class="active">轉化與用戶</li> <li>登錄與購買</li> </ul> <ul class="chart_list"> <li class="active"> <div class="chart_box clearfix"> <div class="col-xs-6"> <div id="chart_box" style="width: 100%;height:400px;margin:0 auto;"></div> </div> <div class="col-xs-6"></div> </div> </li> <li> 22222 </li> </ul> </div> </div> <script src="js/user.js"></script> <script> $(function(){ //頁面初始化時加載圖表 mychart1(‘week‘); $("#week_data").on(‘click‘,function(){ //alert(‘請求7天數據‘); myChart1.clear(); //清空原來的圖表 mychart1(‘week‘); //重新加載圖表，之前必須要清空原來的，否則沒有動畫效果 }); $("#month_data").on(‘click‘,function(){ //alert(‘請求30天數據‘); myChart1.clear(); //清空原來的圖表 mychart1(‘month‘); //重新加載圖表，之前必須要清空原來的，否則沒有動畫效果 }); $("#time_sec").on(‘click‘,function(){ //alert(‘請求時間段的數據‘); myChart1.clear(); //清空原來的圖表 mychart1(‘time_sec‘); //重新加載圖表，之前必須要清空原來的，否則沒有動畫效果 }); }) </script> </body>
js函數：
// 基於準備好的dom，初始化echarts實例 var myChart1 = echarts.init(document.getElementById(‘chart_box‘)); function mychart1(time){ if(time==‘week‘){ //請求周數據 //模周擬數據 var renShu = [20, 49, 70]; var zhuanHuaLv = [26, 59, 20]; }else if(time==‘month‘){ //請求月數據 //模擬月數據 var renShu = [10, 29, 10]; var zhuanHuaLv = [6, 29, 35]; }else{ //請求時間段數據 //模擬時間段數據 alert(time); var renShu = [50, 89, 40]; var zhuanHuaLv = [60, 39, 75]; }; //配置及數據 optionWeek = { title: { text: ‘用戶轉換率‘,//圖表標題 subtext: ‘人數‘//數據標題 }, tooltip: { trigger: ‘axis‘, //提示觸發類型 ‘item‘:數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。 //‘axis‘:坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。 //‘none‘:什麽都不觸發。 show:true, //是否顯示提示框組件 默認為true axisPointer: { type: ‘cross‘, crossStyle: { color: ‘#999‘ } } }, toolbox: { feature: { //各工具配置項。 dataView: {show: true, readOnly: false}, magicType: {show: true, type: [‘line‘, ‘bar‘]}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data:[‘人數‘,‘轉化率‘] }, xAxis: [ { type: ‘category‘, data: [‘訪客人數‘,‘下單人數‘,‘支付人數‘], axisPointer: { type: ‘shadow‘ } } ], yAxis: [ { type: ‘value‘, name: ‘人數‘, min: 0, //max: 250, interval: 50, axisLabel: { formatter: ‘{value} 人‘ } }, { type: ‘value‘, name: ‘轉化率‘, min: 0, max: 100, interval: 25, //縱坐標間隔 axisLabel: { formatter: ‘{value} %‘ } } ], series: [ { name:‘人數‘, type:‘bar‘, //bar表示柱狀圖 data:renShu,//數據 itemStyle: { //更多柱狀圖樣式搜索API：series-bar.itemStyle normal: { color: ‘#FF7400‘,//改變柱狀的顏色 borderColor:‘red‘, //描邊的顏色：默認#000 borderWidth:0, //描邊的寬度 默認：0 borderType:‘solid‘, //描邊的類型：‘dashed‘, ‘dotted‘，‘solid‘(默認) /* 更多樣式： barBorderRadius:柱狀的圓角 shadowBlur：圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。 shadowColor,shadowOffsetX, shadowOffsetY ：圖形陰影效果 */ } }, }, { name:‘轉化率‘, type:‘line‘, //line表示折線圖 data:zhuanHuaLv, itemStyle: { //更多折線圖線條樣式搜索API：series-line.itemStyle normal: { color: ‘#009999‘,//改變折線點的顏色 lineStyle: { //改變折線樣式 color: ‘#009999‘, //改變折線顏色 width:3, //改變線條的粗細 }, } }, } ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart1.setOption(optionWeek); }
echart異步刷新圖表，詳細配置註釋