需求是 使用图表柱状图或者是条形图，有的时候都需要划分时间段
echarts 图片就需要自己使用图叠图的思路来实现这样的效果
image.png
效果图
整了个例子，搞明白了，自己在本地下载好 echarts.js文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>测试dome</title>
<style type="text/css">
#mountNode {
width: 600px;
height: 600px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="mountNode"></div>
<script src="./js/echarts-5.0.2.js"></script>
<script>
var myChart = echarts.init(document.getElementById("mountNode"));
let option = {
grid: [{
// top: 100,
bottom: 100,
},
// 展示一级阶段
{
height: 50,
bottom: 0
},
{
height: 2,
bottom: 50
},
],
tooltip: {},
dataset: {
dimensions: ['product', '2020', '2021'],
source: [
{
product: 'Matcha Latte',
'2020': 85.8,
'2021': 93.7
},
{
product: 'Milk Tea',
'2020': 825.8,
'2021': 393.7
},
{
product: 'Cheese2 Cocoa',
'2020':385.8,
'2021': 931.7
},
{
product: 'Walnut1 Brownie',
'2020': 985.8,
'2021': 393.7
},
{
product: 'Walnut Brownie2',
'2020': 95.8,
'2021': 33.7
},
{
product: 'Walnut Browni3e',
'2020': 195.8,
'2021': 333.7
},
]
},
xAxis: [{
type: 'category',
gridIndex: 0,
},
{
type: 'category',
position: 'top',
gridIndex: 1,
axisLine: {
show: false
},
zlevel: 1
},
{
type: 'category',
position: 'top',
gridIndex: 2,
axisLine: {
show: false
},
zlevel: 1
},
],
yAxis: [{
type: 'value',
gridIndex: 0,
},
{
type: 'value',
gridIndex: 1,
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
},
{
type: 'value',
gridIndex: 2,
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
},
],
series: [{
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
},
{
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
},
]
};
// 数据
let barData = [{
"mdtNums": 47,
"doctorNums": 34,
"name": "202012",
"yearName": 2020,
"visitNums": 50,
"VisitNume": 0.94
}, {
"mdtVisitNums": 49,
"doctorNums": 30,
"name": "202101",
"yearName": 2021,
"visitNums": 53,
"VisitNume": 0.92
}, {
"mdtVisitNums": 32,
"doctorNums": 18,
"name": "202102",
"yearName": 2021,
"visitNums": 32,
"VisitNume": 1.00
}, {
"mdtVisitNums": 60,
"doctorNums": 31,
"name": "202103",
"yearName": 2021,
"visitNums": 70,
"VisitNume": 0.86
}, {
"mdtVisitNums": 62,
"doctorNums": 35,
"name": "202104",
"yearName": 2021,
"visitNums": 65,
"VisitNume": 0.95
}, {
"mdtVisitNums": 4,
"doctorNums": 7,
"name": "202105",
"yearName": 2021,
"visitNums": 7,
"VisitNume": 0.57
}];
// 生成数据段
let num =barData.length;
// label
let label_width = [];
// 判断不为0
if (num >= 1) {
// 分割数量
let segmentation = 0;
// bar宽度
let barWidth = 0;
// 不重复数据
let setArr = [];
let setArr2=[];
// 遍历数据源去重
for (let i = 0; i < barData.length; i++) {
if (!setArr.includes(barData[i].yearName)) {
setArr.push(barData[i].yearName)
setArr2.push({
yearName:barData[i].yearName,
num:0,
})
}
}
// 分割数量
segmentation = (setArr.length - 1) * 2;
// bar宽度
barWidth = parseFloat(((100 - segmentation) / num).toFixed(2));
// 遍历生成数据
for (let i = 0; i < barData.length; i++) {
// 求和
for (let k = 0; k < setArr2.length; k++) {
if(barData[i].yearName==setArr2[k].yearName){
setArr2[k].num=setArr2[k].num+1;
}
}
//判断是否是最后一个
if (barData[i + 1] &&
barData[i].yearName == barData[i + 1].yearName
) {
label_width.push({
yearName:barData[i].yearName,
color: "green",
width: barWidth,
});
} else {
if (barData[i + 1]) {
label_width.push({
yearName:barData[i].yearName,
color: "green",
width: barWidth,
}, {
yearName:"",
color: "none",
width: '2',
});
} else {
label_width.push({
yearName:barData[i].yearName,
color: "green",
width: barWidth,
});
}
}
}
console.log("setArr",setArr2);
// // x数值轴
for (let i = 0; i < setArr2.length; i++) {
option.series.push({
data: [{
name: setArr2[i].yearName,
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
textStyle: {
color: 'green',
}
},
type: 'bar',
barGap: 0,
barWidth: barWidth*setArr2[i].num + '%',
itemStyle: {
color: 'none',
borderColor: 'none',
borderWidth: 0,
},
xAxisIndex: 1,
yAxisIndex: 1
});
}
// 遍历，label_width，向series中添加
for (let i = 0; i < label_width.length; i++) {
// x横线
option.series.push({
data: [{
name: label_width[i].yearName,
value:1
}],
type: 'bar',
barGap: 0,
barWidth: label_width[i].width + '%',
itemStyle: {
color: label_width[i].color,
borderWidth: 1,
},
xAxisIndex: 2,
yAxisIndex: 2
})
}
} else {
label_width.push({
name: "",
width: 100,
});
}
console.log('label_width', label_width);
option && myChart.setOption(option);
</script>
</body>
</html>
网友评论