本文將講解如何通過中繼器與三角繪制一個折線，并實現(xiàn)高復用（做簡單的改變即可適應于不同的需求，如改變數(shù)值直接改變折線的樣子，文末附源文件下載。）

原型界面：

中繼器對應的數(shù)值：

最終html效果:

現(xiàn)在我們就來看看如何實現(xiàn)呢？

中繼器數(shù)值分為三個：

1. xulie:序列（無意義）
2. zhi1:每個線段起點的值
3. zhi2:每個線段重點的值（zhi2=后一個序列的zhi1）

相應的中繼器內(nèi)的原件分為是四個：

1. 起點半圓：d1；
2. 終點半圓：d2；
3. 線段：t；
4. 背景（半透明層）：yt （為了出背景交替的效果，也是作為隔斷的寬）。

將值帶入：

d1的坐標（0，[[This.y-Item.zhi1-5]]）

y=當前點的位置-應該上移動的位置；應該上移動的位置=zhi1+6（起點半圓的半徑）-1（線寬的一半）

d2的坐標（[[yt.width-6]]，[[This.y-Item.zhi2-5]]）

x=一個隔斷的寬度-終點半圓的半徑】【y=當前點的位置-應該上移動的位置；應該上移動的位置=zhi2+6（起點半圓的半徑）-1（線寬的一半）

現(xiàn)在重點來了，對線段的處理分為如下三部：

1. 將線段移動到應該的位置d；
2. 計算出兩點之間的斜線的長度l，并改變線段的尺寸為l；
3. 計算出線段應該旋轉(zhuǎn)的角度，并旋轉(zhuǎn)線段。

直接上公式了：

1. 移動位置為（0，[[This.y-Item.zhi1-5]]）。
2. 線段長度為 （[[Math.pow（This.width*This.width+（Item.zhi2-Item.zhi1）*（Item.zhi2-Item.zhi1）,0.5）]]） 【y= （隔斷的寬度^2+起點終點的高度差^2）開平方】。
3. 旋轉(zhuǎn)的角度為（[[Math.atan（Item.zhi2-Item.zhi1）/yt.width）*180/3.14]]）【角度=atan（起點終點的y軸差/起點終點的x軸差）】。

大功告成！

改變數(shù)值在運行一下：

是不是很簡單呢？

再講講如何復用：

1. 若需要改變數(shù)據(jù)條數(shù)，直接為中繼器添加數(shù)據(jù)幾個；
2. 若需要改變一個隔斷的寬度，直接改變中繼器中的的 線段t的長度 與背景半透明層yt的寬，并調(diào)整終點的起始位置即可；
3. 需要調(diào)整整個折線圖的高度，直接改變中級其中的線段 t 起點終點半圓（d1,d2）的位置，并改變半透明層yt的高度即可。

這個頁面是參考的是公眾平臺助手的一個數(shù)據(jù)界面，完整界面如下（源文件可下載）：

原型文件下載：

鏈接：https://pan.baidu.com/s/1f4UHdLXVLSytPUGh3TKUvw

密碼：e48t

本文由 @?ytw 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議