<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>gaugece測試</title>
<style>
.main {
width: 500px;
height: 500px;
margin: 20px auto;
}
</style>
<script src="../js/jquery.js"></script>
<script src="../js/echarts.min.js"></script>
<script>
$(function(){
let chart = echarts.init($(".main")[0]);
let option = {
series : [
{
name: "wem完成率",
type: "gauge",
min: 50,
max: 100,
splitNumber: 10,
axisLine:{
lineStyle: {
color:[[0.6, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
}
},
data: [{value: 99.17,name:"wem完成率"}]
}
]
};
chart.setOption(option);
});
</script>
</head>
<body>
<div class="main"></div>
</body>
</html>
注意，lineStyle的color區間需要根據min與max進行換算。
比如，min=50,max=100，0.8的位置則表示 50 + 0.8 * ( 100-50) = 90。