echarts制作一个坐标图,里面放俩条曲线详细介绍

在这里插入图片描述
如图所示,想要这样一个双曲线图,需要在js中编写

option = {
    
    
    xAxis: {
    
    
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
    
    
        type: 'value'
    },
    series: [{
    
    
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    },
    {
    
    
        data: [720, 832, 801, 834, 790, 900, 820],
        type: 'line',
        smooth: true
    }]
};

xAxis:X轴
yAxis:Y轴
series:线条
smooth:曲线(不加smooth: true默认是折线,如下图所示)
在这里插入图片描述

在option 里面加入tooltip将会出现悬浮Y轴信息栏

tooltip : {
    
    		 
			trigger : "axis"
},

效果如下图:
在这里插入图片描述
如果想要在提示栏前面加上曲线的名字,则需要在series里面给每条曲线加上名字

 series: [{
    
    
        name:'蓝色',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
       
    },
    {
    
    
        name:'绿色',
        data: [720, 832, 801, 834, 790, 900, 820],
        type: 'line',
       
    }]

在这里插入图片描述
本菜正在摸索echarts的路上…
以上都是根据自己理解所写,方便自己后期阅读,如果不对,望见谅

猜你喜欢

转载自blog.csdn.net/qq_45525250/article/details/117281962