我們經常使用Echarts製作各種圖表,那麼如何運用Echarts製作標準折線圖呢?下面小編給大家演示一下。
操作方法
首先開啟Sublime Text軟體,新建一個HTML文件,並在文件中新增如下圖所示的HTML結構
接下來運用scripts標籤在HTML中引入echarts的庫檔案,如下圖所示
然後我們在body標籤中建立一個div區域用來存放折線圖,如下圖所示,注意給div設定高度
接下來我們通過echarts的init方法對剛才建立的div區域進行初始化,如下圖所示
然後我們設定折線圖的引數,包括X,Y座標軸資料,折線圖示題等資訊,如下圖所示
接下來在series引數中設定折線圖所需要的資料,如下圖所示,一條折線配置一個大括號
引數和資料設定完畢以後我們呼叫echarts的setOption方法將內容都填充進折線圖展示區域,如下圖所示
最後我們執行HTML檔案,就可以看到如下圖所示的標準折線圖了,點選頂部的折線標題可以隱藏或者顯示折線