echarts 实现水泼纹增长~水球图教程
创建html,引入引入 JavaScript 文件(echarts.js, echarts-liquidfill.js)
ECharts 的水球图是一个插件类型的图表。再官网上找不到水球图的示例；水球图对应的 echarts-liquidfill.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<script src="./echarts.js"></script>
<script src="./echarts-liquidfill.js"></script>
<style>
#liquidfill-chart {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="liquidfill-chart" ></div>
<script>
// 使用水球图的代码
setInterval("myInterval()",1000);//1000为1秒钟
var chart = echarts.init(document.getElementById('liquidfill-chart'));
var values = 0.0;
function myInterval(){
var option = {
series: [{
type: 'liquidFill',
data: [values]
}]
};
chart.setOption(option);
values = values + 0.001;
console.log(values)
}
</script>
<script>
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤你有梦想吗？❤","❤有还努力去实现！❤","❤你有女朋友吗？❤","❤你没有!❤","❤你有车吗?❤","❤你没有!❤","❤你有房吗?❤","❤你是不是觉得自己能力有限?❤","❤是还不滚去学习!❤","❤你有钱吗?❤","❤你没有!❤","❤你钱赞够了吗?❤","❤你没有!❤","❤你关注我了吗？❤","❤你没有!❤","❤关注成功了吗?❤","❤你没有!❤","❤你是大佬吗?❤","❤你不是!❤","❤你是来学习的吗?❤","❤你不是!❤","❤你看了我几篇博客？❤","❤不知道?❤","❤你想过改变吗?❤","❤不知道?❤","❤你想过未来要做什么吗?❤","❤不知道?❤","❤灵魂三连问你有在思考吗?❤","❤你没有!❤","❤你是条咸鱼吗❤","❤你是!❤","❤你知道什么最难吗?❤","❤你不知道!❤","❤垃圾分类你知道吗?❤","❤老阿姨:你是什么垃圾?❤","❤你还在点吗？❤","❤我猜是!❤","❤你是有多无聊❤","❤别点了还是滚去学习吧!❤","❤点个关注再走关二爷!❤");
var $i = $("").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
</body>
</html>
定制化水球图 可参考API
var option = {
series: [{
type: 'liquidFill',
shape: 'diamond', # 设置水球的形状
data: [values]
}]
};
shape: “diamond”
shape: “rect”
shape: “roundRect”
shape: “pin”
shape: “path://…” 指定一个 SVG 路径，得到非常酷炫的效果 示例
