关于Echarts三种方式显示

原创 2018年04月16日 15:18:19

先上效果图吧






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);
    }
    


echarts自定义tooltip提示框内容

echarts 是一个非常强大的图形编辑工具,对各种数据统计的图形话处理效果非常nice!由于在工作中经常会用到,在此以作总结,也算一种积累。 本文主要是对echarts的tooltip提示功能的一个...
  • dreamsup
  • dreamsup
  • 2017-02-23 11:15:44
  • 35831

ECharts 自定义动态tooltip

运行:http://echarts.baidu.com/demo.html
  • ruixue0117
  • ruixue0117
  • 2017-01-11 11:54:16
  • 3983

echarts三种引入方式

  • 2017年04月15日 14:16
  • 2.46MB
  • 下载

百度echarts实现地图下钻的三种方式-省市县

  • 2017年12月28日 17:06
  • 2.97MB
  • 下载

echarts tooltip信息添加%

tooltip : { trigger: 'axis', formatter:function(params) { var rel...
  • liuxiao723846
  • liuxiao723846
  • 2015-06-05 19:07:02
  • 4888

echarts之tooltip

tooltip:提示框,鼠标悬浮交互时的信息提示。 以下是官方给出的表格1 名称 默认值 描述 {boolean} show true 显示策略,可选为:tr...
  • huanbia
  • huanbia
  • 2015-12-09 14:06:42
  • 25640

关于伺服的三种控制方式

  • 2010年08月15日 20:52
  • 24KB
  • 下载

如何在网页中显示数据图表--Echarts入门教程

如何在网页中显示数据图表–Echarts入门教程五分钟上手官网文档链接地址–>戳这里 一、下载所需要的echarts.min.js文件 官网下载链接 csdn下载链接...
  • longgeaisisi
  • longgeaisisi
  • 2017-10-11 13:03:37
  • 511

Echarts扩展之ajax异步加载tooltip数据

最近做大数据可视化视图展现,随着业务的加深,正常的简单的echars里面的实例已经满足不了现有的需求;所以就需要对echarts进行更深一步的了解; 因为接触echars比较早,所以现在使用的是ec...
  • yelin042
  • yelin042
  • 2017-09-12 11:22:22
  • 224
收藏助手
不良信息举报
您举报文章:关于Echarts三种方式显示
举报原因:
原因补充:

(最多只允许输入30个字)