Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程

本文首发：《Echarts 折线图完全配置指南》

Echarts 折线图是图表中最常用的显示形式之一。使用 Echarts 做出基本的折线图很简单，但要是想把多组数据放在一张图表中，展示的漂亮又直观就不容易了。本文将带领大家从最基本的折线图，一步步完善，最终做出可读性很高的可视化图表。

根据本教程在卡拉云中搭建的折线图 Demo，你可以立即注册卡拉云，跟随本教程学习

跟随本教程你将学到

1.折线外观属性

• 折线增加弧线平滑过渡
• 折线图变为散状圆点
• 实线改为虚线
• 折线指定颜色
• 增加数据显示

1. 表格外观属性

• 鼠标滑过时，显示数据提示框
• 鼠标滑过时，显示十字准心指示器
• 鼠标滑过数据自动吸附
• 设置 X 轴、Y 轴颜色
• 设置 X 轴标签 45 度斜着显示
• 设置图表背景颜色
• 设置下载图表的功能键

Echarts 折线图基础配置

本文使用低代码开发工具卡拉云作为 Echarts 折线图的演示工具，卡拉云内置包括 Echarts 图表组件在内数十种常见的前端组件，仅需拖拽即可生成。你无需懂任何前端知识，也可以快速开发出属于自己的后台工具。详情请见本文文末。

我们从这个最简单的折线图入手，手把手教大家一步步学习。

option = {
            title: {
          text: '卡拉云新用户激活数据',
          subtext: 'Demo 虚构数据',
          x: 'center'
        },

        legend: {
          orient: 'horizontal',
          x: 'left',
          y: 'top',
          data: ['猜想','预期','实际']
        },
        grid: {
            top: '20%',  
            left: '3%', 
            right: '10%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
          name: '月份',
          type: 'category',
          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',]
        },
        yAxis: {
          name: '人次',
          type: 'value',
          min:0, // 配置 Y 轴刻度最小值
          max:4000,  // 配置 Y 轴刻度最大值
          splitNumber:7,  // 配置 Y 轴数值间隔
        },

        series: [ // 多组折线图数据
          {
            name: '猜想',
            data: [454,226,891,978,901,581,400,543,272,955,1294,1581],
            type: 'line'         
          },

          {
            name: '预期',
            data: [2455,2534,2360,2301,2861,2181,1944,2197,1745,1810,2283,2298],
            type: 'line',
          },

          {
            name: '实际',
            data: [1107,1352,1740,1968,1647,1570,1343,1757,2547,2762,3170,3665],
            type: 'line'
          }
        ],
        color: ['#3366CC', '#FFCC99','#99CC33']
      }

扩展阅读：《最好用的 7 款 Vue 富文本编辑器》

Echarts 折线图的多种展示形式配置指南

• 「猜想」折线改为散状圆点
• 「猜想」折线圆点根据数据大小变化尺寸
• 「猜想」折线隐藏线段部分
• 「预期」折线改为虚线
• 「实际」折线改为弧度过度
• Echarts legend 属性配置（图例配置选项）
• Echarts grid 属性配置（图表上下左右边缘的距离）

在卡拉云的图表组件中填入代码：

option = {

  title: {