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")

以上,问题解决~

发布了112 篇原创文章 · 获赞 41 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/u011675334/article/details/103864026