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是不支持虚线，实线就用trueitemStyle:{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是不支持虚线，实线就用trueitemStyle:{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")

以上，问题解决~

echarts\pyecharts 实现：两条折线，重叠部分为实线，未重叠部分为虚线相关推荐

解决ECharts两条条折线图数据一样时，拐点处数据重合（设置ECharts两条折线图拐点处数据一上一下）
解决办法:在series里选择一条数据,给其label的position赋值为"top"或"bottom",与另一个进行区分. 示例代码如下: option = ...
php怎么创建两条折线图,excel折线图怎么做两条
excel折线图怎么做两条? 1.随便编两组数据,这两组数据横坐标的值以及数量都不相同,要求将这两组数据做成一张折线图. 2.首先选中第一组数据,点击插入--散点图--选择带直线和数据标记的散点图(就 ...
matlab在一张图上画两条折线图,excel2013怎么在一张曲线图上绘制多条曲线?
office软件每年的更新速度很快,虽然更新后的版本肯定能够实现更新前的功能,但是由于版式方面的改进,使得使用者初次使用时不是特别得心应手.下面重点讲述一下,如何利用excel2013在同一张图中做多 ...
python绘制两条折线图
from pylab import * # 这里可以调整图片大小 plt.figure(figsize=(18,9)) # x轴 x_axis_data = ['9-26','9-27', '9-28 ...
echarts多条折线时,默认显示一条
需求:当前有4条折线,默认只显示两条折线看了一下echarts的文档,legend属性的selected可以控制 legend: {orient: "vertical",show ...
Excel实现双Y轴折线图（四条折线中有两个主轴两个副轴）
一.需求我在网上找到的教程都是两条折线,一个设为主轴一个设为副轴,或者一个柱状图配一个折线图. 但我的需求是一共有四个折线,两两分组,每组是同一个纵轴尺度. 可以看出其实有两条线:一条黄色一条灰色在 ...
两条纵坐标折线图绘制
python 两条纵坐标折线图绘制欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你 ...
拼接两条有重叠区域的核酸序列
目的 27F 和 1492R 是细菌 16S 核糖体基因的一对通用引物.利用这对引物扩增DNA提取物,然后进行Sanger法测序,能获得两条长度约为 800+ 的 DNA 序列.根据正链(+)和负链( ...
origin Pro 9.0画多条三维折线图（此处以两条为例）
origin Pro 9.0画多条三维折线图(此处以两条为例) 首先,建立两个New workbook,将需要的绘制的图分别放在book1 book2-如下图选中book1 中的三维数据,操作如下图 ...

echarts\pyecharts 实现：两条折线，重叠部分为实线，未重叠部分为虚线

echarts\pyecharts 实现：两条折线，重叠部分为实线，未重叠部分为虚线相关推荐

最新文章

热门文章