echartGL动态水球效果

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 = <#=GRID1.B2#> ,然后将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);

水球图的详细教程链接为：http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial.html