我們經(jīng)常使用Echarts制作各種圖表，那么如何運(yùn)用Echarts制作標(biāo)準(zhǔn)折線圖呢？下面小編給大家演示一下。

操作方法

• 01

  首先打開(kāi)Sublime Text軟件，新建一個(gè)HTML文檔，并在文檔中添加如下圖所示的HTML結(jié)構(gòu)

  
• 02

  接下來(lái)運(yùn)用scripts標(biāo)簽在HTML中引入echarts的庫(kù)文件，如下圖所示

  
• 03

  然后我們?cè)赽ody標(biāo)簽中創(chuàng)建一個(gè)p區(qū)域用來(lái)存放折線圖，如下圖所示，注意給p設(shè)置高度

  
• 04

  接下來(lái)我們通過(guò)echarts的init方法對(duì)剛才創(chuàng)建的p區(qū)域進(jìn)行初始化，如下圖所示

  
• 05

  然后我們?cè)O(shè)置折線圖的參數(shù)，包括X，Y坐標(biāo)軸數(shù)據(jù)，折線圖標(biāo)題等信息，如下圖所示

  
• 06

  接下來(lái)在series參數(shù)中設(shè)置折線圖所需要的數(shù)據(jù)，如下圖所示，一條折線配置一個(gè)大括號(hào)

  
• 07

  參數(shù)和數(shù)據(jù)設(shè)置完畢以后我們調(diào)用echarts的setOption方法將內(nèi)容都填充進(jìn)折線圖展示區(qū)域，如下圖所示

  
• 08

  最后我們運(yùn)行HTML文件，就可以看到如下圖所示的標(biāo)準(zhǔn)折線圖了，點(diǎn)擊頂部的折線標(biāo)題可以隱藏或者顯示折線

  

聲明：本篇經(jīng)驗(yàn)系酷知網(wǎng)「www.coozhi.com」原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。