echarts4.0一个div下多个柱状图 主标题居中，副标题居左无效，求解答
`<!DOCTYPE html>
<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>
//基于创建好的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<json.length;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);
</script></body>
</html>`
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论