Echars之条形、折线、扇形统计图实例

Echars官网地址：https://echarts.baidu.com/
Java后台返回json格式的数据方便作为图表的参数以进行交互
纯前端demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Echars</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div align="center">
<!-- 设置图表内容 -->
<form>
品名：<input type="text" maxlength="64"  name="product" id="product"  style="width: 400px;"><br>
数值：<input type="text" maxlength="128" name="number" id="number"  style="width: 400px;"><br>
标题：<input type="text" maxlength="32"  name="title" id="title"  style="width: 400px;"><br>
说明：<input type="text" maxlength="32"  name="serier" id="serier"  style="width: 400px;"><br>
<input type="radio" name="type" value="0" checked="checked">条形统计图
<input type="radio" name="type" value="1">扇形统计图
<input type="radio" name="type" value="2">折现统计图
<input type="button" value="生成统计图" οnclick="create();"><br>
</form>
<!-- 图表的容器 -->
<div id="main" style="width: 500px;height: 360px;"></div>
</div>

<script type="text/javascript">
function create(){
	var type_=$("input[name='type']:checked").val();
	var products = new Array(); //定义数组 
	products = ($("#product").val()).split(","); //字符分割为数组
	var numbers=new Array();
	numbers=($("#number").val()).split(",");
	var title_=$("#title").val();
	var serier=$("#serier").val();
	var myChart=echarts.init(document.getElementById('main'));//初始化
	if(type_==0){//条形统计图			
        //指定图表的配置项和数据
        var option = {
            title:{
                text:title_
            },
            //提示框组件
            tooltip:{
                //坐标轴触发，主要用于柱状图，折线图等
                trigger:'axis'
            },
            //图例
            legend:{
                data:['单位']
            },
            //横轴
            xAxis:{
                data:products
            },
            //纵轴
            yAxis:{},
            //系列列表。每个系列通过type决定自己的图表类型
            series:[{
                name:serier,
                //条形统计图
                type:'bar',
                data:numbers
            }]
        };   
	}else if(type_==1){//扇形统计图
		 var json=new Array();
    	 for(var i=0;i<products.length;i++){
    		 var _value=numbers[i];
    		 var _name=products[i];
    		 var oneJson={
    				 value:_value,
    				 name:_name
    		 }
    		 json.push(oneJson); 
    	 }
		//设置图表信息
		var option = {
		        backgroundColor: 'white',
		        title: {
		             text: title_
		         },
		         tooltip : {
		             trigger: 'item',
		             formatter: "{a} : {b} : {d}%"//d即为计算后的百分数
		         },
		         visualMap: {
		             show: false,
		             min: 500,
		             max: 600,
		             inRange: {
		                 colorLightness: [0, 1]
		             }
		         },
		         series : [
		             {
		                name:serier,
		                type:'pie',
		                clockwise:'true',
		                startAngle:'0',
		                radius : '60%',
		                center: ['50%', '50%'],  
		                data:json
		                
		           }
		         ]
		     };
	}else{//折线统计图
		 //指定图表的配置项和数据
        var option = {
            title:{
                text:title_
            },
            //提示框组件
            tooltip:{
                //坐标轴触发，主要用于柱状图，折线图等
                trigger:'axis'
            },
            //图例
            legend:{
                data:['单位']
            },
            //横轴
            xAxis:{
                data:products
            },
            //纵轴
            yAxis:{},
            //系列列表。每个系列通过type决定自己的图表类型
            series:[{
                name:serier,
                //折线统计图
                type:'line',
                data:numbers
            }]
        };
	}
	myChart.clear();//清除画布，防止在扇形时仍然出现坐标轴的问题
    //使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
}
</script>
</body>
</html>
显示：
Echars之条形、折线、扇形统计图实例

猜你喜欢
