eCharts category

by Benahmed Taoufiq

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
<div id="main">

</div>

CSS

#main{height:500px}

JavaScript

var series = [],
  months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aôut", "Séptembre", "Octobre", "Novembre", "Décembre"],
  data = [];

function loadChart(jsonValues) {
var
  objMois = jsonValues.mois.replace(/'/g, "").split(","),
  objNbre = jsonValues.nbre.split(','),
  years = [...new Set(objMois.map(v => v.split('.')[1]))];

  years.forEach((y, i) => {
    data[y] = [];
    months.forEach((m, i1) => {
      objMois.forEach((v, i2) => {
        let mois = v.substr(0, v.indexOf('.'));
        let annee = v.substr(v.indexOf(".") + 1, v.length - 1);
        if (!data[y][i1])
          data[y][i1] = mois == i1 + 1 &&
          annee == y ? objNbre[i2] : 0;
      });
    });
    if (series.filter(val => val.name == y).length == 0)
      series.push({
        type: 'bar',
        name: y,
        data: data[y]
      });
  });
  console.log(series)

  var myChart = echarts.init(document.getElementById('main'));

  // Specify the configuration items and data for the chart

  option = {
    backgroundColor: '#eeeeee',
    /*darkMode:true,
	
blendMode: 'source-over',*/
    legend: {},
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    xAxis: {
      type: "category",
      data: months,
      axisLabel: {
        rotate: 30
      } /**/ ,
      axisPointer: {
        type: 'shadow'
      }
    },
    yAxis: {},
    series: series
  };
  // Display the chart using the configuration items and data just specified.
  myChart.setOption(option);
}

const objJSON = {
  "mois": "'4.2018','5.2018','6.2018','10.2018','11.2018','12.2018','1.2019','2.2019','3.2019','4.2019','5.2019','6.2019','7.2019','8.2019','9.2019','10.2019','11.2019','12.2019','1.2020','2.2020','3.2020','4.2020','5.2020','6.2020','7.2020','8.2020','9.2020','10.2020','11.2020','12.2020','1.2021','2.2021','3.2021','4.2021','5.2021','6.2021','7.2021','8.2021','11.2021'",
  "nbre":...