echarts，为什么我的柱状图下面没有完全实现table表格，有懂的吗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="anniu()">按钮</button>
<div id="main" style="width: 100%;height: 450px">
</div>
<table id="abctable"></table>
</body>
<script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../echarts/echarts.min.js"></script>
<script>
function anniu() {
alert(123);
var myChart = echarts.init(document.getElementById('main'),'shine');
var names = [];
var values = [];
var bbb = [];
var ccc=[];
var dt= ['计划', '完成', '达成率'];
$.ajax({
url: '/abc/a',
type: 'POST',
success: function (data) {
if (data) {
for (var i = 0; i < data.length; i++) {
names.push(data[i].riqi);
values.push(data[i].a);
bbb.push(data[i].b);
ccc.push(data[i].c);
}
function getTableLine(num){
var list=[];
var bottom=60;
var height=20;
for(var i=0;i<num;i++){
list.push({
type:'line',
bottom:bottom-i*height,
right:60,
style:{
fill:'#333',
},
shape:{
x1:10,
y1:0,
x2:799,
y2:2
}
});
}
return list;
}
var lineList=getTableLine(5);
function initCharCol(data){
}
if(data==null)
data=[];
myChart.hideLoading();
myChart.setOption({
tooltip:{
trigger: "axis"
},
title:[{
text:'数据时间:'
},
{
text:'\n计划\n完成\n达成率',
bottom:-8,
left:60,
textStyle:{
lineHeight:20,
fontSize:13,
fontWeight:'normal',
formatter:function (value) {
return '{table| '+value+'}';
},
rich:{
table:{
align:'center',
}
}
}
}],
legend:{
data:['a钱','b钱','c钱'],
right:'15%',
top:'5%',
},
xAxis:{
type: 'category',
data:names,
boundaryGap: true,
axisTick:{
length:100,
},
axisLine: {
lineStyle: {
type: 'solid',
/* color: 'blue' */// 更改坐标轴颜色
}
},
axisLabel:{
interval:0,
rotate:0,
axisPointer: {
type: 'shadow'
},
formatter:function (value,index) {
var indexNum=0;
for(var i=0;i<data.length;i++){
if(value===names[i]){
indexNum=i;
}
}
var a= value.slice(4,6);
var b=value.slice(6,8);
return (
'{table|' +
a+"/"+b +
'}\n{table|' +
values[indexNum] +
'}\n{table|' +
bbb[indexNum] +
'}\n{table|' +
ccc[indexNum] +
'}\n{table|' +
'}'
)
},
rich: {
table: {
lineHeight: 16,
align: 'center',
},
}
}
},
yAxis:{
type:'value',
},
series:[{
name:'a钱',
data:values,
type: 'bar',
barGap: '-100%',
barWidth:20,
splitNumber: 3,
},
{
name:'b钱',
data:bbb,
type: 'bar',
barWidth:20,
},
{
name:'c钱',
data:ccc,
type: 'bar',
barWidth:20,
},
],
graphic:lineList,
})
}
},
error:function (errorMsg) {
alert("图标请求数据失败");
myChart.hideLoading();
}
});
}
</script>
</html>
你是指 没有底部 的 边框？ 那应该时 高度不够吧 。试试加高 echarts的高度