<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<style>
.chart-item {
width: 50%;
height: 300px;
margin: 48px auto;
}
</style>
</head>
<body>
<div class="chart-item" id="chart"></div>
<script>
var myChartArr = [];
function drawChart(id, data) {
var myEchart = echarts.init(document.getElementById(id));
var option = {
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0,0,0,0.66)",
borderColor: 'rgba(0,0,0,0)',
axisPointer: {
type: "shadow",
label: {
show: false,
},
},
textStyle: {
color: '#fff',
fontSize: 12,
},
},
legend: {
orient: "horizontal",
right: "1%",
top: "3%",
textStyle: {
color: "#333",
fontSize: 12,
},
itemWidth: 14,
itemHeight: 10,
},
grid: {
left: "6%",
right: "3%",
bottom: "3%",
top: "15%",
containLabel: true,
z: 22,
},
xAxis: [{
type: "category",
gridIndex: 0,
data: data.xData,
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
interval: 0,
show: true,
color: "#909db0",
margin: 10,
textStyle: {
fontSize: 12,
},
},
axisPointer: {
type: 'shadow',
}
},],
yAxis: [{
type: "value",
name: "%",
nameTextStyle: {
color: "#88939d",
nameLocation: "start",
},
splitNumber: 5,
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#19347b",
},
},
gridIndex: 0,
min: 0,
splitLine: {
show: true,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
formatter: "{value}",
color: "#909db0",
margin: 10,
textStyle: {
fontSize: 12,
},
},
}],
series: [{
name: data.data1.name,
type: "bar",
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
barBorderRadius: [20, 20, 20, 20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: '#338dfc'
}, {
offset: 0,
color: '#02d7f9'
}], false)
},
},
barWidth: 14,
data: data.data1.value,
zlevel: 11,
}, {
name: data.data2.name,
type: "bar",
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
barBorderRadius: [20, 20, 20, 20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: '#fc7c33'
}, {
offset: 0,
color: '#ffc007'
}], false)
},
},
barWidth: 14,
data: data.data2.value,
zlevel: 11,
}],
};
myEchart.setOption(option)
myChartArr.push(myEchart)
}
var mockData = {
xData: [1,2,3,4,5,6,7,8,9,10],
data1: {
name: 'item1',
value: [ 1.63, 1.65, 1.67, 1.69, 1.67, 1.66, 1.65, 1.64, 1.65, 1.66 ]
},
data2: {
name: 'item2',
value: [ 1.45, 1.43, 1.45, 1.43, 1.46, 1.48, 1.46, 1.43, 1.38, 1.40]
}
}
drawChart('chart', mockData)
$(window).resize(function () {
for (var i = 0; i < myChartArr.length; i++) {
myChartArr[i].resize();
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<style>
.chart-item {
width: 50%;
height: 300px;
margin: 48px auto;
}
</style>
</head>
<body>
<div class="chart-item" id="chart"></div>
<script>
var myChartArr = [];
function drawChart(id, data) {
var myEchart = echarts.init(document.getElementById(id));
var option = {
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0,0,0,0.66)",
borderColor: 'rgba(0,0,0,0)',
axisPointer: {
type: "shadow",
label: {
show: false,
},
},
textStyle: {
color: '#fff',
fontSize: 12,
},
},
legend: {
orient: "horizontal",
right: "1%",
top: "3%",
textStyle: {
color: "#333",
fontSize: 12,
},
itemWidth: 14,
itemHeight: 10,
},
grid: {
left: "6%",
right: "3%",
bottom: "3%",
top: "15%",
containLabel: true,
z: 22,
},
xAxis: [{
type: "category",
gridIndex: 0,
data: data.xData,
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
interval: 0,
show: true,
color: "#909db0",
margin: 10,
textStyle: {
fontSize: 12,
},
},
axisPointer: {
type: 'shadow',
}
},],
yAxis: [{
type: "value",
name: "%",
nameTextStyle: {
color: "#88939d",
nameLocation: "start",
},
splitNumber: 5,
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#19347b",
},
},
gridIndex: 0,
min: 0,
splitLine: {
show: true,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
formatter: "{value}",
color: "#909db0",
margin: 10,
textStyle: {
fontSize: 12,
},
},
}],
series: [{
name: data.data1.name,
type: "bar",
stack: "all",
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
barBorderRadius: [20, 20, 20, 20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: '#338dfc'
}, {
offset: 0,
color: '#02d7f9'
}], false)
},
},
barWidth: 14,
data: data.data1.value,
zlevel: 11,
}, {
name: data.data2.name,
type: "bar",
stack: "all",
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
barBorderRadius: [20, 20, 20, 20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: '#fc7c33'
}, {
offset: 0,
color: '#ffc007'
}], false)
},
},
barWidth: 14,
data: data.data2.value,
zlevel: 11,
}],
};
myEchart.setOption(option)
myChartArr.push(myEchart)
}
var mockData = {
xData: [1,2,3,4,5,6,7,8,9,10],
data1: {
name: 'item1',
value: [ 1.63, 1.65, 1.67, 1.69, 1.67, 1.66, 1.65, 1.64, 1.65, 1.66 ]
},
data2: {
name: 'item2',
value: [ 1.45, 1.43, 1.45, 1.43, 1.46, 1.48, 1.46, 1.43, 1.38, 1.40]
}
}
drawChart('chart', mockData)
$(window).resize(function () {
for (var i = 0; i < myChartArr.length; i++) {
myChartArr[i].resize();
}
})
</script>
</body>
</html>