JavaScript實(shí)現(xiàn)echarts水球圖百分比展示大屏可視化
前言：
掘友們，大家晚上好啊。今天突然的看到之前的同學(xué)，在宿舍群里詢問關(guān)于echarts水球圖的問題，剛好，小編在之前做大屏可視化的時(shí)候，關(guān)于電腦磁盤空間的存儲(chǔ)量做了水球圖的展示，我就簡單的給他分享了制作過程。
示例:
水球圖的應(yīng)用場(chǎng)景很廣泛，一般最多的就是應(yīng)用于容量大小的展示，使用空間的多少。這里先編以自己的項(xiàng)目為例，向大家展示。
簡介:
echarts已經(jīng)升級(jí)到了V5版本，但是我們從官方文檔找水球圖的使用條件時(shí)，并沒有這個(gè)示例。這里小編也是github找到了水球圖的插件，它是基于echarts實(shí)現(xiàn)的。
代碼實(shí)現(xiàn)
echarts-liquidfill是基于echarts實(shí)現(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
項(xiàng)目文件中引入
import * as echarts from 'echarts'; import 'echarts-liquidfill'
聲明實(shí)例，設(shè)置參數(shù)，繪制水球圖
設(shè)置data數(shù)組，內(nèi)置多個(gè)波紋對(duì)象。
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這個(gè)方法
myChart.resize();
});
總結(jié)：
大家也可以參考echarts-liquidfill官方的文檔，有更多的api，可以根據(jù)創(chuàng)意，設(shè)置不同的水球圖。
以上就是JavaScript實(shí)現(xiàn)echarts水球圖百分比展示大屏可視化的詳細(xì)內(nèi)容，更多關(guān)于JS echarts水球圖大屏可視化的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
基于OL2實(shí)現(xiàn)百度地圖ABCD marker的效果
2015-10-10
這篇文章主要介紹了不同編碼的頁面表單數(shù)據(jù)亂碼問題解決方法,本文使用一個(gè)表單不常用屬性accept-charset解決了這個(gè)問題,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了微信小程序登錄session的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
這篇文章給大家分析使用Fullpage插件快速開發(fā)整屏翻頁的頁面，適用于各大網(wǎng)站，此功能非常高大上，下面就跟隨腳本之家小編看看Fullpage插件是怎么實(shí)現(xiàn)此效果的2017-09-09
JavaScript中的對(duì)象繼承是構(gòu)建靈活、可維護(hù)代碼的關(guān)鍵部分,本文主要介紹了深度解析JavaScript對(duì)象繼承,包括原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承等,感興趣的可以了解一下2024-01-01
js刪除數(shù)組中某幾項(xiàng)的方法總結(jié)
在本篇文章里小編給大家分享了關(guān)于js刪除數(shù)組中某一項(xiàng)或幾項(xiàng)的幾種方法內(nèi)容，有需要的朋友們學(xué)習(xí)下。2019-01-01
了不起的11個(gè)JavaScript代碼重構(gòu)最佳實(shí)踐小結(jié)
這篇文章主要介紹了了不起的11個(gè)JavaScript代碼重構(gòu)最佳實(shí)踐小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
使用javascript將時(shí)間轉(zhuǎn)換成今天，昨天，前天等格式
這篇文章主要介紹了使用javascript將時(shí)間轉(zhuǎn)換成今天，昨天，前天等格式的相關(guān)資料,需要的朋友可以參考下2015-06-06
JavaScript已經(jīng)內(nèi)置了很多強(qiáng)大的方法，但有時(shí)你需要的某個(gè)功能在內(nèi)置的方法中沒有，我們?cè)趺磥韮?yōu)雅地?cái)U(kuò)展JavaScript功能呢2012-04-04
這篇文章主要介紹了JavaScript的this關(guān)鍵字，真正幫助大家做到精通this關(guān)鍵字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02