如何用Echarts制作标准折线图
生活随笔
收集整理的這篇文章主要介紹了
如何用Echarts制作标准折线图
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
我們經(jīng)常使用Echarts制作各種圖表,那么如何運(yùn)用Echarts制作標(biāo)準(zhǔn)折線圖呢?下面給大家演示一下。 操作方法 01 首先打開Sublime Text軟件,新建一個(gè)HTML文檔,并在文檔中添加如下圖所示的HTML結(jié)構(gòu) 02 接下來運(yùn)用scripts標(biāo)簽在HTML中引入echarts的庫文件,如下圖所示 03 然后我們在body標(biāo)簽中創(chuàng)建一個(gè)div區(qū)域用來存放折線圖,如下圖所示,注意給div設(shè)置高度 04 接下來我們通過echarts的init方法對剛才創(chuàng)建的div區(qū)域進(jìn)行初始化,如下圖所示 05 然后我們設(shè)置折線圖的參數(shù),包括X,Y坐標(biāo)軸數(shù)據(jù),折線圖標(biāo)題等信息,如下圖所示 06 接下來在series參數(shù)中設(shè)置折線圖所需要的數(shù)據(jù),如下圖所示,一條折線配置一個(gè)大括號 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)題可以隱藏或者顯示折線
總結(jié)
以上是生活随笔為你收集整理的如何用Echarts制作标准折线图的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 想让宝宝接种五联疫苗年龄却超过了6个月还
- 下一篇: 野芹菜怎么做好吃啊?