前端echarts坐标轴问题

Question

echarts中x轴坐标刻度不按照输入date数据显示而是从0开始，请问是怎么回事
做一个异步加载的echart折线图，从JSON文件中读取数据并传入echart中，JSON文件及代码如下：

echarts中x轴坐标刻度不按照输入date:[0.1, 0.2, 0.3, 0.5, 0.6, 0.7, 0.8]数据显示而是从0开始，请看看到底怎么回事，最终展示结果如下：

$.ajax({
    type: "get",
    async: true,
    url: "../json/data1.json",
    dataType: "json",
    success: function (data) {
        option = {
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            legend: {

            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                date:[0.1, 0.2, 0.3, 0.5, 0.6, 0.7, 0.8],//设置为date:data.tmie结果也是一样
           } ],
            yAxis: [
                
            ],
            series: [
            
            ]
        };
        for (var i = 0; i < Array.length; i++) {
            var yAxisOption = {
                name: Array[j],//Array是JSON文件项目名称
                type: 'value', // 假设所有Y轴都是数值轴  
                position: 'left',
                offset: 40 * (i ),
                axisLine: {
                    show: true,
                    
                },
            };
            option.yAxis.push(yAxisOption);
        }
        for (var j = 0; j < Array.length; j++) {
            console.log(j);
            option.series.push({
                name: Array[j],
                type: 'line',
                connectNulls: true,
                data: data[Array[j]],
                yAxisIndex: j
        })
        }
         myChart.setOption(option);
    },
})

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题分析： 从代码中可以看出，x轴的类型是“category”，并且设置了boundaryGap: false，即坐标轴两边留白，但是并没有设置对应的data数据，而是使用了date属性，并且把数据写在了date数组中。这样会导致echarts默认把x轴坐标刻度从0开始显示。 解决方法： 将date属性改成data属性，并将数据直接写在data数组中。 修改后的代码如下： $.ajax({ type: "get", async: true, url: "../json/data1.json", dataType: "json", success: function (data) {

option = {
  title: {
    text: '异步数据加载示例'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  toolbox: {
    feature: {
      dataView: {
        show: true,
        readOnly: false
      },
      restore: {
        show: true
      },
      saveAsImage: {
        show: true
      }
    }
  },
  legend: {},
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    data: [0.1, 0.2, 0.3, 0.5, 0.6, 0.7, 0.8] //修改为data属性
  }],
  yAxis: [],
  series: []
};
for (var i = 0; i < Array.length; i++) {
  var yAxisOption = {
    name: Array[j],
    type: 'value',
    position: 'left',
    offset: 40 * (i),
    axisLine: {
      show: true,
    },
  };
  option.yAxis.push(yAxisOption);
}
for (var j = 0; j < Array.length; j++) {
  console.log(j);
  option.series.push({
    name: Array[j],
    type: 'line',
    connectNulls: true,
    data: data[Array[j]],
    yAxisIndex: j
  })
}
myChart.setOption(option);

}, })