Echart获取后台数据渲染到map，bar

来源：互联网发布：windows http代理软件编辑：程序博客网时间：2024/06/06 06:58

1一些小感受

这几天一直在学习数据处理的方法，之前小老大用到的数据处理框架是使用highchart图表库，所以本来想使用highchart渲染生成中国地图，上网找了一些资料，highchart的中国实现了，只是需要用到的highmaps.js与之前使用的highcharts.js相冲突，不能够同时使用，

2.highchart异步加载数据显示在map

a静态数据

<script type="text/javascript">        $(document).ready(function () {            var options = {                chart: {                },                mapNavigation: {                    enabled: true                },                title: {                    text: '地图'                },                subtitle: {                    text: '临时数据'                },                series: [{                    name:'省份',                    mapData: Highcharts.maps['countries/cn/custom/cn-all-sar-taiwan'],                    joinBy:'hc-key',                    data: [{                        'hc-key': 'cn-zj',                        value:22                    }, {                        'hc-key': 'cn-sx',                        value:50                    }],                    dataLabels: {                        enabled: true,                        crop: false,                        overflow: 'none',                                          }                }],                credits: {                    text: '大学霸',                    href: 'http://daxueba.net'                }            };            $('#container').highcharts('Map',options);        });    </script>

b.异步数据（后台提交到前台的数据要按照map里面的数据显示

data: [{                        'hc-key': 'cn-zj',                        value:22                    }, {                        'hc-key': 'cn-sx',                        value:50                    }],

）这样的格式

<style type="text/css">#container {width: 500px;height: 500px;/* border: 1px solid #000; */padding: 0px;margin: 10px;}</style><script type="text/javascript" src="js/jquery-1.9.1.js"></script><script type="text/javascript" src="js/highmaps.js"></script><script type="text/javascript" src="js/cn-all-sar-taiwan.js"></script><script type="text/javascript"src="js/Highcharts-4.0.1/js/modules/exporting.js"></script><script type="text/javascript">var chart;varbar;var options = {chart : {type: 'map',         renderTo : 'container',},mapNavigation : {enabled : true},title : {text : '地图'},subtitle : {text : '测试数据'},    credits: {      text: 'huihui',      href: 'http://baidu.com'    }};$(document).ready(function() {var addTime="2015-10-13"; var p = {'addTime':addTime};$.ajax({type: "post",url: "<%=request.getContextPath()%>/quryeMap.action",data : p,dataType : "json",success : function(data) {var series = {name : '省份',mapData : Highcharts.maps['countries/cn/custom/cn-all-sar-taiwan'],joinBy : 'hc-key',data : data};chart = new Highcharts.Chart(options);chart.addSeries(series);}});});</script></head><body><div id="container"></div></body>

3.Echart

前端

<script type="text/javascript" src="js/asset/js/jquery.min.js"></script><script type="text/javascript" src="js/echarts/chart/esl/esl.js"></script><script type="text/javascript" src="js/echarts/echarts.js"></script> <script src="js/asset/js/codemirror.js"></script> <link href="js/asset/css/codemirror.css" rel="stylesheet">    <link href="js/asset/css/monokai.css" rel="stylesheet">  </head>  <script type="text/javascript">  var num=[];var value=[]; var myChart,option; var option2,myChart2;  require.config({        paths:{            echarts:'./js/echarts'        }    }); require(        [            'echarts',            'echarts/chart/bar',            'echarts/chart/map'        ],        function(ec) {             myChart2 = ec.init(document.getElementById('main'));             myChart = ec.init(document.getElementById('main2'));             option = {                tooltip : {                    trigger: 'axis'                },                legend: {                    data:[]                },                toolbox: {                    show : true,                    feature : {                        mark : true,                        dataView : {readOnly: false},                        magicType:['line', 'bar'],                        restore : true,                        saveAsImage : true                    }                },                calculable : true,                xAxis : [{                    type : 'value',                        splitArea : {show : true}                    }],                yAxis : [],                series : [ ]            };          option2 = { toolbox: {                    show : false,                    feature : {                        mark : true,                        dataView : {readOnly: false},                        magicType:['line', 'bar'],                        restore : true,                        saveAsImage : true                    }                },            tooltip : {        trigger: 'item'    },series : []};                                              myChart.setOption(option);            myChart2.setOption(option2);            getChartData();            getChartData2();         }    );          function   getChartData(){      //获得图表的options对象     var options = myChart.getOption(); var addTime="2015-10-13";     var p = {'addTime':addTime};     $.ajax({type: "post",url: "<%=request.getContextPath()%>/queyeMapBar.action",data:p, dataType: "json",success : function(data){var num=[];var value=[];for(var i=0;i<data.Total;i++){num.push(data.Rows[i].areaName);value.push(data.Rows[i].value);}   options.legend.data.push('省份');  //legend赋值数据   options.yAxis.push({    type : 'category',                          data:num   });                     options.series.push({        name: '省份',                            // 系列名称        type: 'bar',                           // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar        data: value,       itemStyle:{                normal:{label:{show:true}},                emphasis:{label:{show:true}}            }});                   myChart.setOption(options);}});    }    function   getChartData2(){      //获得图表的options对象     var options = myChart2.getOption(); var addTime="2015-10-13";     var p = {'addTime':addTime};     $.ajax({type: "post",url: "<%=request.getContextPath()%>/quryeMap.action",data:p, dataType: "json",success : function(data){                   options.series.push({        name: '省份',                            // 系列名称        type: 'map',                           // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radarselectedMode : 'multiple',        data: data});options.dataRange = {min: 0,max: 1000,color: ['yellow', 'orange']};                   myChart2.setOption(options);}});    }  </script>  <body>  <center>    <div id="graphic" class="col-md-8">                <div id="main" class="main" style='height:500px;width:40%;float:left;margin-right:0;padding-right:0;border-right-width:0'></div>                <div id="main2" class="main" style='height:500px;width:60%;margin-left:0;padding-left:0;border-left-width:0'></div>  </div>  </center>  </body>

后台：

public void quryeMap() {if (addTime == null) {addTime = new Date();}List<T_Map> mapList = null;try {mapList = testService.quryeMap(addTime);JSONArray jsonMap = new JSONArray();for (int i = 0; i < mapList.size(); i++) {JSONObject dataObject=new JSONObject();dataObject.put("name", mapList.get(i).getAreaName());dataObject.put("value",mapList.get(i).getValue());//dataObject.put("itemStyle","{normal : {color : 'orange',label : {show : false,}}}");jsonMap.put(dataObject);}String result=jsonMap.toString();System.out.println("result: " + result);this.writer(result);logger.info("查询T_Map成功------->quryeMap");} catch (Exception e) {logger.error("查询T_Map失败------->quryeMap", e);e.printStackTrace();}}

<pre name="code" class="java">/** * 将数据写出客户端 *  * @param data */public void writer(String data) {try {HttpServletResponse response = ServletActionContext.getResponse();response.setCharacterEncoding("utf-8");response.setContentType("text/plain; charset=utf-8");response.getWriter().write(data);response.getWriter().flush();} catch (Exception e) {logger.error("写出数据到客户端异常-->" + e.getMessage(), e);logger.error("数据-->" + data);}}/** * 将数据写出到LigerUI的Grid中 *  * @param data */public void writerToGrid(Collection<?> data) {Gson gson = new Gson();String json = gson.toJson(data);StringBuilder sb = new StringBuilder("{");sb.append("\"Rows\":");sb.append(json);sb.append(", \"Total\": ");sb.append(data.size());sb.append("}");this.writer(sb.toString());}

0 0