Echarts曲線設置多條X軸和Y軸效果圖如下：
1.
2.
xAxis 是一個數組,當橫坐標數量小於等於2的時候,默認顯示下上兩個坐標軸,如果大於2,則可以指定位置,並使用 offset 參數修正位置,不重疊。但，當echarts 有2個或者2個以上x軸時，tooltip trigger：axis的情況下會出現2條或者2條以上的指示線。 但是我只希望其中一個x軸觸發tooltip，另一個不觸發，只顯示一條指示線及相應x軸數據。需做如下配置：
每個x軸的配置項有
axisPointer 這個配置項
在不想顯示的x軸上 寫配置項
axisPointer type 為 none 即可
如下
xAxis: [{ type: 'category', position: 'bottom', data: [...] },{ type: 'category', position: 'bottom', offset: 25, axisPointer: { type: 'none' }, data: [...] }]則第二個會隱藏
eg:2個x軸配置
"xAxis": [ { "name":"xxxxA", "max":"400", "type": "value"
}, { "name":"xxxxB", "type": "value" } ],
eg:多個x軸配置
"xAxis": [ { "name":"xxxxA", "max":"400", "type": "value"}, { "name":"xxxxB", "type": "value" }, { "name":"xxxxC", "type": "value", "position":"top" "offset":30, } ],
最后在series中設置xAxisIndex為xaxis 的index 就可以了
"series": [ { "name":"學程數", "type":"line", "xAxisIndex": 1, "data":[1,2,4,5, 8, 9.0, 8,6,5,9] }, { "name":"總題數", "type":"bar", "data":[20,10,20, 49, 70, 180,70,88,93,72] }, { "name":"錯題數", "type":"bar", "data":[5, 9, 9,8,24,9,11,32,13,21] } ]示例代碼01：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 1900px;height:400px;"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis'
},
legend: {
data: ['直接訪問']
},
xAxis: [
{
type: 'category',
show: true,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
textStyle: {
color: "#999"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
{
type: 'category',
/* position: 'bottom', */
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
axisPointer: {
type: 'none'
},
axisLabel: {
textStyle: {
color: "#999"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
{
/* name: "xxxxC", */
type: 'category',
/* position: "top", */
position: 'bottom',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
offset: -130,
axisPointer: {
type: 'none'
},
axisLabel: {
textStyle: {
color: "#999"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
}
],
yAxis: [
{
type: 'value'
},
{
type: 'value',
show: false,
axisLabel: {
formatter: '{value} %'
},
min: 10, max: 80
}
],
series: [
{
name: '直接訪問',
type: 'bar',
// barWidth: '60%',
data: [1000, 520, 2000, 3340, 3900, 330, 5220]
},
{
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
data: []
}
]
}
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
示例代碼02：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 1900px;height:400px;"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis'
},
/* legend: {
data: ['直接訪問']
}, */
xAxis: [{
/* name: "學程數", */
/* max: "400", */
type: 'category',
/* position: 'bottom', */
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
23
],
offset: -80,
axisPointer: {
type: 'none'
},
axisLabel: {
textStyle: {
color: "#999"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
{
/* name: "總題數", */
type: 'category',
position: 'bottom',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
23
],
offset: 10,
axisPointer: {
type: 'none'
},
axisLabel: {
textStyle: {
color: "#999"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
{
/* name: "錯題數", */
type: 'category',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
23
],
axisPointer: {
type: 'none'
},
axisLabel: {
textStyle: {
color: "#999"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
position: "top",
offset: -30,
},
{
/* name: "錯題數", */
type: 'category',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
23
],
axisPointer: {
type: 'none'
},
axisLabel: {
textStyle: {
color: "#999"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
position: "top",
offset: -120,
}
],
yAxis: [{
name: "學程數",
type: 'value'
},
{
name: "總題數",
type: 'value',
offset: -230,
},
{
name: "總題數2",
type: 'value',
offset: -430,
},
{
name: "錯題數",
type: 'value',
show: true,
axisLabel: {
formatter: '{value} %'
},
min: 10,
max: 80
}
],
series: [{
name: "學程數",
type: "line",
xAxisIndex: 1,
yAxisIndex: 1,
data: [1, 2, 4, 5, 8, 9, 8, 6, 5, 9, 1, 2, 4, 5, 8, 9, 8, 6, 5, 9, 8, 4, 9, 6]
},
{
name: "總題數",
type: "bar",
data: [20, 10, 20, 49, 70, 180, 70, 88, 93, 72, 20, 10, 20, 49, 70, 180, 70, 88, 93, 72, 22,
32, 12, 25
]
},
{
name: "錯題數",
type: "bar",
data: [5, 9, 9, 8, 24, 9, 11, 32, 13, 21, 5, 9, 9, 8, 24, 9, 11, 32, 13, 21, 21, 33, 16, 36]
}
]
}
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
echarts.min.js源碼：https://echarts.baidu.com/index.html
參考文章：
https://www.jianshu.com/p/f4747768f582
https://m.oschina.net/question/2771008_2278754