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