js echarts 水球图
效果图:
1、导入js文件
echarts.js
echarts-liquidfill.js
2、引入js文件到html
<script type="text/javascript" src="../js/echarts.min.js"></script>
<script type="text/javascript" src="../js/echarts-liquidfill.js"></script>
3、新建样式
<style type="text/css">
.app_si_c div{ width:33.3%; height:100%; float:left; margin:0; padding:0;}
</style>
4、创建div容器
<div class="app_si_c">
<label> </label>
<div id="container"></div>
<label>
<p>电流:54.30A</p>
<p>电压:337.90V</p>
</label>
</div>
5、初始化echarts
//初始化图表
function initChart(){
chart = echarts.init(document.getElementById('container'));
var options = {
series: [{
type: 'liquidFill',
radius: '90%',
itemStyle: {
normal: {
color: '#43b3ef',
opacity: 0.8,
shadowColor: '#43b3ef',
shadowBlur: 20
}
},
backgroundStyle: {
shadowColor: 'rgba(255, 255, 255, 0.5)',
shadowBlur: 20
},
data: [{
value: 0.3,
waveLength: 180
}],
label: {
fontSize: 18,
color: '#43b3ef',
insideColor: '#ffffff'
},
outline: {
show: false
}
}]
};
chart.setOption(options);
}
//页面加载完执行
$(function(){
//初始化图表
initChart();
});
完!!!