Blog

# 折线图

基本的折线图：

  • 类目轴
  • 数值轴
  • series.${item}.type: 'line'

常见效果：

  • 最大值、最小值、平均值： markPoint / markLine / markArea
  • 线条显示： smooth / lineStyle
  • 填充风格： areaStyle
  • 紧挨边缘： boundaryGap
  • 脱离 0 值比例： scale
  • 堆叠图： stack

特点：

  • 变化趋势： 折线图常用来分析数据随时间的变化趋势。

# 1. 简单的折线图

实现：

option = {
  xAxis: { type: 'category' },
  yAxis: { type: 'value' },
  series: [
    { type: 'line', /* ... */ },
  ]
}

示例：

<!--11-line-basic.html-->
<div id="box_11-line-basic" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_11-line-basic')).setOption({
    dataset: {
      dimensions: ['month', 'amount'],
      source: [
        { month: '1月', amount: 3000 },
        { month: '2月', amount: 2800 },
        { month: '3月', amount: 900 },
        { month: '4月', amount: 1000 },
        { month: '5月', amount: 800 },
        { month: '6月', amount: 700 },
        { month: '7月', amount: 1400 },
        { month: '8月', amount: 1300 },
        { month: '9月', amount: 900 },
        { month: '10月', amount: 1000 },
        { month: '11月', amount: 800 },
        { month: '12月', amount: 600 },
      ],
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '月销量',
        type: 'line',
        encode: {
          x: 'month',
          y: 'amount',
        }
      },
    ]
  });
</script>

# 2. 效果

# 2.1. 标记

说明：

  • 标记最大值、最小值、平均线、区域

配置：

option = {
  series: [
    {
      type: 'line',
      markPoint: {
        data: [
          { type: 'max', name: '最大值' },
          { type: 'min', name: '最小值' },
        ],
      },
      markLine: {
        data: [
          { type: 'average', name: '平均值' }
        ]
      },
      markArea: {
        data: [
          [ { xAxis: '2月' }, { xAxis: '4月' } ],
          [ { xAxis: '8月' }, { xAxis: '9月' } ],
        ]
      },
    },
  ]
}

示例：

<!--12-line-mark.html-->
<div id="box_12-line-mark" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_12-line-mark')).setOption({
    dataset: {
      dimensions: ['month', 'amount'],
      source: [
        { month: '1月', amount: 3000 },
        { month: '2月', amount: 2800 },
        { month: '3月', amount: 900 },
        { month: '4月', amount: 1000 },
        { month: '5月', amount: 800 },
        { month: '6月', amount: 700 },
        { month: '7月', amount: 1400 },
        { month: '8月', amount: 1300 },
        { month: '9月', amount: 900 },
        { month: '10月', amount: 1000 },
        { month: '11月', amount: 800 },
        { month: '12月', amount: 600 },
      ],
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '月销量',
        type: 'line',
        encode: {
          x: 'month',
          y: 'amount',
        },
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' },
          ],
        },
        markLine: {
          data: [
            { type: 'average', name: '平均值' }
          ]
        },
        markArea: {
          data: [
            [ {xAxis: '2月'}, { xAxis: '4月' } ],
            [ {xAxis: '8月'}, { xAxis: '9月' } ],
          ]
        },
      },
    ]
  });
</script>

# 2.2. 线条

说明：

  • 设置线条平滑、样式

配置：

option = {
  series: [
    {
      type: 'line',
      smooth: true,
      lineStyle: {
        color: 'blue',
        type: 'dashed',
      },
    },
  ]
}

注意：

  • 修改 lineStyle 中的颜色不会影响图例颜色，如果需要图例颜色和折线图颜色一致，需修改 itemStyle.color，线条颜色默认也会取该颜色。

示例：

<!--13-line-style.html-->
<div id="box_13-line-style" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_13-line-style')).setOption({
    dataset: {
      dimensions: ['month', 'amount'],
      source: [
        { month: '1月', amount: 3000 },
        { month: '2月', amount: 2800 },
        { month: '3月', amount: 900 },
        { month: '4月', amount: 1000 },
        { month: '5月', amount: 800 },
        { month: '6月', amount: 700 },
        { month: '7月', amount: 1400 },
        { month: '8月', amount: 1300 },
        { month: '9月', amount: 900 },
        { month: '10月', amount: 1000 },
        { month: '11月', amount: 800 },
        { month: '12月', amount: 600 },
      ],
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '月销量',
        type: 'line',
        encode: {
          x: 'month',
          y: 'amount',
        },
        smooth: true,
        lineStyle: {
          color: 'blue',
          type: 'dashed',
        },
      },
    ]
  });
</script>

# 2.3. 填充

说明：

  • 区域填充样式，设置后显示成区域面积图。

配置：

option = {
  series: [
    {
      type: 'line',
      areaStyle: {}
    },
  ]
}

