Echarts 折线图(line) 平滑曲线单调性问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Echarts 折线图(line) 平滑曲线单调性问题相关的知识,希望对你有一定的参考价值。

参考技术A 最近在使用echarts画折线图时,遇到一个奇怪的问题。在双曲线的line图中,曲线设置为平滑时,相邻两点的数值完全一致,但是曲线走向不相同

图如下:

从上图可以看到,在“20:30”和“21:00”时,两条折线的数值完全一致,但是在这两点之间,蓝色、紫色两条线的弧度不相同,蓝色比较平直,而紫色有向下凹陷的曲度。

查看echarts文档,发现配置项 series 里有一个 smoothMonotone 属性。

在 series 里加上 smoothMonotone: 'x' ,即可解决问题:

解决后的曲线图:

pyecharts折线图进阶篇

参考技术A import   pyecharts.options   as    opts

from    pyecharts.charts    import  Line

x=['星期一','星期二','星期三','星期四','星期五','星期七','星期日']

y=[100,200,300,400,500,400,300]

line=(

Line()

.set_global_opts(

tooltip_opts=opts.TooltipOpts(is_show=False),

xaxis_opts=opts.AxisOpts(type_="category"),

yaxis_opts=opts.AxisOpts(

type_="value",

axistick_opts=opts.AxisTickOpts(is_show=True),

splitline_opts=opts.SplitLineOpts(is_show=True),

),

)

.add_xaxis(xaxis_data=x)

.add_yaxis(

series_name="基本折线图",

y_axis=y,

symbol="emptyCircle",

is_symbol_show=True,

label_opts=opts.LabelOpts(is_show=False),

)

)

line.render_notebook()

series_name:图形名称

 y_axis:数据 

symbol:标记的图形,

pyecharts提供的类型包括'circle','rect','roundRect','triangle','diamond','pin','arrow','none',也可以通过'image://url'设置为图片,其中 URL 为图片的链接。is_symbol_show:是否显示 symbol

有时候我们要分析的数据存在空缺值,需要进行处理才能画出折线图

import   pyecharts.options    as   opts

from    pyecharts.charts   import   Line

x=['星期一','星期二','星期三','星期四','星期五','星期七','星期日']

y=[100,200,300,400,None,400,300]

line=(

Line()

.add_xaxis(xaxis_data=x)

.add_yaxis(

series_name="连接空数据(折线图)",

y_axis=y,

)

.set_global_opts(title_opts=opts.TitleOpts(title="Line-连接空数据"))

)

line.render_notebook()

import    pyecharts.options   as   opts

from    pyecharts.charts    import   Line

x=['星期一','星期二','星期三','星期四','星期五','星期七','星期日']

y1=[100,200,300,400,100,400,300]

y2=[200,300,200,100,200,300,400]

line=(

Line()

.add_xaxis(xaxis_data=x)

.add_yaxis(series_name="y1线",y_axis=y1,symbol="arrow",is_symbol_show=True)

.add_yaxis(series_name="y2线",y_axis=y2)

.set_global_opts(title_opts=opts.TitleOpts(title="Line-多折线重叠"))

)

line.render_notebook()

import   pyecharts.options   as   opts

from   pyecharts.charts   import   Line

x=['星期一','星期二','星期三','星期四','星期五','星期七','星期日']

y1=[100,200,300,400,100,400,300]

y2=[200,300,200,100,200,300,400]

line=(

Line()

.add_xaxis(xaxis_data=x)

.add_yaxis(series_name="y1线",y_axis=y1, is_smooth=True)

.add_yaxis(series_name="y2线",y_axis=y2, is_smooth=True)

.set_global_opts(title_opts=opts.TitleOpts(title="Line-多折线重叠"))

)

line.render_notebook()

import   pyecharts.options   as   opts

from    pyecharts.charts   import   Line

x=['星期一','星期二','星期三','星期四','星期五','星期七','星期日']

y1=[100,200,300,400,100,400,300]

line=(

Line()

.add_xaxis(xaxis_data=x)

.add_yaxis(series_name="y1线",y_axis=y1, is_step=True)

.set_global_opts(title_opts=opts.TitleOpts(title="Line-阶梯图"))

)

line.render_notebook()

is_step:阶梯图参数

import   pyecharts.options   as   opts

from   pyecharts.charts   import   Line

from    pyecharts.faker   import   Faker

x=['星期一','星期二','星期三','星期四','星期五','星期七','星期日']

y1=[100,200,300,400,100,400,300]

line = (

Line()

.add_xaxis(xaxis_data=x)

.add_yaxis(

"y1",

y1,

symbol="triangle",

symbol_size=30,

linestyle_opts=opts.LineStyleOpts(color="red", width=4, type_="dashed"),

itemstyle_opts=opts.ItemStyleOpts(

border_width=3, border_color="yellow", color="blue"

),

)

.set_global_opts(title_opts=opts.TitleOpts(title="Line-ItemStyle"))

)

line.render_notebook()

linestyle_opts:折线样式配置color设置颜色,width设置宽度type设置类型,有'solid','dashed','dotted'三种类型 itemstyle_opts:图元样式配置,border_width设置描边宽度,border_color设置描边颜色,color设置纹理填充颜色

import   pyecharts.options  as   opts

from   pyecharts.charts   import   Line

x=['星期一','星期二','星期三','星期四','星期五','星期七','星期日']

y1=[100,200,300,400,100,400,300]

y2=[200,300,200,100,200,300,400]

