随着互联网的不断发展和更新，当表格数据基本满足客户的数据需求时，客户就会开始追求感官需求，比如，将数据以更酷或者更高级的方式展现出来。
同样的数据往往以多种视觉方式呈现。但是在数据可视化的过程中，我们往往会被“惯性思维”所束缚，觉得应该用饼状图来表示比例，只能用折线图来表示数据变化的趋势。除了饼状图，还有哪些图形可以显示比例？除了折线图，还有哪些图表可以用来显示数据趋势？在echarts3.0版本之后，引入了新的数据趋势显示图表“水滴图”。这里我们介绍水滴图在纯HTML开发中的用法。
第一步:
使用地址介绍
或者下载需要的js再介绍。
Echarts.min.js下载需要去echart官网->下载->在线定制->选择需要的图表和组件下载。
水滴图的Js需要从github下载。
https://github . com/ECOM Fe/echarts-liquid fill/tree/master/dist
在开头介绍
第二步:
用echarts的宽度和高度创建一个P框。
第三步:
使用创建的dom容器和echarts提供的init方法构建echarts的初始化对象。
第四步:
项，并通过echarts的配置属性项的setOptions方法设置echarts的显示样式和数据。
1.backgroundColor:用于设置整个echarts图表的背景颜色。
2.grid:用于设置echarts图表在容器中的位置，类似于css CCTV中的填充效果，控制图表内边距的效果。
3.Xaxis和yAxis的效果指的是直方图效果。
4.系列:用于设置图表数据和显示样式，主要介绍水滴图的配置。
{
Type: 'liquidFill '，//将图表类型设置为drop chart。
半径:' 25% '，//用来设置水滴贴图的大小，一般是圆形。
Center: ['10% '，' 55%']，//设置相对页面的x，y位置
数据:[0.4]，//数据的个数代表波数
Color: ['#5470c6']，//控制水的颜色
大纲:{//大纲设置
Show: true，//控制是否显示轮廓。
BorderDistance: 8，//边框和球之间的距离
项目样式:{
边框宽度:5，
边框颜色:' #5470c6 '，
暗影模糊:10，
阴影颜色:' #fff '
}
},
backgroundStyle: {
阴影颜色:' rgba '，
不透明度:0，
},
标签:{
textStyle: {
颜色:' #fff '，
字体大小:28
}
}
}
第五步:
属性赋值
echarts.setOption
如果不行，可能是以下问题
1.echarts的版本有问题。不同版本的eCharts支持不同的API。可以查看官方支持哪个版本的API。
2.没有报错，效果也没出来。应该是语法问题，
如果设置渐变不起作用，请尝试以下方法。
第一种类型:
正常:{
颜色:new echarts . graphic . linear gradient
}
第二种类型:
正常:{
颜色:功能{
返回{
色彩停止点:[{
偏移量:0，
颜色:' #8bd46e '
}, {
偏移量:1，
颜色:' #09bcb7 '
}]
}
}
}
第三种是指官网对背景色的设置。
正常:{
颜色:{
类型:“线性”，
x: 0，
y: 0，
x2: 0，
y2: 1，
色彩停止点:[{
偏移量:0，颜色:' rgba '//0%处的颜色
}, {
偏移量:1，颜色:“rgba”//100%时的颜色
}],
Global: false //默认值为false。
}
}
#数据中心#
