ECharts的x軸和y軸均使用數值類型

今天有個需求，就是需要ECharts的x軸和y軸都要使用數值類型，即xAxis.type和yAxis.type均為value，然后我按照我以為的方式修改了下，發現圖崩了

發現問題：

然后我打開了ECharts的官方在線編輯器做測試，首先寫了自認為對的代碼

option = {
    xAxis: {
        type: 'value',
        data: [1, 2, 3, 4, 5, 6, 7],
        name: 'x軸'
    },
    yAxis: {
        type: 'value',
        name: 'y軸'
    }，
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

然后實際的圖是有問題的，如下圖，可以發現柱狀圖的左上角那個點的x和y的值是相等的，從左往右分別是70,80,110,120,130,150,200（沒錯，就是series里的那一組數據）

 

解決問題：

1、首先打開ECharts的官方文檔

2、我看到xAxis.data[i]的文檔內容，它里面提到xAxis的data是類目數據。那這也就意味着，當type='value'時，data里面存放的數據是無效的

類目數據，在類目軸（type: 'category'）中有效。

如果沒有設置 type，但是設置了 axis.data，則認為 type 是 'category'。

如果設置了 type 是 'category'，但沒有設置 axis.data，則 axis.data 的內容會自動從 series.data 中獲取，這會比較方便。不過注意，axis.data 指明的是 'category' 軸的取值范圍。如果不指定而是從 series.data 中獲取，那么只能獲取到 series.data 中出現的值。比如說，假如 series.data 為空時，就什么也獲取不到。

3、再定位到type='line'的series.data，里面有提到

通常來說，數據用一個二維數組表示。如下，每一列被稱為一個『維度』

特別地，當只有一個軸為類目軸（axis.type 為 'category'）的時候，數據可以簡化用一個一維數組表示

     

4、那么也就是說，我需要在xAxis.type='value'的時候，把x軸的數據存放到series.data里面去。我按這個思路修改了代碼，效果立馬顯現

option = {
    xAxis: {
        type: 'value',
        name: 'x軸'
    },
    yAxis: {
        type: 'value',
        name: 'y軸'
    },
    series: [{
        data: [
            [1,120],
            [2,200],
            [3,150],
            [4,80],
            [5,70],
            [6,110],
            [7,130]
        ],
        type: 'bar'
    }]
};

5、還可以使用新特性dataset來設置，代碼如下，效果和上圖一致

option = {
    xAxis: {
        type: 'value',
        name: 'x軸'
    },
    yAxis: {
        type: 'value',
        name: 'y軸'
    },
    series: [{
        type: 'bar'
    }],
    dataset: {
        source: [
            [1, 120],
            [2, 200],
            [3,150],
            [4,80],
            [5,70],
            [6,110],
            [7,130]
        ]
    }
};