echarts中将后台的json数据放入data属性

本实例是关于百度地图插件展示统计数据的，echarts中要处理后台传过来的json类型的数据：

• 后台的封装json代码片段

代码块

java代码：

Map<String, Object> map = new HashMap<String, Object>();
        map.put("name","河南");
        map.put("value",2000);
        List list=new ArrayList();
        list.add(map);

        /*map = new HashMap<String, Object>();
        map.put("name","河北");
        map.put("value",2400);
        list.add(map);*/
        request.setAttribute("mapDataJson", JSONArray.fromObject(list));

• jsp端的接收

代码块

jsp代码：

<script type="text/javascript" src='${root}/common/js/echarts.js'></script>


<div id="mainMap" style="height:300px;width:600px;"></div>
<script type="text/javascript">
    var mapDataJson='${mapDataJson}';
    var json=JSON.parse(mapDataJson);

    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    // 使用
    require(
            [
                'echarts',
                'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart_map = ec.init(document.getElementById('mainMap'));

                var itemStyle = {
                    normal:{label:{
                        show:true,
                        formatter:'{b}',
                        textStyle: {fontSize: 10,fontWeight : 'bold'}
                    }},
                    emphasis:{label:{show:true}}
                };

                var option_map = {
                    title : {
                        text: '',
                        subtext: '应用使用次数',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        x:'left',
                        data:['次数']
                    },
                    dataRange: {
                        min: 0,
                        max: 2500,
                        x: 'left',
                        y: 'bottom',
                        text:['高','低'],           // 文本，默认为数值文本
                        calculable : true
                    },

                    series : [
                        {
                            name: '总数',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
//                            itemStyle:{
//                                normal:{label:{show:true}},
//                                emphasis:{label:{show:true}}
//                            },
                            itemStyle: itemStyle,
                            data:getData()
                        }

                    ]
                };

                //option_map.series[0].data=json;  

                // 为echarts对象加载数据
                myChart_map.setOption(option_map);
            }
    );
    function getData(){
        return json;
        }
</script>

• 客户端浏览

实例