如何用Echarts制作標準折線圖
2022-02-23
我們經常使用Echarts制作各種圖表,那么如何運用Echarts制作標準折線圖呢?下面小編給大家演示一下。
操作方法
- 01
首先打開Sublime Text軟件,新建一個HTML文檔,并在文檔中添加如下圖所示的HTML結構
- 02
接下來運用scripts標簽在HTML中引入echarts的庫文件,如下圖所示
- 03
然后我們在body標簽中創(chuàng)建一個p區(qū)域用來存放折線圖,如下圖所示,注意給p設置高度
- 04
接下來我們通過echarts的init方法對剛才創(chuàng)建的p區(qū)域進行初始化,如下圖所示
- 05
然后我們設置折線圖的參數,包括X,Y坐標軸數據,折線圖標題等信息,如下圖所示
- 06
接下來在series參數中設置折線圖所需要的數據,如下圖所示,一條折線配置一個大括號
- 07
參數和數據設置完畢以后我們調用echarts的setOption方法將內容都填充進折線圖展示區(qū)域,如下圖所示
- 08
最后我們運行HTML文件,就可以看到如下圖所示的標準折線圖了,點擊頂部的折線標題可以隱藏或者顯示折線
聲明:本篇經驗系酷知網「www.coozhi.com」原創(chuàng),轉載請注明出處。
詞條內容僅供參考,如果您需要解決具體問題
(尤其在法律、醫(yī)學等領域),建議您咨詢相關領域專業(yè)人士。