一、Echarts特性介绍

        Echarts是一个纯JavaScript图标库，可以流畅的运行在PC和移动设备上，兼容大部分浏览器（IE/8/9/10/11、Firefox、Chrome等），底层依赖轻量级的Canvas类库ZRender ，提供直观、生动、可高度个性化定制的数据可视化图表。

二、Echarts轻松上手

1、Echarts只需像普通的JavaScript库一样用script引入

        <script src=”${pageContext.request.contextPath }/js/echarts.js”></script>

2 、在绘图前需要为Echarts准备一个具备高宽的DOM容器

       <div id=”main” style=”min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto”></div>

3、再则通过echarts.init方法初始化一个echarts实例并通过setOption方法生成一个简单的柱状图。

完整代码如下：

<div id="main" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
        
         <script type="text/javascript">
         function year(){
         	var ctx = "${pageContext.request.contextPath}";
         	var da = [];
         	var nums = [];
                //这里是根据下拉框的内容进行柱形数据转化的
         	var date = document.getElementById("date").value;
	         $.ajax({
	             url:ctx + '/sy/tableAction_custAndOrder.action?date='+date,//要请求的服务器url
	             async:true,   //是否为异步请求
	             cache:false,  //是否缓存结果
	             type:"POST", //请求方式为POST
	             dataType:"json",   //服务器返回的数据是什么类型
	             success:function(result){  //这个方法会在服务器执行成功是被调用 ，参数result就是服务器返回的值(现在是json类型)
	            	 var rows = result;
	             	 //console.log(result)
                         //遍历循环从后台传过来的数据，将要用的数据放到定义好的数组中,不然获取不到值
	             	for(var i = rows.length-1;i>=0;i--){
	             		 da.push(rows[i].odr_customer);
	             	 }
	             	for(var i = rows.length-1;i>=0;i--){
	             		 nums.push(rows[i].sum);
	             	 } 
	                 if(result){ 
			            myChart.setOption({        //给echarts图标赋值
				            xAxis: {
				               data: da
				            },
				            series: [{
				                 data: nums
				             }]
			           });
	                 }else{
	                     alert("网页错误，请重写刷新网站")
	                 }
	             }
	         })
			 // 基于准备好的dom，初始化echarts实例
			 var myChart = echarts.init(document.getElementById('main'));
			 // 指定图表的配置项和数据
			 var option = {                 
			     title: {
			         text: '客户贡献分析'
			     },
			     tooltip: {},
			     legend: {
			         data:['客户数量']
			     },
			     xAxis: {
			         data: da,
			         axisLabel : {//标签内容太长的解决方案  坐标轴刻度标签的相关设置。
			                interval:0,
			                rotate:"45"
			            }
			     },
			     yAxis: {},
			     series: [{
			         name: '客户数量',
			         type: 'bar',//折线line 柱形bar			         data: nums,
			         itemStyle : {//设置折线的颜色，点的颜色
                                     normal : {
                                     color:'#1A94E6'
                                 },
                                 lineStyle:{
    	                             color:'#1A94E6'
    	                         }
                                }
			         
			     }]
			 };
			
			 // 使用刚指定的配置项和数据显示图表。
			 myChart.setOption(option);
         }
        </script>

效果图：

注意echarts的格式与转换json的格式，格式不对可以将数据获取到后将数据拿出来放到需要的格式中