1.?需求描述

前提：該水球效果實現是基于 echartGL ,所以需要引用echart腳本庫，echartsGl庫，和水球定義的腳本文件

效果圖：

2.?實現步驟

步驟一：將需要使用到的腳本文件上傳到資源管理器中

步驟二：在客戶端?腳本中使用如下語法，引用資源管理器中的腳本

include("vfs/root/js/circle/echarts.min.js");

include("vfs/root/js/circle/echarts-gl.min.js");

include("vfs/root/js/circle/echarts-liquidfill.min.js")

*include是用來引用js后綴的腳本庫的，1、引用資源管理器中上傳腳本2、引用系統自帶echarts2版本腳本3、引用網頁腳本資源(例如谷歌gis地圖)

步驟三：水球內容實現

在界面拖入一個容器，例如容器HHH2，然后通過在客戶端腳本中通過一句話，可以實現最后水球 在界面上初始化的位置

var myChart = echarts.init(document.getElementById("HHH2"));

設置水球option數據樣式等信息

var option = {

series: [{

type: "liquidFill",

radius: "80%",

//shape: "roundRect",

color:"yellow",? --波浪顏色

data: [0.5, 0.5,0.4,0.3,0.2],?– 數據第一個數值為顯示數值，每個元素分別代表一個波浪的百分比高度(該內容模塊 可以通過在BI表格中獲取? 例如? var? aa = ,然后將aa傳到此處)

backgroundStyle: {

color:"white",? --水球波浪上部顏色

borderColor: "white",? --邊框顏色

borderWidth: 1,? --邊框寬度

shadowColor: "rgba(110, 110, 0, 1)",? --陰影顏色

shadowBlur: 20

},

label: {

normal: {

textStyle: {

color: "yellow",

insideColor: "yellow",

fontSize: 20

}

}

},

outline: {

show: true,

borderDistance: 10,

itemStyle: {

color: "none",

borderColor: "yellow",

borderWidth: 10,

shadowBlur: 20,

shadowColor: "rgba(0, 0, 0, 0.25)"

}

}

}]

};

上面代碼中的shape代表了水球的形狀，除了默認的圓形("circle")水球圖，還可以將?shape?設置為 ECharts?Symbol?的其他類型："rect"、"roundRect"、"triangle"、"diamond"、"pin"、"arrow"。甚至，使用?"path://..."?的形式，為其指定一個 SVG 路徑，得到非常酷炫的效果)

outline代表了外部邊框的樣式

上面代碼段中的顏色和 border等均可以設置

最后為水球圖設置option：

myChart.setOption(option);

總結

以上是生活随笔為你收集整理的echart自定义动画_echartGL动态水球效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。