自定义样式的echats折线图（过程示例）

最新推荐文章于 2025-04-29 09:17:41 发布

原创

最新推荐文章于 2025-04-29 09:17:41 发布 · 799 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #经验分享 #js #css #html

本文详细介绍如何使用ECharts定制个性化折线图，包括去除区域填充、调整轴线及文字颜色、修改拐点和线条样式、添加渐变色填充及自定义提示气泡。

需求,直接上设计图：
在这里插入图片描述
进入echats官网：
https://www.echartsjs.com/zh/index.html
找到官方实例：

随机选择一个顺眼的折线图：

进入后，开始改造。左边修改代码，右边则能够看到表现。

首先我们去除图中的区域填充效果,方便观察效果：删除掉左侧代码中的series.areaStyle:

series: [{
   
   
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        /*areaStyle: {}删除掉这一行*/
    }]

效果：
在这里插入图片描述
然后我们修改x、y轴上文字颜色和轴线、刻度线、网格线的显示效果，首先科普一下什么是轴线、刻度线、网格线。
轴线：即x轴和y轴。如下图

刻度线，就是轴线上用于标识刻度的线如下图：

网格线即刻度线的延长线，如下图：
在这里插入图片描述

xAxis: {
   
   
                type: 'category',
                boundaryGap: false,
                data: ['1', '2', '3', '4', '5', '6', '7'],
                "splitLine": {
   
        //网格线：显示
                    "show": true
                },
                "axisLine": {
   
          //轴线：隐藏
                    "show": false
                },
                "axisTick": {