[GitHub] [incubator-echarts] MashRoofa commented on issue #4902: Multiple Hierarchical bar chart

[GitBox <gi...@apache.org>]

MashRoofa commented on issue #4902:
URL: https://github.com/apache/incubator-echarts/issues/4902#issuecomment-747313873


   Here is the proposed example translated to english, in case someone needs it.
   
   ```js
   // 2x Axis + Fake Data Column
   // Fine-grained data must be sorted according to the main category
   var dummy = [
       ['2015 Winter', '1', Math.random() * 10, Math.random() * 10],
       ['2015 Winter', '2', Math.random() * 20, Math.random() * 20],
       ['2016 Spring', '3', Math.random() * 50, Math.random() * 50],
       ['2016 Spring', '4', Math.random() * 100, Math.random() * 100],
       ['2016 Spring', '5', Math.random() * 150, Math.random() * 150],
       ['2016 Summer', '6', Math.random() * 200, Math.random() * 200],
       ['2016 Summer', '7', Math.random() * 250, Math.random() * 250],
       ['2016 Summer', '8', Math.random() * 200, Math.random() * 200],
       ['2016 autumn', '9', Math.random() * 150, Math.random() * 150],
       ['2016 autumn', '10', Math.random() * 100, Math.random() * 100],
       ['2016 autumn', '11', Math.random() * 20, Math.random() * 20],
       ['2016 winter', '12', Math.random() * 10, Math.random() * 10]
   ];
   // Metadata processing，e.g. metadata.init().xxx
   var metadata = {
       flag: true,
       quarter: [],
       month: [],
       data1: [],
       data2: [],
       data3: [],
       x_major_offset: dummy[0][1].length,
       init: function() {
           // Initial initialization
           if (metadata.flag) {
               // Data traveral
               for (var i = 0; i < dummy.length; i++) {
                   //debugger;
                   if (i === 0) {
                       metadata.quarter.push(dummy[i][0]);
                   } else {
                       // Match subcategory column
                       metadata.quarter.push(dummy[i - 1][0] === dummy[i][0] ? '' : dummy[i][0]);
                   }
                   metadata.month.push(dummy[i][1]);
                   metadata.data1.push(dummy[i][2]);
                   metadata.data2.push(dummy[i][3]);
                   metadata.data3.push('');
                   // Calculate the length of sub-category characters (calculated according to Chinese characters, *12 font)
                   metadata.x_major_offset = metadata.x_major_offset > dummy[i][1].length ? metadata.x_major_offset : dummy[i][1].length;
               }
               metadata.flag = false;
           }
           return metadata;
       }
   };
   
   option = {
       tooltip: {
           axisPointer: {
               type: 'shadow'
           },
           trigger: 'axis'
       },
       grid: {
           bottom: metadata.init().x_major_offset * 12 + 30
       },
       legend: {
           data: ['Evaporation', 'Precipitation']
       },
       xAxis: [{
               type: 'category',
               axisLine: {
                   show: false
               },
               axisTick: {
                   show: false
               },
               axisLabel: {
                   rotate: 90
               },
               splitArea: {
                   show: false
               },
               data: metadata.init().month
           },
           {
               type: 'category',
               position: 'bottom',
               offset: metadata.init().x_major_offset * 12,
               axisLine: {
                   show: false
               },
               axisTick: {
                   length: metadata.init().x_major_offset * 12 + 20,
                   lineStyle: {
                       color: '#CCC'
                   },
                   interval: function(index, value) {
                       return value !== '';
                   }
               },
               splitArea: {
                   show: true,
                   interval: function(index, value) {
                       return value !== '';
                   }
               },
               data: metadata.init().quarter
           }
       ],
       yAxis: [{
           type: 'value',
           name: 'Water volume',
           min: 0,
           max: 250,
           interval: 50,
           axisLabel: {
               formatter: '{value} ml'
           }
       }],
       series: [{
               name: 'Evaporation',
               type: 'bar',
               z: 1,
               data: metadata.init().data1
           },
           {
               name: 'Precipitation',
               type: 'bar',
               z: 1,
               data: metadata.init().data2
           },
           {
               type: 'line',
               xAxisIndex: 1,
               z: 0,
               data: metadata.init().data3
           }
       ]
   };
   ```


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org