line=(

Line()

.add_xaxis(xaxis_data=x)

.add_yaxis(series_name="y1线",y_axis=y1,areastyle_opts=opts.AreaStyleOpts(opacity=0.5))

.add_yaxis(series_name="y2线",y_axis=y2,areastyle_opts=opts.AreaStyleOpts(opacity=0.5))

.set_global_opts(title_opts=opts.TitleOpts(title="Line-多折线重叠"))

)

line.render_notebook()

import    pyecharts.options   as   opts

from    pyecharts.charts   import   Line

from    pyecharts.commons.utils   import   JsCode

js_formatter ="""function (params) 

console.log(params);

return '降水量  ' + params.value + (params.seriesData.length ? ':' + params.seriesData[0].data : '');

"""

line=(

Line()

.add_xaxis(

xaxis_data=[

"2016-1",

"2016-2",

"2016-3",

"2016-4",

"2016-5",

"2016-6",

"2016-7",

"2016-8",

"2016-9",

"2016-10",

"2016-11",

"2016-12",

]

)

.extend_axis(

xaxis_data=[

"2015-1",

"2015-2",

"2015-3",

"2015-4",

"2015-5",

"2015-6",

"2015-7",

"2015-8",

"2015-9",

"2015-10",

"2015-11",

"2015-12",

],

xaxis=opts.AxisOpts(

type_="category",

axistick_opts=opts.AxisTickOpts(is_align_with_label=True),

axisline_opts=opts.AxisLineOpts(

is_on_zero=False, linestyle_opts=opts.LineStyleOpts(color="#6e9ef1")

),

axispointer_opts=opts.AxisPointerOpts(

is_show=True, label=opts.LabelOpts(formatter=JsCode(js_formatter))

),

),

)

.add_yaxis(

series_name="2015 降水量",

is_smooth=True,

symbol="emptyCircle",

is_symbol_show=False,

color="#d14a61",

y_axis=[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3],

label_opts=opts.LabelOpts(is_show=False),

linestyle_opts=opts.LineStyleOpts(width=2),

)

.add_yaxis(

series_name="2016 降水量",

is_smooth=True,

symbol="emptyCircle",

is_symbol_show=False,

color="#6e9ef1",

y_axis=[3.9,5.9,11.1,18.7,48.3,69.2,231.6,46.6,55.4,18.4,10.3,0.7],

label_opts=opts.LabelOpts(is_show=False),

linestyle_opts=opts.LineStyleOpts(width=2),

)

.set_global_opts(

legend_opts=opts.LegendOpts(),

tooltip_opts=opts.TooltipOpts(trigger="none", axis_pointer_type="cross"),

xaxis_opts=opts.AxisOpts(

type_="category",

axistick_opts=opts.AxisTickOpts(is_align_with_label=True),

axisline_opts=opts.AxisLineOpts(

is_on_zero=False, linestyle_opts=opts.LineStyleOpts(color="#d14a61")

),

axispointer_opts=opts.AxisPointerOpts(

is_show=True, label=opts.LabelOpts(formatter=JsCode(js_formatter))

),

),

yaxis_opts=opts.AxisOpts(

type_="value",

splitline_opts=opts.SplitLineOpts(

is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1)

),

),

)

)

line.render_notebook()

import   pyecharts.options   as   opts

from   pyecharts.charts   import   Line

x_data = ["00:00","01:15","02:30","03:45","05:00","06:15","07:30","08:45","10:00","11:15","12:30","13:45","15:00","16:15","17:30","18:45","20:00","21:15","22:30","23:45",]

y_data = [300,280,250,260,270,300,550,500,400,390,380,390,400,500,600,750,800,700,600,400,]

line=(

Line()

.add_xaxis(xaxis_data=x_data)

.add_yaxis(

series_name="用电量",

y_axis=y_data,

is_smooth=True,

label_opts=opts.LabelOpts(is_show=False),

linestyle_opts=opts.LineStyleOpts(width=2),

)

.set_global_opts(

title_opts=opts.TitleOpts(title="一天用电量分布", subtitle="纯属虚构"),

tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),

xaxis_opts=opts.AxisOpts(boundary_gap=False),

yaxis_opts=opts.AxisOpts(

axislabel_opts=opts.LabelOpts(formatter="value W"),

splitline_opts=opts.SplitLineOpts(is_show=True),

),

visualmap_opts=opts.VisualMapOpts(

is_piecewise=True,

dimension=0,

pieces=[

"lte":6,"color":"green",

"gt":6,"lte":8,"color":"red",

"gt":8,"lte":14,"color":"yellow",

"gt":14,"lte":17,"color":"red",

"gt":17,"color":"green",

],

pos_right=0,

pos_bottom=100

),

)

.set_series_opts(

markarea_opts=opts.MarkAreaOpts(

data=[

opts.MarkAreaItem(name="早高峰", x=("07:30","10:00")),

opts.MarkAreaItem(name="晚高峰", x=("17:30","21:15")),

]

)

)

)

line.render_notebook()

这里给大家介绍几个关键参数:

①visualmap_opts:视觉映射配置项,可以将折线分段并设置标签(is_piecewise),将不同段设置颜色(pieces);

②markarea_opts:标记区域配置项,data参数可以设置标记区域名称和位置。

以上是关于Echarts 折线图(line) 平滑曲线单调性问题的主要内容,如果未能解决你的问题,请参考以下文章

如何用R画折线图,散点图,平滑曲线图

二基础平滑面积折线图与折线堆叠面积堆叠《手把手教你 ECharts 数据可视化详解》

echarts折线图不堆叠设置

echarts折线图手机端不能放大解决

Echarts line折线图使用(vue)

pyecharts折线图进阶篇