echarts折线图xAxis为time，横轴数据必须连贯吗？

Question

我这样的数据：

 [{
                    time: "2005",
                    event: "在北京成立，与中国移动建立合作关系",
                    value: 60,
                },
                {
                    time: "2016",
                    event: "开始进入IT服务领域，组建技术部",
                    value: 55,
                },
                {
                    time: "2019",
                    event: "首次提出连锁类企业CIT服务新概念，\n开启全国门店一站式服务的合作模式",
                    value: 77,
                },
                {
                    time: "2021",
                    event: "开始CIT服务平台的研发，业绩突破7600万销售额，服务连锁门店及集团分支突破1500家。",
                    value: 70,
                },
                {
                    time: "2022",
                    event: "业绩突破9400万销售额，服务连锁门店及集团分支突破 4000家",
                    value: 50,
                },
                {
                    time: "2023",
                    event: "业绩突破1.2亿销售额，服务连锁门店及集团分支突破9000 家",
                    value: 60,
                },
                {
                    time: "2024",
                    event: "业绩突破1.35亿销售额，服务连锁门店及集团分支突破12000 家",
                    value: 51,
                }
            ];

结果只显示第一条：

把第二条的2016改成2006：

所以怎么才能都显示出来？像这样：

Answer 1

上午好☀️☀️☀️️
本答案参考通义千问

在 ECharts 中，如果你使用 xAxis.type = 'time'，那么横轴的数据会期望是连续的时间序列（例如日期时间格式），而你的数据是离散的年份值（如 "2005"、"2016" 等）。这会导致 ECharts 自动过滤掉不连续的部分。

为了确保所有数据点都能显示出来，你可以将 xAxis.type 设置为 'category' 而不是 'time'，因为 'category' 类型的横轴可以支持离散的字符串或数值数据。

以下是解决方案：

解决方案

1. 将 xAxis.type 设置为 'category'
   这样可以避免 ECharts 对时间序列的自动过滤，允许离散的年份数据正常显示。

2. 确保数据格式正确
   如果你需要保持时间格式的可读性，可以在数据中保留年份字符串，并确保 ECharts 的配置正确处理这些字符串。

---

修改后的代码示例

// 初始化图表实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

// 数据
var option = {
    xAxis: {
        type: 'category', // 使用 category 类型
        data: ["2005", "2016", "2019", "2021", "2022", "2023", "2024"] // 明确指定横轴数据
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [60, 55, 77, 70, 50, 60, 51], // 对应的数值
        type: 'line',
        label: {
            show: true, // 显示数据标签
            position: 'top' // 标签位置
        }
    }],
    tooltip: {
        trigger: 'axis', // 触发提示框
        formatter: function (params) {
            return params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value;
        }
    }
};

myChart.setOption(option);

---

关键点说明

1. xAxis.type: 'category'

   • 这是问题的核心解决方法。通过设置为 'category' 类型，ECharts 不会对数据进行时间序列的过滤，而是直接按照离散的字符串或数值顺序绘制图表。

2. 手动指定 xAxis.data

   • 在 xAxis.data 中明确列出所有的年份数据，确保 ECharts 横轴上的每个点都有对应的数据。

3. 数据与横轴对齐

   • 确保 series.data 和 xAxis.data 的长度一致，并且顺序一一对应。

---

效果展示

运行上述代码后，你会看到一个完整的折线图，包含所有数据点：

• 2005: 60
• 2016: 55
• 2019: 77
• 2021: 70
• 2022: 50
• 2023: 60
• 2024: 51

所有数据都会完整显示在图表上。

---

希望这个解决方案能帮助到你！如果还有其他问题，欢迎继续提问！