echarts 居左_echarts4.0一个div下多个柱状图 主标题居中，副标题居左无效，求解答...

`

单个实例包含多个grid，标题分别居中

div{

};

//基于创建好的DOM，初始化一个echarts实例

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:['#5793f3', '#d14a61', '#675bba','#546570','#d48265','#c4ccd3'],

//分别设置标题居中主要代码

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

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

`