2023學(xué)年完整公開課版標(biāo)注echarts折線圖

Echarts繪圖標(biāo)注echarts折線圖標(biāo)注echarts折線圖介紹如何標(biāo)注echarts折線圖/01

標(biāo)注echarts折線圖介紹標(biāo)注echarts折線圖介紹對于echarts折線圖標(biāo)注的設(shè)置我們可以從這幾個方面入手：首先設(shè)置折線圖標(biāo)注的圖形；然后控制該標(biāo)注的大小、旋轉(zhuǎn)角度等；接著就可以設(shè)置折線圖標(biāo)注的樣式、文本了（可以通過normal和emphasis兩種狀態(tài)進行設(shè)置）。最后，您可以設(shè)置標(biāo)注動畫，如動畫的閾值、時長、初始動畫的緩動效果等等。這只是本節(jié)內(nèi)容的一個概述，詳細的操作過程還得查閱文章內(nèi)容。如何標(biāo)注echarts折線圖/02如何標(biāo)注echarts折線圖

1、series[i]-line.markPointObject設(shè)置echarts折線圖標(biāo)注。2、series[i]-line.markPoint.symbolstring[default:'pin']折線圖標(biāo)注的圖形設(shè)置。echarts提供的標(biāo)記類型包括'circle','rect','roundRect','triangle','diamond','pin','arrow'也可以通過'image://url'設(shè)置為圖片，其中url為圖片的鏈接，或者dataURI?？梢酝ㄟ^'path://'將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因為縮放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會自適應(yīng)調(diào)整為合適的大小。如何標(biāo)注echarts折線圖

3、series[i]-line.markPoint.symbolSize

number,Array,Function[default:50]折線圖標(biāo)注的大小，可以設(shè)置成諸如10這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，例如[20,10]表示標(biāo)記寬為20，高為10。如果需要每個數(shù)據(jù)的圖形大小不一樣，可以設(shè)置為如下格式的回調(diào)函數(shù)：其中第一個參數(shù)value為data中的數(shù)據(jù)值。第二個參數(shù)params是其它的數(shù)據(jù)項參數(shù)。series[i]-line.markPoint.symbolRotatenumber折線圖標(biāo)注的旋轉(zhuǎn)角度。如何標(biāo)注echarts折線圖

4、series[i]-line.markPoint.symbolOffset

Array[default:[0,0]]折線圖標(biāo)注相對于原本位置的偏移。默認情況下，標(biāo)記會居中置放在數(shù)據(jù)對應(yīng)的位置，但是如果symbol是自定義的矢量路徑或者圖片，就有可能不希望symbol居中。這時候可以使用該配置項配置symbol相對于原本居中的偏移，可以是絕對的像素值，也可以是相對的百分比。例如

[0,'50%']

就是把自己向上移動了一半的位置，在symbol圖形是氣泡的時候可以讓圖形下端的箭頭對準(zhǔn)數(shù)據(jù)點。5、series[i]-line.markPoint.silent

boolean[default:false]折線圖標(biāo)注是否不響應(yīng)和觸發(fā)鼠標(biāo)事件，默認為false，即響應(yīng)和觸發(fā)鼠標(biāo)事件。如何標(biāo)注echarts折線圖

6、series[i]-line.markPoint.label

Object折線圖標(biāo)注的文本。7、series[i]-line.markPoint.itemStyle

Object折線圖標(biāo)注的樣式。8、series[i]-line.markPoint.data[i]

Object折線圖標(biāo)注的數(shù)據(jù)數(shù)組。每個數(shù)組項是一個對象，有下面幾種方式指定標(biāo)注的位置。(1)通過x,y屬性指定相對容器的屏幕坐標(biāo)，單位像素，支持百分比。(2)用coord屬性指定數(shù)據(jù)在相應(yīng)坐標(biāo)系上的坐標(biāo)位置，單個維度支持設(shè)置'min','max','average'。(3)直接用type屬性標(biāo)注系列中的最大值，最小值。這時候可以使用valueIndex

指定是在哪個維度上的最大值、最小值、平均值?；蛘呖梢允褂胿alueDim指定在哪個維度上的最大值、最小值、平均值。如何標(biāo)注echarts折線圖

當(dāng)多個屬性同時存在時，優(yōu)先級按上述的順序。示例：9、series[i]-line.markPoint.animationboolean[default:true]是否在折線圖標(biāo)注中開啟動畫。如何標(biāo)注echarts折線圖

10、series[i]-line.markPoint.animationThreshold

number[default:2000]是否開啟折線圖標(biāo)注動畫的閾值，當(dāng)單個系列顯示的圖形數(shù)量大于這個閾值時會關(guān)閉動畫。11、series[i]-line.markPoint.animationDuration

number[default:1000]折線圖標(biāo)注初始動畫的時長，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的delay時間實現(xiàn)更戲劇的初始動畫效果：如何標(biāo)注echarts折線圖

12、series[i]-line.markPoint.animationEasing

string[default:cubicOut]折線圖標(biāo)注初始動畫的緩動效果。13、series[i]-line.markPoint.animationDelay

number,Function[default:0]折線圖標(biāo)注初始動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的delay時間實現(xiàn)更戲劇的初始動畫效果。14、series[i]-line.markPoint.animationDurationUpdatenumber,Function[default:300]折線圖標(biāo)注數(shù)據(jù)更新動畫的時長。如何標(biāo)注echarts折線圖

15、series[i]-line.markPoint.animationEasingUpdate

string[default:cubicOut]折線圖標(biāo)注數(shù)據(jù)更新動畫的緩動效果。16、series[i]-line.