當前位置:妙知谷 >

遊戲數碼 >IT技術 >

如何用Echarts製作標準折線圖

如何用Echarts製作標準折線圖

我們經常使用Echarts製作各種圖表,那麼如何運用Echarts製作標準折線圖呢?下面小編給大家演示一下。

操作方法

首先打開Sublime Text軟件,新建一個HTML文檔,並在文檔中添加如下圖所示的HTML結構

如何用Echarts製作標準折線圖

接下來運用scripts標籤在HTML中引入echarts的庫文件,如下圖所示

如何用Echarts製作標準折線圖 第2張

然後我們在body標籤中創建一個div區域用來存放折線圖,如下圖所示,注意給div設置高度

如何用Echarts製作標準折線圖 第3張

接下來我們通過echarts的init方法對剛才創建的div區域進行初始化,如下圖所示

如何用Echarts製作標準折線圖 第4張

然後我們設置折線圖的參數,包括X,Y座標軸數據,折線圖標題等信息,如下圖所示

如何用Echarts製作標準折線圖 第5張

接下來在series參數中設置折線圖所需要的數據,如下圖所示,一條折線配置一個大括號

如何用Echarts製作標準折線圖 第6張

參數和數據設置完畢以後我們調用echarts的setOption方法將內容都填充進折線圖展示區域,如下圖所示

如何用Echarts製作標準折線圖 第7張

最後我們運行HTML文件,就可以看到如下圖所示的標準折線圖了,點擊頂部的折線標題可以隱藏或者顯示折線

如何用Echarts製作標準折線圖 第8張
標籤: Echarts 折線圖
  • 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/sm/itjishu/l7m8q.html