`
< html lang= "en" style="width:100%;height:100%" >
< head >

<meta charset="UTF-8">
<title>grid</title>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

< style type= "text/css" >

div{
    
};

< / style >
< / head >
< body style="width:100%;height:100%" >

<!-- DOM -->
<div id="main" style="width:100%;height:100%"></div>
<script>
    //DOMecharts
    var myChart = echarts.init(document.getElementById("main"));
    //
    
    var json=[{
                "code": {
                    "1001": "55",
                    "1002": "49",
                    "1003": "36",
                    "1004": "25",
                    "1005": "55",
                    "1006": "49",
                    "1007": "36",
                    "1008": "25"
                },
                "getTime": "2018-06-12 09:29:35",
                "name": "41w14-",
                "service_id": "41000014"
            }, {
                "code": {
                    "1006": "25",
                    "1004": "46",
                    "1003": "78",
                    "1001": "10"
                },
                "getTime": "2018-06-12 09:29:35",
                "name": "4104-",
                "service_id": "41000004"
            }, {
                "code": {
                    "1001": "55",
                    "1002": "49",
                    "1003": "36",
                    "1004": "25",
                    "1005": "55",
                    "1006": "49",
                    "1007": "36",
                    "1008": "25"
                },
                "getTime": "2018-06-12 09:29:35",
                "name": "4039-",
                "service_id": "40000039"
            }]
    
    var option = {
         color:["-sharp5793f3", "-sharpd14a61", "-sharp675bba","-sharp546570","-sharpd48265","-sharpc4ccd3"],
                    //
        title:[
        {
                text:"",
                left:"48%",
                top:"0%",
                textAlign:"center"
            },
            {
                text:"",
                subtext: "",
                subtextStyle:{
                    align: "left",
                    rich: {
                            a: {
                                //  `align` `align`  right
                            }
                        },
                    verticalAlign: "top",
                },
                left:"18%",
                top:"6%",
                textAlign:"center"
            },
            {
                text:"",
                subtext: "",
                left:"48%",
                top:"6%",
                textAlign:"center"
            },
            {
                text:"",
                subtext: "",
                left:"80%",
                top:"6%",
                textAlign:"center"
            },
            {
                text:"",
                subtext: "",
                left:"18%",
                top:"50%",
                textAlign:"center"
            },
            {
                text:"",
                subtext: "",
                left:"48%",
                top:"50%",
                textAlign:"center"
            },
            {
                text:"",
                subtext: "",
                left:"80%",
                top:"50%",
                textAlign:"center"
            },
            
        ],
        grid:[
            {x:"7%",y:"12%",width:"23%",height:"35%"},
            {x:"37%",y:"12%",width:"23%",height:"35%"},
            {x2:"7%",y:"12%",width:"23%",height:"35%"},
            {x:"7%",y2:"7%",width:"23%",height:"35%"},
            {x2:"40%",y:"58%",width:"23%",height:"35%"},
            {x2:"7%",y2:"7%",width:"23%",height:"35%"},
         ],
        tooltip:{
            trigger: "axis",
            axisPointer : {            // 
                type : "shadow"        // :"line" | "shadow"
            }
        },
        xAxis:[
            {
                gridIndex:0,
                 type : "category",
                data : []
            },
            {
                gridIndex:1,
                 type : "category",
                data : []
            },
            {
                gridIndex:2,
                 type : "category",
                data : []
            },
            {
                gridIndex:3,
                 type : "category",
                data : []
            },
            {
                gridIndex:4,
                 type : "category",
                data : []
            },
            {
                gridIndex:5,
                 type : "category",
                data : []
            }
        ],
        yAxis:[
            {gridIndex:0},
            {gridIndex:1},
            {gridIndex:2},
            {gridIndex:3},
            {gridIndex:4},
            {gridIndex:5}
        ],
        series:[
            {
                name:"4059-",
                type:"bar",
                xAxisIndex:0,
                yAxisIndex:0,
                label: {
                normal: {
                    show: true,
                    position: "inside"
                }
                },
                data:[],
            },
            {
                name:"1",
               type:"bar",
                xAxisIndex:1,
                yAxisIndex:1,
                label: {
                normal: {
                    show: true,
                    position: "inside"
                }
        },
                data:[],
            },
            {
                name:"2",
                type:"bar",
                xAxisIndex:2,
                yAxisIndex:2,
                label: {
                normal: {
                    show: true,
                    position: "inside"
                }
        },
                data:[],
            },
            {
                name:"3",
                type:"bar",
                xAxisIndex:3,
                yAxisIndex:3,
                label: {
                normal: {
                    show: true,
                    position: "inside"
                }
        },
                data:[],
            },
            {
                name:"4",
                type:"bar",
                xAxisIndex:4,
                yAxisIndex:4,
                label: {
                normal: {
                    show: true,
                    position: "inside"
                }
        },
                data:[],
            },
            {
                name:"5",
                type:"bar",
                xAxisIndex:5,
                yAxisIndex:5,
                label: {
                normal: {
                    show: true,
                    position: "inside"
                }
        },
                data:[],
            }
        ]
    };
    
    for (var i=0;i<json.length;iPP) {
        option.title[i+1].text=json[i].name;
        /*option.xAxis[i].data=[];
        option.series[i].data=[];*/
        var sum =0;
        for(var key in json[i].code){
            option.xAxis[i].data.push(key);
            option.series[i].data.push(json[i].code[key]);
            sum+= parseFloat(json[i].code[key]);
        }
        option.title[i+1].text=json[i].name+" " + sum;
        option.title[i+1].subtext=" " + sum;
    }
    console.dir(option)
    myChart.setOption(option);
</script>

< / body >
< / html > `