引言

最近使用 echarts 画折线图，遇到一个比较罕见的需求，趁此机会好好研究了一下 echarts 的 『值』与 轴类型 的关系，做一下记录。

一、简介

通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。

series: [{
    data: [
        // 维度X   维度Y 
        [  3.4,    4.5],
        [  4.2,    2.3],
        [  10.8,   9.5],
        [  7.2,    8.8]
    ]
}]

特别地，当只有一个轴为类目轴（axis.type 为 'category'）的时候，数据可以简化用一个一维数组表示。例如：

xAxis: {
    data: ['a', 'b', 'm', 'n']
},
series: [{
    // 与 xAxis.data 一一对应。
    data: [23,  44,  55,  19]
    // 它其实是下面这种形式的简化：
    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]

通过上面的例子，我们可以看出，data[i][0] 对应于坐标轴中的 xAxis，data[i][1] 对应于坐标轴中的 yAxis。

• 当某维度对应于数值轴（axis.type 为 'value' 或者 'log'）的时候：

其值可以为 number（例如 12）。（也可以兼容 string 形式的 number，例如 '12'）

• 当某维度对应于类目轴（axis.type 为 'category'）的时候：

其值须为类目的『序数』（从 0 开始）或者类目的『字符串值』。例如：

  xAxis: {
      type: 'category',
      data: ['星期一', '星期二', '星期三', '星期四']
  },
  yAxis: {
      type: 'category',
      data: ['a', 'b', 'm', 'n', 'p', 'q']
  },
  series: [{
      data: [
          // xAxis    yAxis
          [  0,        0 ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。
          [  '星期四',  2 ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。
          [  2,       'p'  ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。
          [  3,        3  ]
      ]
  }]

二、 例子

来看一个例子：

看图可知 Y轴为时间类型，X轴 为 category 类型，代码如下：

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis',
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三']
    },
    yAxis: {
        type: 'time'
    }

};

准备数据如下：

series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[
                [0,'2019-02-20'], [2,'2019-02-21'],  [3,'2019-02-22']
            ]
        },
         {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[
                [0,'2019-02-21'], [1,'2019-02-22'],  [2,'2019-02-23']
            ]
        }
    ]

完整代码如下：

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {

            return params[0].value[1];
        }
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三']
    },
    yAxis: {
        type: 'time'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[
                [0,'2019-02-20'], [2,'2019-02-21'],  [3,'2019-02-22']
            ]
        },
         {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[
                [0,'2019-02-21'], [1,'2019-02-22'],  [2,'2019-02-23']
            ]
        }
    ]
};

三、参考资料

1. https://www.echartsjs.com/option.html#series-line