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")
以上，问题解决~
