<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts图表</title>
<!-- 引入echarts.min.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var e = 80;
var option = {
color: ['#2E7DFF', '#ccc'],
backgroundColor: 'rgba(1,202,217,.2)',
// 标题
title: {
show: true,
text: e + '%',
x: 'center',
y: 'center',
textStyle: {
fontSize: '15',
color: '#000',
fontWeight: 'normal'
}
},
// 提示框
tooltip: {
trigger: 'item',
formatter: '{e}%',
show: false
},
// 图例不显示
legend: {
orient: 'vertical',
x: 'left',
show: false
},
series: {
naem: '',
// 类型:饼图
type: 'pie',
radius: ['35%', '45%'],
avoidLabelOverLap: true,
hoverAnimation: false,
// 标签不显示
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false
}
},
// 标签线不显示
labelLine: {
normal: {
show: false
}
},
data: [{
value: e,
name: ''
},
{
value: 100 - e,
name: ''
}
]
}
}
myChart.setOption(option);
</script>
</body>
</html>
Echarts图表之圆形进度条(四)
最新推荐文章于 2024-06-27 10:31:04 发布