echart 多x轴 option设置

最新推荐文章于 2025-09-25 16:38:27 发布

转载最新推荐文章于 2025-09-25 16:38:27 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c10d573e51d451d9e1d37fc

文章标签：

#javascript #ViewUI

本文详细介绍如何在ECharts中实现双曲线的绘制，通过设置x轴和y轴的数据及类型，实现温度与湿度两条曲线在同一图表中的显示。并提供代码示例，包括配置legend、tooltip、xAxis、yAxis及series等关键参数。

不同x轴的曲线也可以在一个图表中显示，可以直接在echart的实例中，将option替换如下

option = {
    legend: {
        data:['温度', '湿度']
    },
   tooltip : {
        trigger: 'axis',
        axisPointer: {
        type: 'cross',
        animation: false,
        }
    },
     xAxis: {
        type: 'category',
        name:'X',
        boundaryGap: true,
        //需要将x轴上所有的点都描出来
        data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
    },
    yAxis:{
        name:'Y',
        type: 'value',
        nameTextStyle:{
            color:'#333'
        }
    },
    series: [{
        name:'温度',
        symbolSize: 5,
        //关键，需要把data的格式设置为[x,y]来和x，y轴对应
        data: [
            [1, 2],
            [3, 4],
            [5, 9],
            [7, 14],
            [9, 22],
            [11, 20],
            [13, 4],
            [15, 8],
            [17, 2],
            [19, 1]
        ],
        type: 'line',
        smooth:true,
        showSymbol: false,
        barGap: 0
    },
    {
        name:'湿度',
        symbolSize: 5,
        data: [
            [2, 1],
            [4, 4],
            [6, 9],
            [8, 10],
            [10, 14],
            [12, 16],
            [14, 10],
            [16, 8],
            [18, 5],
            [20, 0]
        ],
        type: 'line',
        smooth:true,
        showSymbol:false,
        // barGap: 0
    }
    ]
};
复制代码