一、GIF圖

二、前臺代碼

// 調用方法 hotlineLine(); // 定時刷新 setInterval(function () {   hotlineLine(); },5000); function hotlineLine(){   // 初始化圖表元素   var hotlineLine = echarts.init(document.getElementById('hotlineLine_id'));   $.get('${pageContext.request.getContextPath()}/m/hotline.do', function (res) {     var option = {       // 提示框組件，鼠標經過餅圖時會出現提示框       tooltip: {         // 觸發類型         // 坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。         trigger: 'axis'       },       // 每條折線的顏色       color: ['#87CEFA', '#9AFF9A', '#C0FF3E','#DB7093'],       // 圖例組件       legend: {         // 內容         data:['呼入', '呼出', '應答', '用戶放棄'],         // 樣式         textStyle:{             fontSize:10,             color:'#66ffff'           },         // 上距離，類似css中的margin         top:'5%'       },       // 網格       grid: {         // 左距離         left: '7%',         right: '5%',         bottom: '10%',         top:'20%'       },       // 橫坐標       xAxis: {         // 類型         type: 'category',         // 刻度         data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],         // 樣式         axisLine:{           // 橫坐標線的顏色           lineStyle:{             color:'#66ffff'           }         }       },       yAxis: {         type: 'value',         name: '次數',         axisLabel: {           formatter: '{value}'         },         axisLine:{           lineStyle:{             color:'#66ffff'           }         },         splitLine:{           show: true,           lineStyle:{             color:'#66ffff'           }         }       },       series: [            {              name:'呼入',              type:'line',              data:res[3]            },            {              name:'呼出',              type:'line',              data:res[2]            },            {              name:'應答',              type:'line',              data:res[1]            },            {              name:'用戶放棄',              type:'line',              data:res[0]            }         ],         // 文本標簽         label: {            //是否展示            show: true,           position: 'top',           textStyle: {              fontWeight:'bolder',              fontSize : '12',              fontFamily : '微軟雅黑',              color:defaultColor           }          }     };     hotlineLine.setOption(option);   }); } <div class="rightMain01-sub03 box-border">   <div class="box-title">話務指標趨勢圖</div>   <div class="rightMain01-sub03-data">     <div id="hotlineLine_id" style="height:340px;"></div>   </div> </div>