記錄--ECharts — 餅圖相關功能點(內環、外環、環形間隔、環形文字、輪播動畫)

来源:https://www.cnblogs.com/smileZAZ/archive/2023/11/10/17824711.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 記錄一下在公司遇到的一些功能,以及相關實現 以上的內容我花了一周時間去實現的,自己也覺得時間很長,但主要因為很少使用ECharts,導致使用的過程中大部分的時間都在查文檔。 對於上面的這些功能點,其實算是寫了兩遍吧,這周一開了個Code ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

記錄一下在公司遇到的一些功能,以及相關實現

以上的內容我花了一周時間去實現的,自己也覺得時間很長,但主要因為很少使用ECharts,導致使用的過程中大部分的時間都在查文檔。

對於上面的這些功能點,其實算是寫了兩遍吧,這周一開了個Code Review,因為涉及到公共組件了,所以得想辦法遷移出去,導致得重新改善一下代碼;另一方面的話,主要是我把每一個功能其實都拓展成一個圖表了(也就是說包括主圖表、內環圖表、外環圖表、環形文字圖表),會導致渲染消耗太大,所以得進行細分,也就是加入到series里即可。

接下來我們來說說各個功能點如何實現吧

內環

效果如下

簡單說就是在餅圖內部實現一個圓環的旋轉效果,因為長度、顏色的相關聯,

所以我的思路就是再畫一個餅圖圖表去實現它,然後刪除lengend、tooltip等相關提示。

一開始想多添加一個series解決的,但是因為需要旋轉效果,不好獲取這個元素,所以就把它抽離出來,單獨實現一個了

刪除圖表相關提示信息的代碼

option = {
	backgroundColor: 'transparent',
  tooltip: {
    show: false
  },
  legend: {
    show: false
  },
  series: [
    {
      silent: true, // 禁用圖標中的點擊和觸摸事件
      left: 0,
      label: {
        show: false
      },
      itemStyle: 
        borderWidth: 0,
        borderRadius: 0,
      }
    }
	]
}

漸變色效果

主要就是通過線性漸變去實現的,還看了幾個不錯的文章,只是實現比較複雜,但效果更好一點

玩轉ECharts之實現“環形漸變”

color: props.option.color.map(color => {
  return {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(0,180,255,.05)' // 0% 處的顏色
      },
      {
        offset: 1,
        color: color // 100% 處的顏色
      }
    ]
  }
})
最終實現效果

外環

效果如下

簡單說就是在餅圖外部實現一個圓環的擴展弧度

因為我們的圖表可能存在多個series,即多個環形圖,所以我們需要找到最外部的最大環半徑,從它開始向外擴展(這個可以擴展到series上,無需再添加一個圖表)

實現上和內環其實一樣的,只要修改一個radius的顯示位置即可,從最大環半徑開始向外拓展。

最終實現效果

環形間隔

效果如下

這個網上例子其實挺多的,主要的方式就是拓展data數據,然後設置itemStylecolor為透明色即可,看起來很簡單;但是在我們的項目里會有一定難度,因為我們的data處理被封裝到內部公共組件去處理了,所以沒辦法去直接修改data

這裡的思路(組長提供的),傳一個方法到內部去,然後獲取到其更新data後的option,併在更新前進行處理

所以我的方式是設置了一個方法 handleOptionBeforeUpdate ,接收instance、option兩個參數,instace後面的輪播動畫會使用到,現在只需要使用option,我們對其進行修改,再返回一個新的option回去,讓它進行更新即可

插入間隙

    // 計算間隙(根據比例判斷間隙需要多大)
    const sum = option.series[0].data.reduce((sum, d) => sum + +d.value, 0)
    const val = (sum * props.borderGap) / 10
    for (const series of option.series) {
      series.data = series.data.reduce(
        (sum, d) => [
          ...sum,
          d,
          { name: '', value: val, itemStyle: { color: 'transparent' } }
        ],
        []
      )
    }
最終實現效果

輪播動畫

效果如下

這個看著很難,但是網上例子挺多的,隨便找找就有好幾個

主要就是通過定時器和 ECharts實例 去用代碼觸發action

dispatchAction

    instance.dispatchAction({
      type: 'downplay',
      seriesIndex: 0, // 系列
    	dataIndex: 0 // 具體index
    })

type類型

  • highlight —— 高亮
  • downplay —— 取消高亮
  • showTip —— 顯示Tooltip
  • hideTip —— 隱藏Tooltip
  • select —— 選中
  • unselect —— 取消選中

我們後面討論決定選擇使用highlight和downplay兩種

不使用select的原因,主要是因為selct選中在項目里有問題,會存在選中多個的情況,無法取消選中,通過的方式是重新渲染圖表,但是太消耗性能了,而且選中會導致居中文字偏移,所以放棄了這種方式

