<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);
? ? ? ? ? ? ? }
? ? ? ??
? ? ? ? ? ?
? ? ? ? </script>
? ? </body>
</html>