每日五個pyecharts可視化圖表-line：從入門到精通（4）

歡迎來到pyecharts折線圖系列的第四篇文章！在前三篇中，我們已經掌握了多種折線圖類型，包括基本折線圖、平滑折線圖、雨量流量關系圖、多X軸折線圖、堆疊區域圖和階梯圖等。在本文中，我們將繼續探索五種更高級的折線圖類型，幫助您進一步提升數據可視化技能。pyecahts源碼

- 圖表1：漸變背景折線圖——炫酷視覺效果的實現
- - 代碼解釋：
  - 應用場景：
  - 注意事項：
- 圖表2：平滑折線圖——數據趨勢的流暢展示
- - 代碼解釋：
  - 應用場景：
  - 注意事項：
- 圖表3：自定義標記點折線圖——突出顯示關鍵數據
- - 代碼解釋：
  - 應用場景：
  - 注意事項：
- 圖表4：分段顏色折線圖與峰值標記——用電量分布分析
- - 代碼解釋：
  - 應用場景：
  - 注意事項：
- 圖表5：高級漸變背景折線圖與Grid布局——專業數據展示
- - 代碼解釋：
  - 應用場景：
  - 注意事項：
- 總結

圖表1：漸變背景折線圖——炫酷視覺效果的實現

漸變背景折線圖通過設置漸變色背景和區域填充，使圖表具有更炫酷的視覺效果。這種圖表特別適合用于演示和匯報，能夠吸引觀眾的注意力，同時清晰地展示數據趨勢。

import pyecharts.options as opts 
from pyecharts.charts import Line 
from pyecharts.commons.utils import JsCode x_data = ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"] 
y_data = [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200] # 定義背景漸變色
background_color_js = ("new echarts.graphic.LinearGradient(0, 0, 0, 1, ""[{offset: 0, color: '#c86589'}, {offset: 1, color: '#06a7ff'}], false)"
) 
# 定義區域填充漸變色
area_color_js = ("new echarts.graphic.LinearGradient(0, 0, 0, 1, ""[{offset: 0, color: '#eb64fb'}, {offset: 1, color: '#3fbbff0d'}], false)"
) c = (# 初始化圖表，并設置背景漸變色Line(init_opts=opts.InitOpts(bg_color=JsCode(background_color_js))).add_xaxis(xaxis_data=x_data).add_yaxis(series_name="注冊總量",y_axis=y_data,is_smooth=True,  # 平滑折線is_symbol_show=True,  # 顯示標記點symbol="circle",  # 標記點形狀為圓形symbol_size=6,  # 標記點大小linestyle_opts=opts.LineStyleOpts(color="#fff"),  # 線條顏色為白色label_opts=opts.LabelOpts(is_show=True, position="top", color="white"),  # 顯示標簽，位于頂部，白色itemstyle_opts=opts.ItemStyleOpts(color="red", border_color="#fff", border_width=3  # 標記點顏色為紅色，邊框白色，寬度3),tooltip_opts=opts.TooltipOpts(is_show=False),  # 不顯示提示框areastyle_opts=opts.AreaStyleOpts(color=JsCode(area_color_js), opacity=1),  # 區域填充漸變).set_global_opts(title_opts=opts.TitleOpts(title="OCTOBER 2015",pos_bottom="5%",pos_left="center",title_textstyle_opts=opts.TextStyleOpts(color="#fff", font_size=16),),xaxis_opts=opts.AxisOpts(type_="category",boundary_gap=False,axislabel_opts=opts.LabelOpts(margin=30, color="#ffffff63"),  # 坐標軸標簽顏色和邊距axisline_opts=opts.AxisLineOpts(is_show=False),  # 不顯示坐標軸線axistick_opts=opts.AxisTickOpts(is_show=True,length=25,linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),  # 刻度線顏色),splitline_opts=opts.SplitLineOpts(is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")  # 分割線顏色),),yaxis_opts=opts.AxisOpts(type_="value",position="right",  # Y軸位于右側axislabel_opts=opts.LabelOpts(margin=20, color="#ffffff63"),axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(width=2, color="#fff")  # Y軸線顏色和寬度),axistick_opts=opts.AxisTickOpts(is_show=True,length=15,linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),),splitline_opts=opts.SplitLineOpts(is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")),),legend_opts=opts.LegendOpts(is_show=False),  # 不顯示圖例)#.render("line_color_with_js_func.html") 
) 
c.render_notebook()

代碼解釋：

JsCode 用于在Python代碼中嵌入JavaScript函數，這里用于定義漸變色
background_color_js 和 area_color_js 分別定義了圖表背景和區域填充的漸變色
is_smooth=True 設置折線為平滑曲線
symbol 和 symbol_size 控制標記點的形狀和大小
itemstyle_opts 設置標記點的顏色、邊框顏色和寬度
areastyle_opts 設置區域填充樣式，這里使用了漸變色
xaxis_opts 和 yaxis_opts 詳細配置了坐標軸的樣式，包括標簽、刻度線和分割線
title_opts 設置標題的位置、顏色和大小

應用場景：

