[echarts]how add dynamic calendar and series with calendar-horizontal

GeHan 0
Viewed 12

I want do this chart
https://echarts.apache.org/examples/zh/editor.html?c=calendar-horizontal

But I want calendar and series are dynamic.
I want the two array length equals java server return data. The java server return json.

I tried many methods but failed. Can you provide any DEMO reference.

calendar: [
    {
      range: '2017',
      cellSize: ['auto', 20]
    },
    {
      top: 260,
      range: '2016',
      cellSize: ['auto', 20]
    },
    {
      top: 450,
      range: '2015',
      cellSize: ['auto', 20],
      right: 5
    }
  ],
  series: [
    {
      type: 'heatmap',
      coordinateSystem: 'calendar',
      calendarIndex: 0,
      data: getVirtulData('2017')
    },
    {
      type: 'heatmap',
      coordinateSystem: 'calendar',
      calendarIndex: 1,
      data: getVirtulData('2016')
    },
    {
      type: 'heatmap',
      coordinateSystem: 'calendar',
      calendarIndex: 2,
      data: getVirtulData('2015')
    }
  ]
echarts dynamic
1 Answers
var jsonStr = '{"cal":[{"range":2017},{"top":260,"range":2016},{"top":450,"range":2015,"right":5}]}';
var jsonObj = JSON.parse(jsonStr);

calendar:  jsonObj.cal

That is OK.jsonObj can from java server.

Series field same with the calendar field.

GeHan0
Related