echarts\pyecharts 實現：兩條折線，重疊部分爲實線，未重疊部分爲虛線

先上效果圖：

​​​​​​

 

以下爲 echarts 代碼，其實 echarts 本質上是 js，所以如果會 js 代碼的同學會上手更快

option = {
   title: {
       text: '數值變化',
       textStyle:{
        //文字顏色
        // color:'#ccc',
        //字體風格,'normal','italic','oblique'
        fontStyle:'normal',
        //字體粗細 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight:'bold',
        //字體系列
        fontFamily:'sans-serif',
        //字體大小
　　　　 fontSize:36
    },
    left:'center'  
   },
   //用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: {
    //   y:'55%',
        textStyle:{
            fontSize: 26,//字體大小
            color:'	#EE8262'//字體顏色
        },
       data:['調整前','調整後'],
       left:'right',
   },
  grid: {
      left: '3%',
      right: '4%',
      bottom: '40%',
      containLabel: true
  },
   toolbox: {
       feature: {
           saveAsImage: {}
       }
   },
   xAxis: {
       type: 'category',
       axisLabel: {        
                    show: true,    //這行代碼控制着座標軸x軸的文字是否顯示
                      textStyle: {
                        //   color: '#fff',   //x軸上的字體顏色
                          fontSize:'24'    // x軸字體大小
                      }
                  },
       boundaryGap: false,
       data: ['8','9','10','11','12','13','14','15','16','17','18']
   },
   yAxis: {
       type: 'value',
       axisLabel: {        
                    show: true,    //這行代碼控制着座標軸x軸的文字是否顯示
                      textStyle: {
                        //   color: '#fff',   //x軸上的字體顏色
                          fontSize:'24'    // x軸字體大小
                      }
                  },
       min : 0.6,
   },
   series: [
       {
           name:'調整前',
           itemStyle:{
               normal:{
                   label : {
                    show: true,
                    // position:'bottom',
                    },
               }
           },
           type:'line',        
           data:[0.88,0.87,0.85,0.81,0.78, "-", "-", "-", "-", "-", "-"]
       },
       {
           name:'調整前',
           type:'line',     
           smooth:false,   //關鍵點，爲true是不支持虛線，實線就用true
           itemStyle:{
               normal:{
                   label : {
                    show: true,
                    position:'bottom',
                    },
                   lineStyle:{
                       width:2,
                       type:'dotted'  //'dotted'虛線 'solid'實線
                   }
               }
           }, 
           
           data:["-", "-","-", "-", 0.78,0.77,0.75,0.74,0.73,0.70,0.68]
       },
        {
           name:'調整前後',
           itemStyle:{
               normal:{
                   label : {
                    show: true,
                    // position:'bottom',
                    },
               }
           },
           type:'line',        
           data:[0.88,0.87,0.85,0.81,0.78, "-", "-", "-", "-", "-", "-"]
       },
       {
           name:'調整後',
           type:'line',     
           smooth:false,   //關鍵點，爲true是不支持虛線，實線就用true
           itemStyle:{
               normal:{
                   label : {
                    show: true,
                    // position:'bottom',
                    },
                   lineStyle:{
                       width:2,
                       type:'dotted'  //'dotted'虛線 'solid'實線
                   }
               }
           }, 
           
           data:["-", "-","-", "-", 0.78,0.78,0.77,0.77,0.76,0.76,0.75 ]
       },
 
   ]
};

受到 echarts 代碼的啓發，我覺得既然 pyecharts 來源於 echarts，那麼肯定有共通之處，終於讓我發現新大陸，實現了同樣的功能。不廢話，上代碼：

# 算法思想：把兩條線拆成四條線來做
def draw_picture():
    columns = [8,9,10,11,12,13,14,15,16,17,18]
    columns = [str(item) for item in columns]

    y1 = [0.88,0.87,0.85,0.81,0.78,'-','-','-','-','-','-']
    y2 = [0.88,0.87,0.85,0.81,0.78,'-','-','-','-','-','-' ]
    y3 = ['-','-','-','-',0.78,0.77,0.75,0.74,0.73,0.70,0.68]
    y4 = ['-','-','-','-',0.78,0.78,0.77,0.77,0.76,0.76,0.75 ]
    
   
    line = Line("數值變化")
    line.add('調整前', columns, y1, is_label_show = True, yaxis_min = 0.5,label_pos = 'bottom')
    line.add('調整後',columns,y2,is_label_show = True, yaxis_min = 0.5,)
    line.add('調整前', columns, y3, is_label_show = True, yaxis_min = 0.5,label_pos = 'bottom',mark_point_symbol='diamond',line_type = 'dashed')
    line.add('調整後',columns,y4,is_label_show = True, yaxis_min = 0.5,mark_point_symbol='diamond',line_type = 'dashed')
    line.render("example.html")

以上，問題解決~