javascript - eCharts——不显示数据的简单堆叠折线图

问题描述

我是 eCharts 的新手，我正在尝试使用堆叠折线图。工具提示正确显示数据，但没有 y 轴刻度，也没有线条或区域填充。如果我从“系列”部分中删除“堆栈：'a'”选项，则图表的非堆叠版本会正确呈现。我的选项和数据如下：

var myChart = echarts.init(document.getElementById('main'));
        
var option = {
  "animation": false,
  "legend": {
    "show": true,
    "top": "middle",
    "left": "right",
    "orient": "vertical"
  },
  "title": {
    "text": "Total Raised by Type, Month and Year",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis",
    "axisPointer": {
      "type": "cross",
      "label": {
        "backgroundColor": "#6a7985"
      }
    }
  },
  "dataset": {
    "source": [
      [
        null,
        "Gifts",
        "In Kind",
        "Pledges"
      ],
      [
        "Jul 2017",
        "2508",
        "1",
        "2594"
      ],
      [
        "Aug 2017",
        "3512",
        "2",
        "3631"
      ],
      [
        "Sep 2017",
        "7625",
        "4",
        "7885"
      ],
      [
        "Oct 2017",
        "8026",
        "4",
        "8300"
      ],
      [
        "Nov 2017",
        "9431",
        "5",
        "9753"
      ],
      [
        "Dec 2017",
        "15050",
        "8",
        "15563"
      ],
      [
        "Jan 2018",
        "9030",
        "5",
        "9338"
      ],
      [
        "Feb 2018",
        "7525",
        "4",
        "7781"
      ],
      [
        "Mar 2018",
        "6020",
        "3",
        "6225"
      ],
      [
        "Apr 2018",
        "8528",
        "4",
        "8819"
      ],
      [
        "May 2018",
        "13043",
        "7",
        "13488"
      ],
      [
        "Jun 2018",
        "10033",
        "5",
        "10375"
      ],
      [
        "Jul 2018",
        "4311",
        "4",
        "2159"
      ],
      [
        "Aug 2018",
        "6036",
        "5",
        "3022"
      ],
      [
        "Sep 2018",
        "13106",
        "11",
        "6563"
      ],
      [
        "Oct 2018",
        "13796",
        "12",
        "6908"
      ],
      [
        "Nov 2018",
        "16210",
        "14",
        "8117"
      ],
      [
        "Dec 2018",
        "25867",
        "23",
        "12953"
      ],
      [
        "Jan 2019",
        "15520",
        "14",
        "7772"
      ],
      [
        "Feb 2019",
        "12934",
        "11",
        "6477"
      ],
      [
        "Mar 2019",
        "10347",
        "9",
        "5181"
      ],
      [
        "Apr 2019",
        "14658",
        "13",
        "7340"
      ],
      [
        "May 2019",
        "22418",
        "20",
        "11226"
      ],
      [
        "Jun 2019",
        "17245",
        "15",
        "8636"
      ],
      [
        "Jul 2019",
        "1847",
        "2",
        "1696"
      ],
      [
        "Aug 2019",
        "2586",
        "3",
        "2374"
      ],
      [
        "Sep 2019",
        "5616",
        "6",
        "5155"
      ],
      [
        "Oct 2019",
        "5911",
        "6",
        "5426"
      ],
      [
        "Nov 2019",
        "6946",
        "7",
        "6375"
      ],
      [
        "Dec 2019",
        "11084",
        "11",
        "10173"
      ],
      [
        "Jan 2020",
        "6650",
        "7",
        "6104"
      ],
      [
        "Feb 2020",
        "5542",
        "6",
        "5087"
      ],
      [
        "Mar 2020",
        "4433",
        "5",
        "4069"
      ],
      [
        "Apr 2020",
        "6281",
        "6",
        "5765"
      ],
      [
        "May 2020",
        "9606",
        "10",
        "8817"
      ],
      [
        "Jun 2020",
        "7389",
        "8",
        "6782"
      ]
    ]
  },
  "xAxis": {
    "type": "category",
    "axisLabel": {
      "rotate": 90
    }
  },
  "yAxis": [
    {
      "type": "value",
      "axisLabel": {
        "formatter": "${value}"
      }
    }
  ],
  "series": [
    {
      "type": "line",
      "areaStyle": {},
      "stack": "a"
    },
    {
      "type": "line",
      "areaStyle": {},
      "stack": "a"
    },
    {
      "type": "line",
      "areaStyle": {},
      "stack": "a"
    }
  ]
};

myChart.setOption(option);

<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

除了这个之外，我已经能够获得按预期工作所需的所有其他图表类型。我错过了什么？

标签： javascriptecharts

javascript - eCharts——不显示数据的简单堆叠折线图

问题描述

解决方案

推荐阅读