JavaScript實現echarts水球圖百分比展示大屏視覺化

2022-10-28 14:01:14

前言：

掘友們，大家晚上好啊。今天突然的看到之前的同學，在宿舍群裡詢問關於echarts水球圖的問題，剛好，小編在之前做大屏視覺化的時候，關於電腦磁碟空間的儲存量做了水球圖的展示，我就簡單的給他分享了製作過程。

範例:

水球圖的應用場景很廣泛，一般最多的就是應用於容量大小的展示，使用空間的多少。這裡先編以自己的專案為例，向大家展示。

簡介:

echarts已經升級到了V5版本，但是我們從官方檔案找水球圖的使用條件時，並沒有這個範例。這裡小編也是github找到了水球圖的外掛，它是基於echarts實現的。

檔案地址:github.com/ecomfe/echa…

程式碼實現

echarts-liquidfill是基於echarts實現的，它是echarts的一款外掛，我們需要安裝使用

使用npm安裝echarts和echarts-liquidfill

安裝的過程中，我們要注意版本相容。

echarts-liquidfill@3 與 echarts@5 相容 echarts-liquidfill@2 與 echarts@4 相容。根據echarts版本按需安裝echarts-liquidfill。

npm install echarts
npm install echarts-liquidfill

專案檔案中引入

import * as echarts from 'echarts';
import 'echarts-liquidfill'

宣告範例，設定引數，繪製水球圖

設定data陣列，內建多個波紋物件。

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: {   // 設定水球圖內部背景色
      // borderColor: '#4348EC',
      // borderWidth: 10,
      color: "transparent",//水球圖內部背景色
    },
    itemStyle: {
      opacity: 0.55,
      // shadowBlur: 50,
      // shadowColor: 'rgba(0, 0, 0, 0.4)',
    },
    label: {   // 設定百分比展示
      color: '#02CDF6',
      normal: {
        textStyle: {
          fontSize: 20,
        },
        formatter: function (param) {
          return param.value * 100 + '%';
        }
      }
    },
    // outline: { // 是否顯示外圈
    //   show: false
    // }
  }],
}
option && myChart.setOption(option);  // 更新option渲染頁面

設定縮放

給視窗新增resize事件，偵聽視窗縮小，觸發echarts縮放事件。

window.addEventListener('resize', function () {
  // 讓我們的圖表呼叫 resize這個方法
  myChart.resize();
});

總結：

大家也可以參考echarts-liquidfill官方的檔案，有更多的api，可以根據創意，設定不同的水球圖。

以上就是JavaScript實現echarts水球圖百分比展示大屏視覺化的詳細內容，更多關於JS echarts水球圖大屏視覺化的資料請關注it145.com其它相關文章！

JavaScript實現echarts水球圖百分比展示大屏視覺化

目錄

前言：

範例:

簡介:

程式碼實現

專案檔案中引入

宣告範例，設定引數，繪製水球圖

設定縮放

總結：

熱門文章