Apache ECharts

How ECharts Charts Are Rendered

ECharts uses an option object to configure charts. Our service generates HTML with your ECharts configuration and renders it to an image.

Example 

const chartOption = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [1, 2, 3],
        type: 'bar'
    }]
};

When you send this configuration to our API, it gets embedded into our HTML template like this:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chart = echarts.init(document.getElementById('chart'))
      const option = [your config]
      chart.setOption(option)
    </script>
  </body>
</html>

API Usage

Use ECharts configurations with the charts.land API by setting library.name to "echarts" and providing your chart configuration in the config field.

{
  "library": {
    "name": "echarts",
    "version": "5.5.1"
  },
  "config": {
    // Your ECharts option object goes here
  },
  "output": {
    "format": "png",
    "width": 800,
    "height": 600
  }
}

Resources