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

Question

I am new to eCharts and I am trying to get a stacked line chart to work. The tooltip shows the data correctly, but there is no y-axis scale and no lines or area fills. If I remove the "stack: 'a'" options from the 'series' section, a non-stacked version of the chart renders correctly. My options and data are as follows:

 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>

I've been able to get every other chart type I need to work as expected except this one. What am I missing?

Answer 1

Don't use null as name for your first dimension but some arbitrary string like 'date':

"source": [
      [
        "date",
        "Gifts",
        "In Kind",
        "Pledges"
      ], [...]