I did this, but the points of this line chart are concentrated on a bar chart!
how to solve it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.main {
width: 1200px;
height: 1000px;
}
</style>
<body>
<div id="main" class="main"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var option = {
color: ["-sharp2AB2F7", "-sharp75BF55", "-sharp777DB4"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "-sharp999"
}
}
},
legend: {
data: ["", "", ""]
},
xAxis: [
{
type: "category",
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
axisPointer: {
type: "shadow"
}
}
],
yAxis: [
{
type: "value",
name: "",
min: 0,
max: 200,
interval: 50,
axisLabel: {
formatter: "{value} "
}
}
],
series: [
{
name: "",
type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: "",
type: "line",
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: "",
type: "bar",
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: "",
type: "line",
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: "",
type: "bar",
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
},
{
name: "",
type: "line",
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
myChart.setOption(option);
</script>
</html>