<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: 200px;height: 200px;">
</div>
<script>
initChart();
function initChart(){
let myLiuqiud = document.getElementById("main");
var myChart = echarts.init(myLiuqiud);
var value =78;
let option = {
title: {
text: value + "%",
textStyle: {
fontSize: 24,
fontFamily: "Microsoft Yahei",
fontWeight: "600",
color: "#fff",
textShadowColor:'#000',
textShadowBlur: 2,
textShadowOffsetX: 2,
textShadowOffsetY: 2.5,
},
x: "center",
y: "50%",
},
textStyle: {
shadowColor: 'rgba(0, 0, 0, 0)',
},
series: [
{
textStyle: {
textShadowColor:"rgba(183, 63, 63, 1)",
textShadowBlur: 2,
textShadowOffsetX: 2,
textShadowOffsetY: 2.5,
fontSize: 14,
lineHeight:35,
color:"#939393",
},
// 图形样式
itemStyle: {
opacity: 1, // 波浪的透明度
shadowBlur: 0 ,// 波浪的阴影范围 设置为0不会出现底色为灰色的情况
shadowColor: 'rgba(0, 0, 0, 0)',
},
type: "liquidFill", //配置echarts图类型
radius: "60%",
center: ["50%", "50%"],
// shape: 'roundRect',// 设置水球图类型(矩形[rect],菱形[diamond],三角形[triangle],水滴状[pin],箭头[arrow]...) 默认为圆形
data: [0.78], //设置波浪的值
waveAnimation:false, //静止的波浪
backgroundStyle: {
borderWidth: 11,
color: "#f4f4f4",//水球图内部背景色
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth:4,
borderColor: "#f1f1f1",
},
},
// color: [ //波浪颜色
// {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#178bff", //下
// }
// ],
// globalCoord: false,
// },{
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#188bff", //下
// }
// ],
// globalCoord: false,
// }
// ],
color: [ //波浪颜色
{
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 1,
color: "#1188ff", //下
},
{
offset: 0,
color: "#81c1ff",
},
],
globalCoord: false,
},
],
label: {
normal: {
textShadow:' 3px 3px 3px #000',
// insideColor: 'transparent', // 避免文字显示为白色
formatter: '出勤率\n',
textStyle: {
fontSize: 14,
lineHeight:35,
color:"#939393",
}
}
}
},
],
};
option && myChart.setOption(option);
}
</script>
</body>
</html>