关于Echarts三种方式显示

先上效果图吧

1. 通过页面直接写数据

2.通过json文件获取数据

3.通过Ajax动态获取数据

第一步：引入JS文件

   <script src="resources/js/jquery.min.js"></script>

   <script type="text/javascript" src="resources/Echarts/echarts.common.min.js"></script>

第二步：

     <h2>Echarts 异步调用实例</h2>
    
    <!-- 注意，一定要设置宽，高，不然显示不出来！！ -->
    <div id="echartsJs" style="height:500px;width:600px;"> </div>
    <div id="echartsJson" style="height:500px;width:600px;"> </div>

    <div id="echartsAjax" style="height:500px;width:600px;"> </div>

第三步：JS代码

 <script>

   

    // 方式一：

        var myChart = echarts.init(document.getElementById('echartsJs'));
      
      // 指定图表的配置项和数据
      var option = {
      title : {text : 'Echarts 入门实例'},
      tooltip:{},
      legend:{data:['销量']},
      xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},
      yAxis:{},
      series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]
     
      };
  
      myChart.setOption(option); 
       
      
      
      
      
      
     // 第二种，json数据
      var myChart2 = echarts.init(document.getElementById('echartsJson'));
      
      
      
      // 指定图表的配置项和数据
      myChart2.setOption({
      title : {text : 'Echarts 入门实例'},
      tooltip:{},
      legend:{data:['销量']},
      xAxis:{data:[]},
      yAxis:{},
      series:[{name:'销量',type:'bar',data:[]}]
     
      });
      
      
      $.get('PublicServlet?resource=statistics/Echarts.json').done(function (data){
     
      
      //var obj = JSON.stringify(data);       // 这句话是把转换成String字符串，但是我发现转换后不能使用
    /*  console.dir("data:" + data);          //  可以在控制台输出，便于调试
      console.dir("data.categories:" + data.categories);
      console.dir("data.data:" + data.data); */
      
      myChart2.setOption({
        xAxis:{data:data.categories},
    series:[{name:'销量',data:data.data}]
      });
      });
   
      
      // 第三种：Ajax方式获取，此处我是从Servlet获取的
      var myChart3 = echarts.init(document.getElementById('echartsAjax'));
      
      // 指定图表的配置项和数据
      myChart3.setOption({
      title : {text : 'Echarts 入门实例'},
      tooltip:{},
      legend:{data:['销量']},
      xAxis:{data:[]},
      yAxis:{},
      series:[{name:'销量',type:'bar',data:[]}]
     
      });
      
      $.ajax({
      url:"SchoolServlet?method=selfCount",                // Servlet见后面
      async:false,
      cache:false,
      
      success:function(data){
      
      // 转换成json对象，然后使用其属性，否则会提示  undefined
          data = eval('('+data+')'); 
      console.dir("data:" + data);
          console.dir("data.categories:" + data.categories);
          console.dir("data.data:" + data.data); 
      myChart3.setOption({
      xAxis:{data:data.categories},
      series:[{name:'销量',data:data.data}]
      });
      }
        
      }); 
   
     
     

    </script>

Servlet代码：

private void selfCount(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException{
        String categories[] = {"太原理工大学","中北大学","太原工业学院","太原科技大学","山西大学"};
        int[] data = {5,10,25,8,11};
        Map<String,Object> map = new HashMap<>();
        map.put("data", data);
        map.put("categories", categories);

        

        // 将Map转换成json字符串

        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(map);
        
        logger.debug("json = " + json);
        response.getWriter().print(json);
    }