Echarts曲线设置多条X轴和Y轴
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
