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

最新推荐文章于 2024-08-08 18:06:31 发布

三岁很ok

最新推荐文章于 2024-08-08 18:06:31 发布

阅读量2k

点赞数 2

分类专栏： echarts 文章标签： js echarts

本文链接：https://blog.csdn.net/qq_45525250/article/details/117281962

版权

echarts 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文介绍了如何使用ECharts在JavaScript中创建带有自定义名称的双曲线图，包括X轴、Y轴设置、series的配置（数据和类型）、以及添加带曲线名的tooltip。适合初学者理解ECharts基本图形绘制和定制选项。

摘要由CSDN通过智能技术生成

在这里插入图片描述
如图所示，想要这样一个双曲线图，需要在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',
       
    }]