pages/_posts/2024-01-26-echarts.md
George 4f6fe1a2cf
Added Echarts support (#2129)
Since I added support for chart.js and while doing so found some other
wonderful charting libraries, I thought, why not give support to some
more? So adding support to [Apache
Echarts](https://echarts.apache.org/en/index.html).


![image](https://github.com/alshedivat/al-folio/assets/31376482/088f0932-524f-4fcd-a34b-b132f569a675)


![image](https://github.com/alshedivat/al-folio/assets/31376482/36bfe4f8-a9d1-4b6d-a912-fb40ba3b5337)

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>
2024-01-27 10:34:44 -03:00

1.3 KiB

layout title date description tags categories chart
post a post with echarts 2024-01-26 16:03:00 this is what included echarts code could look like formatting charts sample-posts
echarts
true

This is an example post with some echarts code.

```echarts
{
  "title": {
    "text": "ECharts Getting Started Example"
  },
  "responsive": true,
  "tooltip": {},
  "legend": {
    "top": "30px",
    "data": ["sales"]
  },
  "xAxis": {
    "data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
  },
  "yAxis": {},
  "series": [
    {
      "name": "sales",
      "type": "bar",
      "data": [5, 20, 36, 10, 10, 20]
    }
  ]
}
```

Which generates:

{
  "title": {
    "text": "ECharts Getting Started Example"
  },
  "responsive": true,
  "tooltip": {},
  "legend": {
    "top": "30px",
    "data": ["sales"]
  },
  "xAxis": {
    "data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
  },
  "yAxis": {},
  "series": [
    {
      "name": "sales",
      "type": "bar",
      "data": [5, 20, 36, 10, 10, 20]
    }
  ]
}

Note that this library offer support for both light and dark themes. You can switch between them using the theme switcher in the top right corner of the page.