Echart图表折线图的常见效果-CFANZ编程社区

1 标记相关的效果：最大值，最小值，平均值，标注区间

markPoint 标记点标记最大值最小值

markLine 标记线

markArea 标记区域

2 线条的效果:平滑/默认线条的样式

smooth 线条类型

lineStyle 线条样式

3 填充的效果 areaStyle

注意:

1 标记点 type: 'average' 不是准确的平均值而是接近平均值的 y轴数据现有的值

2 markArea 中的data为数组数组里存放二维数组二维数组存放两个对象一个开始一个结束

3 markArea 二维数组对象的值对应xDataArr数组的值

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
    
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    var yDataArr = [500, 800, 900, 1000, 800, 2500, 1400, 1300, 900, 1000, 3800, 3600]
    var option = {
      title:{
        text:'月销售量',
        left:'center'
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '小米12',
          data: yDataArr,
          type: 'line',
          markPoint: { // 标记点
            data: [
              {
                type: 'max' 
              },
              {
                type: 'min'
              },
              {
                type: 'average'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average'
              }
            ]
          },
          markArea: { // 标记区域
            data: [
              [
                {
                  xAxis: '1月'
                },
                {
                  xAxis: '2月'
                }
              ],
              [
                {
                  xAxis: '7月'
                },
                {
                  xAxis: '8月'
                }
              ]
            ]
          },
          smooth: true, // 是否为平滑线
          lineStyle: { // 线的样式设置
            color: 'red',
            type: 'solid' // dashed dotted solid
          },
          areaStyle: { // 线和x轴形成的区域设置
            color: '#ccc'
          }
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

4 紧挨边缘效果:boundaryGap

需要配置在 xAxis

var option = {
      xAxis: {
        type: 'category',
        data: xDataArr,
        boundaryGap: false // x轴的第1个元素是否与y轴有距离
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '小米12',
          data: yDataArr,
          type: 'line'
        }
      ]
    }

5 缩放脱离0值比例 scale

假设我们有一组数据我们就需要y轴脱离0值去比对否则我们看不到想要的效果

var yDataArr = [2005, 2003, 2001, 2002, 2009, 2007, 2003, 2001, 2005, 2004, 2001, 2009]

当我们使用缩放后：

var option = {
      xAxis: {
        type: 'category',
        data: xDataArr,
        boundaryGap: false // x轴的第1个元素是否与y轴有距离
      },
      yAxis: {
        type: 'value',
        scale: true
      },
      series: [
        {
          name: '小米12',
          data: yDataArr,
          type: 'line'
        }
      ]
    }