javascript?Echart可視化學(xué)習(xí)
官網(wǎng)找到類似實(shí)例, 適當(dāng)分析,并且引入到HTML頁(yè)面中
代碼整理
去掉標(biāo)題
去掉工具箱
去掉一個(gè)圖
查看效果
Index.html中的組件
在index.js中立即執(zhí)行函數(shù)
實(shí)例化對(duì)象
指定配置
把配置給實(shí)例對(duì)象
讓圖表跟隨屏幕自動(dòng)的去適應(yīng)
查看效果
根據(jù)需求定制圖表
需求1:顏色設(shè)置
需求2:修改餅形圖大小 ( series對(duì)象)
需求3: 把餅形圖的顯示模式改為 半徑模式
需求4:數(shù)據(jù)使用更換(series對(duì)象 里面 data對(duì)象)
位置修改
需求5:字體略小些 10 px ( series對(duì)象里面設(shè)置 )
餅圖圖形上的文本標(biāo)簽可以控制餅形圖的文字的一些樣式。 label 對(duì)象設(shè)置
需求6:防止縮放的時(shí)候,引導(dǎo)線過(guò)長(zhǎng)。引導(dǎo)線略短些 (series對(duì)象里面的 labelLine 對(duì)象設(shè)置 )
連接圖表 6 px
連接文字 8 px
Legend設(shè)置
查看效果
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
layui上傳圖片到服務(wù)器的非項(xiàng)目目錄下的方法
今天小編就為大家分享一篇layui上傳圖片到服務(wù)器的非項(xiàng)目目錄下的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09select標(biāo)簽設(shè)置默認(rèn)選中的選項(xiàng)方法
下面小編就為大家分享一篇select標(biāo)簽設(shè)置默認(rèn)選中的選項(xiàng)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03JS實(shí)現(xiàn)簡(jiǎn)單的todoList(記事本)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單的todoList(記事本)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08實(shí)現(xiàn)點(diǎn)擊列表彈出列表索引的兩種方式
使用利用事件冒泡委托給列表的父節(jié)點(diǎn)去處理的方式第二種方式就是使用閉包了,感興趣的你可以參考下本文,或許對(duì)你學(xué)習(xí)js有所幫助2013-03-03el-table動(dòng)態(tài)渲染列、可編輯單元格、虛擬無(wú)縫滾動(dòng)的實(shí)現(xiàn)
vue對(duì)數(shù)據(jù)處理很常見,本文主要介紹了對(duì)el-table組件二次封裝,包括對(duì)el-table的動(dòng)態(tài)渲染、單元格編輯;對(duì)于無(wú)縫滾動(dòng)的實(shí)現(xiàn),優(yōu)化大數(shù)據(jù)量下的頁(yè)面卡頓問題,感興趣的可以了解一下2023-12-12LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法
今天小編就為大家分享一篇LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08BootStrap Select清除選中的狀態(tài)恢復(fù)默認(rèn)狀態(tài)
PC端項(xiàng)目中經(jīng)常會(huì)出現(xiàn)大量的數(shù)據(jù)列表頁(yè)面,涉及到下拉框選擇篩選條件;當(dāng)時(shí)用到bootstrap-select下拉框時(shí)該如何點(diǎn)擊重置按鈕就清除下拉框的選中狀態(tài)呢?下面通過(guò)本文給大家介紹下,需要的的朋友參考下吧2017-06-06