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

Posted 2023-04-09

参考技术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参数可以设置标记区域名称和位置。