echarts折線圖實線加虛線

option = {
    title: {
       text: 'echarts折線圖實線加虛線'
   },
   //用formatter回調函數顯示多項數據內容  
   tooltip: {  
        trigger: 'axis',  
        formatter: function (params, ticket, callback) {  
          var htmlStr = ''; 
          var valMap = {};
          for(var i=0;i<params.length;i++){  
            var param = params[i];  
            var xName = param.name;//x軸的名稱  
            var seriesName = param.seriesName;//圖例名稱  
            var value = param.value;//y軸值  
            var color = param.color;//圖例顏色  
            
            //過濾無效值
            if(value == '-'){
                continue;
            }
            
            //過濾重疊值
            if(valMap[seriesName] == value){
                continue;
            }
              
            if(i===0){  
              htmlStr += xName + '<br/>';//x軸的名稱  
            }  
            htmlStr +='<div>';  
            //爲了保證和原來的效果同樣,這裏本身實現了一個點的效果  
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';  
              
            //圓點後面顯示的文本  
            htmlStr += seriesName + ':' + value;  
              
            htmlStr += '</div>';  
            valMap[seriesName] = value;
          }  
          return htmlStr;  
         }  
    },
   legend: {
       data:['在線數']
   },
   grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
       containLabel: true
   },

   xAxis: {
       type: 'category',
       boundaryGap: false,
       data: ['週一','週二','週三','週四','週五','週六','週日']
   },
   yAxis: {
       type: 'value'
   },
   series: [
       {
           name:'在線數',
           type:'line', 
            smooth:true,
           data:[120, 132, 191]
       },
       {
           name:'在線數',
           type:'line',     
           smooth:true,   //關鍵點,爲true是不支持虛線,實線就用true
           itemStyle:{
               normal:{
                   lineStyle:{
                       width:2,
                       type:'dotted'  //'dotted'虛線 'solid'實線
                   }
               }
           }, 
           
           data:["-", "-", 191, 234, 180]
       },
        {
           name:'在線數',
           type:'line', 
            smooth:true,
           data:["-", "-", "-", "-", 180, 132, 191]
       },
 
   ]
};
相關文章
相關標籤/搜索