How to use e-charts service

  • Step 1
    • Goto Awesome Core -> services module and add following lines, and save (most of these lines will be present, make sure last line is added if missing.)
      [services.add echarts service_label=’E Charts’ post_type=’echarts’ desc=’Echarts Service’ /]
  • Step 2
  • Step 3
    • Check following modules in imported service
      • pie-borderradius-chart – config for donut chart
      • mixed-line-bar-chart – config for line and bar mixed chart
      • smoothed-line-chart – config for waves chart
      • stacked-bar – config for stacked bar mixed chart
      • basic-bar – config for single bar chart
      • readme file for charts arrays – raw json examples for all charts
  • Step 4
    • Config element lists – https://echarts.apache.org/examples/en/index.html
    • in readme file for charts arrays¬†all data arrays are mentioned to config charts.
    • Lets see one example for bar-chart,
    • In above array config,
      • there are two bars in chart – bar1 and bar2
      • in series elements, data about these two bars are derived
      • output will be as
      • As you can see, names for bars are Target and Registered
      • which are mentioned in legend array element.
      • To add values for x-axis element is used as
        • xaxis -> data
      • To add values for y-axis element is used as
        • yaxis -> min, max, interval (since it is numeric )
      • to config bars, e-chart is using
      • There are many other elements you can use as per your need
      • you can find them at – https://echarts.apache.org/en/option.html#title
      • Identify your requirement, plot your values, choose your chart accordingly thats it your done.
  • Happy coding!

Updated on Nov 22, 2021