<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>堆叠柱状图</title>
<style>
.m-main{margin: 200px; 550px;height:10px;}
</style>
</head>
<body>
<div id="main" class="m-main"></div>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.1/echarts.js"></script>
<script type="text/javascript">
let myChart = echarts.init(document.getElementById('main'));
var data = [
[0, 16, 5, {
name: '资产名称1',
num: 16,
persent: '35%'
}],
[16, 18, 5, {
name: '资产名称2',
num: 16,
persent: '35%'
}],
[18, 26, 5, {
name: '资产名称3',
num: 16,
persent: '35%'
}],
[26, 32, 5, {
name: '资产名称4',
num: 16,
persent: '35%'
}],
[32, 56, 5, {
name: '资产名称5',
num: 16,
persent: '35%'
}],
[56, 62, 5, {
name: '资产名称6',
num: 16,
persent: '35%'
}]
];
var colorList = ['#4f81bd', '#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b'];
data = echarts.util.map(data, function(item, index) {
return {
value: item,
itemStyle: {
normal: {
color: colorList[index]
}
}
};
});
function renderItem(params, api) {
var yValue = api.value(2);
var start = api.coord([api.value(0), yValue]);
var size = api.size([api.value(1) - api.value(0), yValue]);
var style = api.style();
return {
type: 'rect',
shape: {
x: start[0],
y: start[1],
size[0],
height: size[1]
},
style: style
};
}
let option = {
tooltip: {
formatter: (params, ticket, callback) => {
let info = params.data.value[3];
let name = info.name;
let num = info.num;
let persent = info.persent;
return `
<div>
<div>${name}</div>
<div>${num}(${persent})</div>
</div>
`
}
},
xAxis: {
show: false
},
yAxis: {
show: false
},
series: [{
type: 'custom',
renderItem: renderItem,
label: null,
dimensions: ['from', 'to', 'profit'],
encode: {
x: [0, 1],
y: 2,
tooltip: [0, 1, 2],
itemName: 3
},
data: data
}]
};
myChart.setOption(option);
</script>
</body>
</html>