效果圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts 底部加table</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
<style>
html, body {
height: 100%;
margin:0px;
}
.chart {
height: 90%;
padding: 20px;
}
</style>
<script>
var chartCol;
var data = [{ "Name": "CBU", "PlannedItems": 0, "CompletedItems": 0, "Completion_Rate": 0 }, { "Name": "TE", "PlannedItems": 0, "CompletedItems": 0, "Completion_Rate": 0 }, { "Name": "AE", "PlannedItems": 68, "CompletedItems": 4, "Completion_Rate": 5.9 }, { "Name": "ME", "PlannedItems": 0, "CompletedItems": 0, "Completion_Rate": 0 }, { "Name": "DBU", "PlannedItems": 0, "CompletedItems": 0, "Completion_Rate": 0 }, { "Name": "車床", "PlannedItems": 4, "CompletedItems": 4, "Completion_Rate": 100 }, { "Name": "線割", "PlannedItems": 36, "CompletedItems": 4, "Completion_Rate": 11.1 }, { "Name": "銑床", "PlannedItems": 32, "CompletedItems": 0, "Completion_Rate": 0 }, { "Name": "磨床", "PlannedItems": 24, "CompletedItems": 0, "Completion_Rate": 0 }, { "Name": "機加", "PlannedItems": 96, "CompletedItems": 8, "Completion_Rate": 8.3 }, { "Name": "鉗工", "PlannedItems": 68, "CompletedItems": 4, "Completion_Rate": 5.9 }]
window.onload = function(){
initChartCol(data)
}
function getTableLine(num) {
var list = [];
var bottom = 60;//底部位置根據自己要求調整，我的理解是這的值應該設置 grid: { left: 60, right: 60, bottom: 90 }是90減30的一個值,
var height = 20;
for (var i = 0; i < num; i++) {
list.push({
type: 'line',
bottom: bottom - i * height,
right: 60,
style: {
fill: '#fff',
/*stroke: 'blue'*/
},
shape: {
x1: 0,
y1: 0,
x2: 4200,
y2: 2
}
});
}
return list;
}
var lineList = getTableLine(5);//要渲染幾條線寫幾
function initChartCol(data) {
chart = echarts.init(document.getElementById('chartCol'), 'shine');
var xa = [], ya = [], ya1 = [], ya2 = [], dt = ['計划', '完成', '達成率'];
if (data == null)
data = [];
for (var i = 0; i < data.length; i++) {
xa.push(data[i].Name);
ya.push(data[i].PlannedItems);
ya1.push(data[i].CompletedItems);
ya2.push(data[i].Completion_Rate);
}
// 指定圖表的配置項和數據
var option = {
title: [{
text: '各工序OTDD達成率',
x: 'center',
textStyle: { //設置主標題風格
/*color: '#00ffff',*///設置主標題字體顏色
}
}, {
text: ' \n計划\n完成\n達成率',
bottom: -5,
left: 0,
textStyle: {
lineHeight: 20,
fontSize: 13,
/*color: "blue",*/
fontWeight: 'normal',
formatter: function (value) {
return '{table|' + value + '}';
},
rich: {
table: {
align: 'center'
}
}
}
}],
color: ['#e6b600', '#4cff00', '#c12e34', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487'],
backgroundColor: 'transparent',
legend: {
top: '20px',
itemHeight: 10,
itemWidth: 20,
left: 'right',
textStyle: {//圖例文字的樣式
color: '#ccc',
fontSize: 10
},
data: dt
},
grid: { left: 60, right: 60, bottom: 90 },
tooltip: {
trigger: 'axis',
},
xAxis: [
{
type: 'category',
data: xa,
axisTick: {
length: 90 // 豎線的長度
},
axisLine: {
lineStyle: {
type: 'solid',
/*color: 'blue'*/ // 更改坐標軸顏色
}
},
axisLabel: {
interval: 0,
axisPointer: {
type: 'shadow'
},
formatter: function (value, index) {
var indexNum = 0
for (var i = 0; i < xa.length; i++) {
if (value === xa[i]) {
indexNum = i
}
}
return ('{table|' + value + '}\n{table|' + ya[indexNum] + '}\n{table|' + ya1[indexNum] + '}\n{table|' + ya2[indexNum] + '%}\n{table|' + '}')
},
rich: {
table: {
lineHeight: 20,
align: 'center'
}
}
}
}
],
yAxis: [{
type: 'value',
boundaryGap: ['0%', '50%'],
axisLine: {
lineStyle: {
type: 'solid',
/*color: 'blue',*/ //左邊線的顏色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
}, {
type: 'value',
min: 0,
max: 100,
boundaryGap: ['0%', '20%'],
axisLine: {
lineStyle: {
type: 'solid',
/*color: 'blue',*/ //左邊線的顏色
}
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed'
}
},
axisLabel: {
formatter: '{value}%'
}
}],
graphic: lineList, //table
series: [{
data: ya,
name: '計划',
type: 'bar',
yAxisIndex: 0,
label: {
show: true, position: 'top', formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
},
barMaxWidth: 40, // 最大寬度
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#0026ff' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#00ffff' }
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
]
)
}
},
}, {
data: ya1,
name: '完成',
type: 'bar',
label: {
show: true, position: 'top', formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
},
},
{
data: ya2,
name: '達成率',
type: 'line',
yAxisIndex: 1,
label: { normal: { show: true, position: 'top', formatter: '{c}%' } },
}]
};
chart.clear();
chart.setOption(option);
}
</script>
</head>
<body>
<div class="chart" id="chartCol"></div>
</body>
</html>