Echarts水球图(Liquid Fill Chart)

水球图(Liquid Fill Chart)是Echarts的一个插件(在官方文档中没有)，可以用来优雅的展示百分比数据。

HTML中引入水球图:

其中这两个文件都可以在官方github项目中dist目录下获取到， echarts 、 echarts-liquidfill 。
通过npm引入:

注意: echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本

像其他echarts图配置一样，都需要配置type属性

通过传入多个数据值来展示多个数值或制造多个波浪的效果

通过设置 waveAnimation 属性为 false，可以实现静止的波浪效果，另外，通过设置 animationDuration 和 animationDurationUpdate 属性的值，可以调整波浪的动画，同样可以实现静止的效果。

通过设置 amplitude(振幅) 属性可以实现水面的效果

水球图不仅能被设定为圆形，也可以被设置为其他形状，如矩形、钻石菱形、箭头型等，也可以设置为包含其容器的形状，甚至可以通过SVG来设定

默认水球图的配置

部分属性：

方法/步骤
标准柱状图，标注、标线，代码如下：
option = {
title : {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[20, 49, 70, 232, 256, 767, 1356, 1622, 326, 200, 64, 33],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[26, 59, 90, 264, 287, 707, 1756, 1822, 487, 188, 60, 23],
markPoint : {
data : [
{name : '年最高', value : 1822, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 23, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
堆积柱状图，标线、任意系统多维度堆积，代码如下：
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
},
toolbox: {
show : true,
orient: 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'邮件营销',
type:'bar',
stack: '广告',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'bar',
stack: '广告',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'bar',
stack: '广告',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'搜索引擎',
type:'bar',
data:[862, 1018, 964, 1026, 1679, 1600, 1570],
markLine : {
itemStyle:{
normal:{
lineStyle:{
type: 'dashed'
}
}
},
data : [
[{type : 'min'}, {type : 'max'}]
]
}
},
{
name:'百度',
type:'bar',
barWidth : 5,
stack: '搜索引擎',
data:[620, 732, 701, 734, 1090, 1130, 1120]
},
{
name:'谷歌',
type:'bar',
stack: '搜索引擎',
data:[120, 132, 101, 134, 290, 230, 220]
},
{
name:'必应',
type:'bar',
stack: '搜索引擎',
data:[60, 72, 71, 74, 190, 130, 110]
},
{
name:'其他',
type:'bar',
stack: '搜索引擎',
data:[62, 82, 91, 84, 109, 110, 120]
}
]
};
温度计式图表，个性化样式、文本标签显示，代码如下：
option = {
title : {
text: '温度计式图表',
subtext: 'From ExcelHome',
sublink: '>无意中从今日头条中看到的一篇文章，可以生成简单的图表。据说一些大数据开发们也是经常用类似的图表库，毕竟有现成的，改造下就行，谁会去自己造轮子呢。
pyecharts是什么？

pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。用 Echarts 生成的图可视化效果非常棒， pyecharts 是为了与 Python 进行对接，方便在 Python 中直接使用数据生成图 。使用pyecharts可以生成独立的网页，也可以在flask、django中集成使用。

安装很简单：pip install pyecharts

如需使用 Jupyter Notebook 来展示图表，只需要调用自身实例即可，同时兼容 Python2 和 Python3 的 Jupyter Notebook 环境。所有图表均可正常显示，与浏览器一致的交互体验，简直不要太强大。

参考自pyecharts官方文档: >词云图由词汇组成类似云的彩色图形，用于展示大量文本数据。例如，制作用户画像，对用户进行聚类，实现精细化营销。多用于描述网站上的关键字（即标签），或可视化自由格式文本，可以对比文字的重要程度。
词云是基于echarts的扩展，需要另外引入扩展插件:npm i echarts-wordcloud
>创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达
图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交
互组件，支持多图表、组件的联动和混搭展现。
chart是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等
axis直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型
xAxis直角坐标系中的横轴，通常并默认为类目型
yAxis直角坐标系中的纵轴，通常并默认为数值型
grid直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局
legend图例，表述数据和图形的关联
dataRange值域选择，常用于展现地域数据时选择值域范围
dataZoom数据区域缩放，常用于展现大量数据时选择可视范围
roamController缩放漫游组件，搭配地图使用
toolbox辅助工具箱，辅助功能，如添加标线，框选缩放等
tooltip气泡提示框，常用于展现更详细的数据
timeline时间轴，常用于展现同一系列数据在时间维度上的多份数据
series数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
图表名词
名词
描述
line折线图，堆积折线图，区域图，堆积区域图。
bar柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
scatter散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图
kK线图，蜡烛图。常用于展现股票交易数据。
pie饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。
radar雷达图，填充雷达图。高维度数据展现的常用图表。
chord和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据
force力导布局图。常用于展现复杂关系网络聚类布局。
map地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。
heatmap热力图。用于展现密度分布信息，支持与地图、百度地图插件联合使用。
gauge仪表盘。用于展现关键指标数据，常见于BI类系统。
funnel漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化，常见于BI类系统。
evnetRiver事件河流图。常用于展示具有时间属性的多个事件，以及事件随时间的演化。
treemap矩形式树状结构图，简称：矩形树图。用于展示树形数据结构，优势是能最大限度展示节点的尺寸特征。
venn韦恩图。用于展示集合以及它们的交集。
tree树图。用于展示树形数据结构各节点的层级关系
wordCloud词云。词云是关键词的视觉化描述，用于汇总用户生成的标签或一个网站的文字内容
图表类型
图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表：
单图表类型：line
折线图
堆积折线图
区域图
堆积区域图
单图表类型：bar
柱形图
堆积柱形图
条形图
堆积条形图
单图表类型：scatter
散点图
气泡图
单图表类型：k
K线图
单图表类型：pie
饼图
圆环图
南丁格尔玫瑰图
单图表类型：radar
雷达图
填充雷达图
单图表类型：chord
和弦图
单图表类型：force
力导向布局图。
单图表类型：map
中国地图
全国34个省市自治区
世界地图
子区域模式
标准GeoJson扩展
SVG扩展
单图表类型：heatmap

---