WELCOME TO BIG DATA VISUALIZATION

新聞中心 

最新的一體化系統新聞資訊 時刻在線 持續服務
CRAFTSMANSHIP TO
CREATE A “SAID” WORKS

echarts水滴圖在純HTML開發中的基本用法

發布于 2022年09月03日

隨著互聯網的不斷發展與更新,當表格數據基本滿足客戶的數據需求以后,客戶就會開始追求感官上的需求,比如,將這些表格用更炫酷或更高級的方式來展示數據。

 

同一種數據,往往有多種可視化呈現的方式。然而,在我們將數據可視化的過程中,卻經常會被“慣性思維”所束縛,覺得顯示占比就要采用餅圖,展示數據變化趨勢只用折線圖,除了餅圖還可以有哪些圖形可以展示占比?除了折線圖,展示數據趨勢還能用什么圖形?在echarts3.0版本以后推出了一個新的數據變化趨勢展示圖”水滴圖”。這里我們介紹的是水滴圖在純HTML開發中的用法。

 

 

步驟一:

 

使用地址引入

 

    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>

 

或者下載所需js然后再引入

 

    <script src="./js/echart/echarts.js"></script>

 

echarts.min.js的下載需要到echart官網--->下載---->在線定制--->選擇需要的圖表和組件等進行下載

 

水滴圖的js 需要到github上面去下載

 

    <script src="./js/echart/echarts-liquidfill.min.js"></script>

 

https://github.com/ecomfe/echarts-liquidfill/tree/master/dist

 

1

 

在head引入

 

<script src="./js/echart/echarts.js"></script>

 

<script src="./js/echart/echarts-liquidfill.min.js"></script>

 

 

步驟二:

 

創建一個裝載echarts寬高的div盒子 

 

2

 

 

步驟三 :

 

用創建的dom容器,利用echarts提供的init方法構建一個echarts的初始化對象。

 

 

步驟四:

 

配置項,通過echarts的配置屬性項setOptions方法為echarts設置展示樣式和數據。

 

1. backgroundColor:用于設置整體echarts圖的背景顏色

 

2. grid:用于設置echarts圖表在容器中的位置,類似于css央視中的padding效果,控制圖表內邊距的效果

 

3. xAxis、yAxis作用參考柱狀圖效果

 

4. series:用于設置圖表數據和顯示樣式,主要介紹水滴圖的配置

 

{

 

                    type: 'liquidFill',//設定圖表類型為水滴圖

 

                    radius: '25%',//用于設定水滴圖的大小,一般為圓形

 

                    center: ['10%', '55%'],//設置相對頁面的x,y位置

 

                    data: [0.4], // data個數代表波浪數

 

                    color: ['#5470c6'],//控制水的顏色

 

                    outline: { // 輪廓設置

 

                        show: true,//控制是否顯示輪廓

 

                        borderDistance: 8, // 邊框與球中間間距

 

                        itemStyle: {

 

                            borderWidth: 5,

 

                            borderColor: '#5470c6',

 

                            shadowBlur: 10,

 

                            shadowColor: '#fff'

 

                        }

 

                    },

 

                    backgroundStyle: {

 

                        shadowColor: 'rgba(0, 0, 0, 0)',

 

                        opacity: 0,

 

                    },

 

 

                    label: {

 

                        textStyle: {

 

                            color: '#fff',

 

                            fontSize: 28

 

                        }

 

                    }

 

                }

 

4

 

5

 

 

步驟五:

 

屬性賦值

 

        echarts.setOption(option);

 

如果沒有效果,可能是以下問題

 

1. echarts的版本問題,不同的echarts版本支持的API不同,可以上官方查看所使用的API哪個版本才支持

 

2. 沒報錯,效果不出來。應該是語法問題,

 

如設置漸變色不起反應,可嘗試以下幾種寫法

 

第一種:

 

 normal: {

 

   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

 

     offset: 0,

 

     color: '#8bd46e'

 

   }, {

 

     offset: 1,

 

     color: '#09bcb7'

 

   }])

 

  }

 

第二種:

 

normal: {

 

  color: function (params) {

 

    return {

 

      colorStops: [{

 

        offset: 0,

 

        color: '#8bd46e'

 

      }, {

 

        offset: 1,

 

        color: '#09bcb7'

 

      }]

 

    }

 

  }

 

 }

 

第三種參考官網對背景顏色的設置

 

normal: {

 

 color: {

 

   type: 'linear',

 

   x: 0,

 

   y: 0,

 

   x2: 0,

 

   y2: 1,

 

   colorStops: [{

 

     offset: 0, color: 'rgba(2,189,255,0.2)' // 0% 處的顏色

 

   }, {

 

     offset: 1, color: 'rgba(159,247,255,0.1)' // 100% 處的顏色

 

   }],

 

   global: false // 缺省為 false

 

 }

 

}

 

数据中心 建模
預約產品DEMO演示
填寫即可獲得免費服務和資料下載/工作人員基于您的需求遠程 演示數字孿生解決方案

姓名



公司名稱



工作郵箱



手機號



所在城市



我想要


 數據中心

 數據可視化大屏

 我搭世界

 成為合作伙伴



其他需求


一级黄色录像影片 - 视频 - 在线观看 - 电影影院 - 品赏网