接下來,看一下具體的定時器方法

    const timer = useRef<NodeJS.Timer>()
    const currentIndex = useRef<number>(0)

    const resetSelect = () => {
      eChartInstance.current?.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
      })
    }

    const selectSector = () => {
      eChartInstance.current?.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex.current
      })
    }

    // 輪播動畫
    const rotatingAnimation = () => {
      if (props.rotatingAnimation.isActive) {
        clearInterval(timer.current)
        timer.current = setInterval(() => {
          const dataLen = eChartOption.current?.series[0].data.length ?? 0
          currentIndex.current = (currentIndex.current + 2) % dataLen
          resetSelect()
          selectSector()
        }, props.rotatingAnimation.duration * 1000)
      } else {
        resetSelect()
      }
    }

    useEffect(() => {
      rotatingAnimation()
      return () => {
        clearInterval(timer.current)
      }
    }, [props.rotatingAnimation])

主要就是定時器這一塊,其實挺簡單的

最終實現效果

環形文字

效果如下

這個文字效果我找了很久也沒看到完美的實現方案,目前有兩種比較可行的方案,一種是根據位置旋轉每一個文字(不大現實),另一種就是通過旭日圖去顯示了,旭日圖的文字是支持這種方式的。

    const textSeries = {
      type: 'sunburst',
      sort: null,
      silent: true, // 禁用圖標中的點擊和觸摸事
      nodeClick: false,
      label: {
        show: true,
        position: 'outside',
        rotate: 'tangential', // 實現!!!
        align: 'right',
        distance: 10,
        padding: [0, -15] // 進行偏移
      },
      itemStyle: {
        borderWidth: 0,
        borderRadius: 0,
        color: 'transparent'
      }
    }

其他圖表的文字也能實現tangential,但是無法進行偏移

最終實現效果

本文轉載於:

https://juejin.cn/post/7299346799210397708

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 目錄 Welcome to YARP - 1.認識YARP並搭建反向代理服務 Welcome to YARP - 2.配置功能 2.1 - 配置文件(Configuration Files) 2.2 - 配置提供者(Configuration Providers) 2.3 - 配置過濾器(Confi ...
  • 前言 由於業務需要,需要多台雲伺服器,但是公有雲的帶寬價格不菲,所以不可能給所有的雲伺服器都配上公網IP,一方面是成本的問題,另一方面也是公網安全的問題。 所以通過其它的方式使用無公網的雲伺服器來來實現對外資源的訪問。 一、操作步驟 至少需要有一臺具有公網IP的雲伺服器! 1、開啟ECS的路由轉發功 ...
  • 近幾年IT界軟硬體“國產化”搞得很密集,給很多公司帶來了商機。但是有些公司拿國外的代碼改改換個皮膚,就是“自主知識產權”的國產軟體,光明正大賣錢,這個有點...,還經常有醜聞露出,譬如某星瀏覽器、C某-IDE... 話不多說,最近有個項目需要國產化改造,業主方推薦了國產資料庫 瀚高資料庫,我們原來用 ...
  • 本文分享自華為雲社區《淺析KV存儲之長尾時延問題,華為雲 GeminiDB Redis 探尋行業更優解決方案!》,作者:華為雲資料庫GaussDB NoSQL團隊。 目前,KV存儲的廣泛使用極大程度上源於快速訪問的業務需求,而這種業務通常對時延敏感度高,在較好的平均性能下,還需要解決特定場景下的性能 ...
  • 在之前的實時湖倉系列文章中,我們已經介紹了實時湖倉對於當前企業數字化轉型的重要性,實時湖倉的功能架構設計,以及實時計算和數據湖結合的應用場景。 在本篇文章中,將介紹袋鼠雲數棧在構建實時湖倉系統上的探索與落地實踐,及未來規劃。 數棧為什麼選擇實時湖倉 數棧作為一個數據開發平臺,在未引入實時湖倉之前提供 ...
  • 資料庫底層實現博大精深,本文所述,根據線上場景進行了一些研究和探討,希望能為相關場景提供一些啟示。文章中難免會有不足之處,希望讀者能給予寶貴的意見和建議 ...
  • 前言 近期接到一個關於谷歌EDLA認證的需求,我負責的是谷歌原生桌面佈局的修改,通過研究源碼,將涉及到了一些修改思路發出來,大家可以參考一下有沒有對你有用的信息。主要修改內容有: 1、搜索欄、底部導航欄未居中 2、中部應用未按要求排布,詳情請參考摹客 3、在原生Google桌面未添加中性S-writ ...
  • 使用不可信的數據,通過調用不安全的遞歸函數來暴露預設原型 原型污染:基礎 什麼是原型污染? 原型污染是一種針對JavaScript運行時的註入攻擊。通過原型污染,攻擊者可以控制對象屬性的預設值,從而篡改應用程式的邏輯並可能導致服務被拒絕,甚至在某些極端情況下遠程執行代碼。 現在,你是不是滿腦子充滿了 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...