本例項是關於百度地圖外掛展示統計資料的，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>

• 客戶端瀏覽

例項