漸變背景折線圖特別適合以下場景：

數據演示和匯報，需要吸引觀眾注意力
產品展示中的數據可視化
網站和應用程序中的數據儀表盤
營銷材料中的數據展示

注意事項：

漸變色的選擇應符合數據的主題和情感，例如增長數據可以使用積極的顏色
確保文字和圖表元素與背景有足夠的對比度，保證可讀性
過度使用漸變色可能會分散對數據本身的注意力，應適度使用
可以通過調整漸變的顏色和偏移量來創建不同的視覺效果
實際應用中需要替換示例代碼中的數據為真實數據

圖表2：平滑折線圖——數據趨勢的流暢展示

平滑折線圖通過曲線擬合數據點，使折線更加平滑流暢，適合展示趨勢變化較為平緩的數據。這種圖表能夠減少數據波動帶來的視覺干擾，更清晰地呈現數據的整體趨勢。

import pyecharts.options as opts
from pyecharts.charts import Line"""
Gallery 使用 pyecharts 1.1.0
參考地址: `https://echarts.apache.org/examples/editor.html?c=line-smooth` 目前無法實現的功能:暫無
"""x_data = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
y_data = [820, 932, 901, 934, 1290, 1330, 1320](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_data).add_yaxis(series_name="",y_axis=y_data,symbol="emptyCircle",is_symbol_show=True,is_smooth=True,label_opts=opts.LabelOpts(is_show=False),)#.render("smoothed_line_chart.html").render_notebook()
)

代碼解釋：

is_smooth=True 是實現平滑折線的關鍵參數，它會使折線圖的線條變得平滑流暢
symbol="emptyCircle" 設置標記點為空圓圈，增加圖表的美觀度
is_symbol_show=True 顯示標記點，幫助讀者更清晰地識別數據點
tooltip_opts=opts.TooltipOpts(is_show=False) 關閉提示框，簡化圖表
splitline_opts=opts.SplitLineOpts(is_show=True) 顯示分割線，提高數據的可讀性
label_opts=opts.LabelOpts(is_show=False) 關閉標簽顯示，避免圖表過于擁擠

應用場景：

平滑折線圖特別適合以下場景：

展示長期趨勢數據，如股票價格的長期走勢、氣溫的季節變化等
當數據點較多且波動較大時，平滑折線可以減少視覺干擾
需要呈現數據整體趨勢而非具體數據點時
制作更具美感的數據可視化報告

注意事項：

平滑折線圖會一定程度上改變原始數據的形狀，可能會掩蓋一些細節波動
對于需要精確展示每個數據點的場景，不建議使用平滑折線
可以通過調整線條顏色和粗細來增強圖表的可讀性
結合使用標記點可以更好地展示具體數據值
實際應用中可以根據需要添加標題、圖例等元素

圖表3：自定義標記點折線圖——突出顯示關鍵數據

自定義標記點折線圖允許我們在圖表中特定位置添加標記點，用于突出顯示重要的數據點或事件。這種圖表特別適合強調關鍵數據，使讀者能夠快速捕捉到重要信息。

import pyecharts.options as opts 
from pyecharts.charts import Line 
from pyecharts.faker import Faker x, y = Faker.choose(), Faker.values() 
c = (Line() .add_xaxis(x) .add_yaxis("商家A", y, markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(name="自定義標記點", coord=[x[2], y[2]], value=y[2])] ), ) .set_global_opts(title_opts=opts.TitleOpts(title="Line-MarkPoint（自定義）")) #.render("line_markpoint_custom.html") 
) 
c.render_notebook()

代碼解釋：

Faker.choose() 和 Faker.values() 用于生成測試數據
markpoint_opts 參數用于配置標記點
MarkPointItem 定義了一個標記點，其中：
- name 是標記點的名稱
- coord 是標記點的坐標，這里使用了[x[2], y[2]]指定第三個數據點
- value 是標記點的值，這里使用了y[2]
set_global_opts 設置了圖表標題

應用場景：

自定義標記點折線圖特別適合以下場景：

突出顯示時間序列中的重要事件或數據點
標記業務目標達成點，如銷售目標、用戶增長目標等
強調異常值或峰值數據
在演示和匯報中引導觀眾關注關鍵信息

注意事項：

標記點不宜過多，否則會使圖表過于擁擠，影響可讀性
可以通過symbol和symbol_size參數自定義標記點的形狀和大小
可以通過itemstyle_opts參數設置標記點的樣式
實際應用中，應根據真實數據調整標記點的位置和值
可以同時添加多個標記點，只需在data列表中添加多個MarkPointItem對象

圖表4：分段顏色折線圖與峰值標記——用電量分布分析

分段顏色折線圖通過不同顏色區分數據的不同階段，結合標記區域可以更直觀地展示數據的高峰期和低谷期。這種圖表特別適合分析時間序列數據中的模式和異常情況。

