echarts饼图制作

首先准备好一个div用来放echarts图

    <div id="echartsImg">
    </div>

在页面中导入echarts文件

<script th:src=“/water/js/echarts.js" type="text/javascript"></script>

另开一个script标签

<script type="text/javascript">
	var myChart1 = echarts.init(document.getElementById('echartsImg'));
	option1 = {
	        legend: { //这个属性代表饼状图的每个区域的内容
	        	x:40,//x和y指距离div左上角的距离
	        	y: 120,
	            data: ['鱼类','两栖类','爬行类','鸟类'], //这是图形的内容
	            itemWidth:8,   // 设置图例图形的宽
	            itemHeight:8, // 设置图例图形的高
	            textStyle: {//设置图形后面文字的大小和颜色
	            	fontSize : 10,
	            	color :'#5FA0FA'
	              },
	        },	//图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
	        graphic:{ //图形元素这里以文本来显示区域的类型
	            type:'text',
	            left:'center',
	            top:'center',
	            style:{
	                textAlign:'center',
	                font:'italic bolder 16px cursive',
	                fill:'#000',
	                width:30,
	                height:30
	            }
	        },
	        series: [
	            {
	                name:'报警数量',		//tooltip提示框中显示内容
	                type: 'pie',		//图形类型，pie代表饼状图
	                radius: '50%',	//饼图的半径
	                center: ['50%', '45%'], //图形在div中的位置
	                label:{
	                	normal:{
	                	textStyle : {
	                		fontWeight : 'normal',
	                		fontSize : 10
	                		}
	                	}},
	                labelLine:{
	                		normal:{
	                		show:true
	                		}},
	                itemStyle: {
	                    normal:{
	                        label:{
	                            show:true,
	                            textStyle:{color:'#5FA0FA',fontSize:"18"},
	                            formatter:function(val){   //让series 中的文字进行换行
	                                return val.name.split("-").join("\n");}
	                        },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
	                        labelLine:{
	                            show:false,
	                            lineStyle:{color:'#5FA0FA'}
	                        }//线条颜色
	                    }//基本样式

	                },
	                 data:(function(){
	                    var arrNum = [];
	                    arrNum.push({"value":20,"name":"鱼类"});
	                    arrNum.push({"value":20,"name":"两栖类"});
	                     arrNum.push({"value":30,"name":"爬行类"});
	                      arrNum.push({"value":30,"name":"鸟类"});
	                      return arrNum;
	                })(),
	                color: ['#51CEC6','#FFB703','#5FA0FA','#FFCCF6'],//各个区域颜色
	            },
	        ],
	    };
	
	myChart1.setOption(option1);//在div中画出该图

</script>