示例：

<!--14-line-area.html-->
<div id="box_14-line-area" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_14-line-area')).setOption({
    dataset: {
      dimensions: ['month', 'amount'],
      source: [
        { month: '1月', amount: 3000 },
        { month: '2月', amount: 2800 },
        { month: '3月', amount: 900 },
        { month: '4月', amount: 1000 },
        { month: '5月', amount: 800 },
        { month: '6月', amount: 700 },
        { month: '7月', amount: 1400 },
        { month: '8月', amount: 1300 },
        { month: '9月', amount: 900 },
        { month: '10月', amount: 1000 },
        { month: '11月', amount: 800 },
        { month: '12月', amount: 600 },
      ],
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '月销量',
        type: 'line',
        encode: {
          x: 'month',
          y: 'amount',
        },
        areaStyle: {}
      },
    ]
  });
</script>

# 2.4. 紧挨边缘

说明：

  • 默认情况下，类目轴的刻度只是作为分割线，标签和数据点都在两个刻度的中间

配置：

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false, // 标签和数据都是从 y 轴轴线开始
  },
}

示例：

<!--15-line-boundaryGap.html-->
<div id="box_15-line-boundaryGap" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_15-line-boundaryGap')).setOption({
    dataset: {
      dimensions: ['month', 'amount'],
      source: [
        { month: '1月', amount: 3000 },
        { month: '2月', amount: 2800 },
        { month: '3月', amount: 900 },
        { month: '4月', amount: 1000 },
        { month: '5月', amount: 800 },
        { month: '6月', amount: 700 },
        { month: '7月', amount: 1400 },
        { month: '8月', amount: 1300 },
        { month: '9月', amount: 900 },
        { month: '10月', amount: 1000 },
        { month: '11月', amount: 800 },
        { month: '12月', amount: 600 },
      ],
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
      axisLine: { show: true } // 显示y轴 轴线
    },
    series: [
      {
        name: '月销量',
        type: 'line',
        encode: {
          x: 'month',
          y: 'amount',
        },
      },
    ]
  });
</script>

# 2.5. 脱离0值比例

说明：

  • 默认情况下，数值轴会包含 0 刻度
  • 如果每个点的数值相差很小 就会变成一条直线

配置：

option = {
  yAxis: {
    type: 'value',
    scale: true, // y 轴 “0点” 是最小的那个值
  },
}

注意：

  • 在设置 min 和 max 之后该配置项无效。

示例：

<!--16-line-scale.html-->
<div id="box_16-line-scale" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_16-line-scale')).setOption({
    dataset: {
      dimensions: ['month', 'amount'],
      source: [
        { month: '1月', amount: 3011 },
        { month: '2月', amount: 3002 },
        { month: '3月', amount: 3013 },
        { month: '4月', amount: 3024 },
        { month: '5月', amount: 3015 },
      ],
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
      scale: true,
    },
    series: [
      {
        name: '月销量',
        type: 'line',
        encode: {
          x: 'month',
          y: 'amount',
        },
      },
    ]
  });
</script>

# 2.6. 数据堆叠

说明：

  • 多个折线图的展示
  • 数据堆叠，同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加。

配置：

option = {
  series: [
    { name: '1月销量', type: 'line', areaStyle: {}, stack: 'total' },
    { name: '2月销量', type: 'line', areaStyle: {}, stack: 'total' },
    { name: '3月销量', type: 'line', areaStyle: {}, stack: 'total' },
  ]
}

示例：

<!--17-line-stack.html-->
<div id="box_17-line-stack" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_17-line-stack')).setOption({
    dataset: {
      dimensions: ['month', 'wuhanAmount', 'changshaAmount', 'shenzhenAmount'],
      source: [
        { month: '1月', wuhanAmount: 1200, changshaAmount: 900, shenzhenAmount: 1900 },
        { month: '2月', wuhanAmount: 1900, changshaAmount: 1300, shenzhenAmount: 2300 },
        { month: '3月', wuhanAmount: 900, changshaAmount: 1100, shenzhenAmount: 2100 },
        { month: '4月', wuhanAmount: 1000, changshaAmount: 1200, shenzhenAmount: 2200 },
      ],
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    tooltip: {},
    series: [
      { name: '武汉月销量', type: 'line', areaStyle: {}, stack: 'total', encode: { x: 'month', y: 'wuhanAmount' } },
      { name: '长沙月销量', type: 'line', areaStyle: {}, stack: 'total', encode: { x: 'month', y: 'changshaAmount' } },
      { name: '深圳月销量', type: 'line', areaStyle: {}, stack: 'total',encode: { x: 'month', y: 'shenzhenAmount' } },
    ]
  });
</script>

上一篇:

front-end /
libs /
echarts /
guide /
下一篇:
front-end /
libs /
echarts /
guide /
07.散点图

本章目录