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>&nbsp;</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();
});

完！！！