echarts水球多个波浪

最新推荐文章于 2024-05-30 09:55:08 发布

小小1992

最新推荐文章于 2024-05-30 09:55:08 发布

阅读量992

点赞数 24

文章标签： echarts

本文链接：https://blog.csdn.net/u014645827/article/details/135388496

版权

<html>
<head>
<meta charset="utf-8">
<script src='./js/echarts.min.js'></script>
<script src='./js/echarts-liquidfill.min.js'></script>
</head>
<body>
<style>

</style>
<div id='main' style="width: 160px;height: 160px;">


</div>
<script>
initChart();
function initChart(){
let myLiuqiud = document.getElementById("main");
var myChart = echarts.init(myLiuqiud);
var value =78;
// run at: http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe
var option = {
series: [{
type: 'liquidFill',
data: [0.7, 0.5, 0.4,],
radius: '100%',
// shape: 'roundRect',
center: ['50%', '50%'],
                       color: ['rgba(255,0,0,0.3)','rgba(255,0,0,0.3)','rgba(255,0,0,0.3)',],//水波的颜色对应的是data里面值
                       shape: 'circle',//水填充图的形状 circle默认圆形 rect圆角矩形 triangle三角形 diamond菱形 pin水滴状 arrow箭头状还可以是svg的path
                       // radius: '80%', //图表的大小值是圆的直径可以是百分比也可以是具体值 100%则占满整个盒子默认是40%; 百分比下是根据宽高最小的一个为参照依据
                       // amplitude:3, //振幅是波浪的震荡幅度可以取具体的值也可以是百分比百分比下是按图标的直径来算
                       // waveLength:'50%',//波的长度可以是百分比也可以是具体的像素值百分比下是相对于直径的取得越大波浪的起伏越小
                       // phase:0 ,//波的相位弧度默认情况下是自动

backgroundStyle: {
borderColor: '#aa0000',
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 0
},
outline: {
show: false
},
waveAnimation: false, // 禁止左右波动
}]
};

option && myChart.setOption(option);
}