echarts之仪表盘盘
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<title>仪表盘</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('main'));
let xData01 = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"];
// 指定图表的配置项和数据
let option = {
title: {
text: '仪表盘'
},
series: [{
type: 'gauge',
data: [
//每一个对象就代表一个指针
{
value: 80,
//指针的样式
itemStyle: {
color: 'black',
}
},
{
value: 85,
//指针的样式
itemStyle: {
color: 'red',
}
},
],
//min,max控制仪表盘数值范围
min: 50,
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
posted on 2022-03-28 15:21 Indian_Mysore 阅读(236) 评论(0) 收藏 举报
浙公网安备 33010602011771号