JavaScript實現(xiàn)echarts水球圖百分比展示大屏可視化
前言：
掘友們，大家晚上好啊。今天突然的看到之前的同學(xué)，在宿舍群里詢問關(guān)于echarts水球圖的問題，剛好，小編在之前做大屏可視化的時候，關(guān)于電腦磁盤空間的存儲量做了水球圖的展示，我就簡單的給他分享了制作過程。
示例:
水球圖的應(yīng)用場景很廣泛，一般最多的就是應(yīng)用于容量大小的展示，使用空間的多少。這里先編以自己的項目為例，向大家展示。
簡介:
echarts已經(jīng)升級到了V5版本，但是我們從官方文檔找水球圖的使用條件時，并沒有這個示例。這里小編也是github找到了水球圖的插件，它是基于echarts實現(xiàn)的。
代碼實現(xiàn)
echarts-liquidfill是基于echarts實現(xiàn)的，它是echarts的一款插件，我們需要安裝使用
使用npm安裝echarts和echarts-liquidfill
安裝的過程中，我們要注意版本兼容。
echarts-liquidfill@3 與 echarts@5 兼容 echarts-liquidfill@2 與 echarts@4 兼容。根據(jù)echarts版本按需安裝echarts-liquidfill。
npm install echarts npm install echarts-liquidfill
項目文件中引入
import * as echarts from 'echarts'; import 'echarts-liquidfill'
聲明實例，設(shè)置參數(shù)，繪制水球圖
設(shè)置data數(shù)組，內(nèi)置多個波紋對象。
var chartDom = document.getElementById('disk');
var myChart = echarts.init(chartDom);
option = {
series: [{
type: 'liquidFill',
name: 'Liquid Fill',
radius: '70%',
itemStyle: {
opacity: 0.55,
},
data: [{
name: 'score',
direction: 'right',
value: 0.32,
itemStyle: {
// opacity: 0.55,
normal: {
color: '#02CDF6',
}
},
},
{
name: 'scores',
direction: 'right',
value: 0.69,
itemStyle: {
opacity: 0.55,
normal: {
color: '#134892'
}
}
},
{
name: 'scorex',
direction: 'right',
value: 0.45,
itemStyle: {
opacity: 0.55,
normal: {
// color: 'red'
}
}
}],
backgroundStyle: { // 設(shè)置水球圖內(nèi)部背景色
// borderColor: '#4348EC',
// borderWidth: 10,
color: "transparent",//水球圖內(nèi)部背景色
},
itemStyle: {
opacity: 0.55,
// shadowBlur: 50,
// shadowColor: 'rgba(0, 0, 0, 0.4)',
},
label: { // 設(shè)置百分比展示
color: '#02CDF6',
normal: {
textStyle: {
fontSize: 20,
},
formatter: function (param) {
return param.value * 100 + '%';
}
}
},
// outline: { // 是否顯示外圈
// show: false
// }
}],
}
option && myChart.setOption(option); // 更新option渲染頁面
設(shè)置縮放
給窗口添加resize事件，偵聽窗口縮小，觸發(fā)echarts縮放事件。
window.addEventListener('resize', function () {
// 讓我們的圖表調(diào)用 resize這個方法
myChart.resize();
});
總結(jié)：
大家也可以參考echarts-liquidfill官方的文檔，有更多的api，可以根據(jù)創(chuàng)意，設(shè)置不同的水球圖。
以上就是JavaScript實現(xiàn)echarts水球圖百分比展示大屏可視化的詳細(xì)內(nèi)容，更多關(guān)于JS echarts水球圖大屏可視化的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
typeof 在js中typeof是檢查類型的,在ts中也有這個功能,下面這篇文章主要給大家介紹了關(guān)于TypeScript基本類型之typeof和keyof的相關(guān)資料,需要的朋友可以參考下2023-04-04
indexOf()函數(shù)用于查找子字符串在當(dāng)前字符串中第一次出現(xiàn)的位置。該函數(shù)屬于String對象，所有主流瀏覽器均支持該函數(shù)。下面我們就來詳細(xì)探討下javascript的index0f()函數(shù)2015-05-05
uni-app是一個使用Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序,下面這篇文章主要給大家介紹了關(guān)于如何利用uni-app開發(fā)App的相關(guān)資料,需要的朋友可以參考下2022-11-11
在現(xiàn)代?Web?應(yīng)用程序中,實現(xiàn)高效的搜索功能是至關(guān)重要的,Fuse.js?是一個強(qiáng)大的?JavaScript?庫,它提供了靈活的模糊搜索和文本匹配功能,使您能夠輕松實現(xiàn)出色的搜索體驗,文中代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-01-01
ECMAScript?數(shù)據(jù)類型之Number類型
這篇文章主要介紹了?ECMAScript?數(shù)據(jù)類型之Number類型，Number類型使用IEEE?754格式表示整數(shù)和浮點值，更多相關(guān)內(nèi)容請需要的小伙伴參考下面文章內(nèi)容2022-06-06
js+canvas實現(xiàn)飛機(jī)大戰(zhàn)
這篇文章主要為大家詳細(xì)介紹了js?canvas實現(xiàn)飛機(jī)大戰(zhàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
JS實現(xiàn)table表格固定表頭且表頭隨橫向滾動而滾動
這篇文章主要介紹了JS實現(xiàn)table表格固定表頭且表頭可以隨橫向滾動而滾動,需要的朋友可以參考下2017-10-10
JavaScript實現(xiàn)圖片滑動切換的代碼示例分享
這篇文章主要介紹了JavaScript實現(xiàn)圖片滑動切換的代碼示例分享,能夠控制包括滑動時間和切換數(shù)量等,需要的朋友可以參考下2016-03-03
詳解JavaScript調(diào)用棧、尾遞歸和手動優(yōu)化
本篇文章主要介紹了詳解JavaScript調(diào)用棧、尾遞歸和手動優(yōu)化，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)標(biāo)簽頁切換效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05