import pyecharts.options as opts
from pyecharts.charts import Line"""
Gallery 使用 pyecharts 1.1.0
參考地址: `https://echarts.apache.org/examples/editor.html?c=line-sections` 目前無法實現的功能:1、visualMap 暫時無法設置隱藏
"""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().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": "green"},{"gt": 14, "lte": 17, "color": "red"},{"gt": 17, "color": "green"},],),).set_series_opts(markarea_opts=opts.MarkAreaOpts(data=[opts.MarkAreaItem(name="早高峰", x=("07:30", "10:00")),opts.MarkAreaItem(name="晚高峰", x=("17:30", "21:15")),]))#.render("distribution_of_electricity.html").render_notebook()
)

代碼解釋：

is_smooth=True 設置折線為平滑曲線，使圖表更加流暢美觀
visualmap_opts 配置了分段顏色映射，根據x軸索引值將折線分為不同顏色段：
- 索引≤6（對應00:00-07:30）：綠色
- 6<索引≤8（對應08:45-10:00）：紅色（早高峰）
- 8<索引≤14（對應11:15-16:15）：綠色
- 14<索引≤17（對應17:30-20:00）：紅色（晚高峰）
- 索引>17（對應21:15-23:45）：綠色
markarea_opts 標記了兩個高峰期區域：
- 早高峰：07:30-10:00
- 晚高峰：17:30-21:15
tooltip_opts 設置提示框觸發方式為坐標軸，并將坐標軸指示器類型設置為十字交叉線
boundary_gap=False 設置x軸不保留邊距，使折線圖更加緊湊
splitline_opts=opts.SplitLineOpts(is_show=True) 顯示y軸分割線，提高數據可讀性

應用場景：

分段顏色折線圖特別適合以下場景：

電力、水資源等公共事業的用量分布分析
交通流量監測與高峰期識別
網站訪問量或APP使用時長的時段分析
生產線設備運行狀態監控
環境監測數據的時段變化分析

注意事項：

顏色分段的設置應根據實際業務需求進行調整，確保顏色區分度足夠
標記區域不宜過多，以免圖表過于復雜影響可讀性
可以通過調整visualmap_opts中的pieces參數來定義不同的分段規則
實際應用中，建議根據真實數據的特點調整平滑度和線條樣式
對于長時間序列數據，可以考慮使用dataZoom組件實現數據縮放功能

圖表5：高級漸變背景折線圖與Grid布局——專業數據展示

高級漸變背景折線圖結合了Grid布局組件，可以更精確地控制圖表在畫布中的位置，同時通過精心設計的漸變色和標簽樣式，打造出專業級的數據可視化效果。這種圖表特別適合用于企業報表、數據分析平臺和專業演示。

import pyecharts.options as opts
from pyecharts.charts import Line, Grid
from pyecharts.commons.utils import JsCode"""
參考地址: `https://gallery.echartsjs.com/editor.html?c=xEyDk1hwBx` 
"""x_data = ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
y_data = [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200]background_color_js = ("new echarts.graphic.LinearGradient(0, 0, 0, 1, ""[{offset: 0, color: '#c86589'}, {offset: 1, color: '#06a7ff'}], false)"
)
area_color_js = ("new echarts.graphic.LinearGradient(0, 0, 0, 1, ""[{offset: 0, color: '#eb64fb'}, {offset: 1, color: '#3fbbff0d'}], false)"
)c = (Line(init_opts=opts.InitOpts(bg_color=JsCode(background_color_js))).add_xaxis(xaxis_data=x_data).add_yaxis(series_name="注冊總量",y_axis=y_data,is_smooth=True,is_symbol_show=True,symbol="circle",symbol_size=6,linestyle_opts=opts.LineStyleOpts(color="#fff"),label_opts=opts.LabelOpts(is_show=True, position="top", color="white"),itemstyle_opts=opts.ItemStyleOpts(color="red", border_color="#fff", border_width=3),tooltip_opts=opts.TooltipOpts(is_show=False),areastyle_opts=opts.AreaStyleOpts(color=JsCode(area_color_js), opacity=1),).set_global_opts(title_opts=opts.TitleOpts(title="OCTOBER 2015",pos_bottom="5%",pos_left="center",title_textstyle_opts=opts.TextStyleOpts(color="#fff", font_size=16),),xaxis_opts=opts.AxisOpts(type_="category",boundary_gap=False,axislabel_opts=opts.LabelOpts(margin=30, color="#ffffff63"),axisline_opts=opts.AxisLineOpts(is_show=False),axistick_opts=opts.AxisTickOpts(is_show=True,length=25,linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),),splitline_opts=opts.SplitLineOpts(is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")),),yaxis_opts=opts.AxisOpts(type_="value",position="right",axislabel_opts=opts.LabelOpts(margin=20, color="#ffffff63"),axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(width=2, color="#fff")),axistick_opts=opts.AxisTickOpts(is_show=True,length=15,linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),),splitline_opts=opts.SplitLineOpts(is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")),),legend_opts=opts.LegendOpts(is_show=False),)
)(Grid().add(c,grid_opts=opts.GridOpts(pos_top="20%",pos_left="10%",pos_right="10%",pos_bottom="15%",is_contain_label=True,),)#.render("beautiful_line_chart.html").render_notebook()
)