echarts 小程序echarts 柱状配置项内容和展示

echarts 如果开发一套控件库,我就可以编程了, echarts 小程序,对抗微信小程序 ,哈哈哈

配置项如下
         function menuFormater(params, label) {
       let obj = null;
       if (params instanceof Array) {
           obj = params[0]
       } else {
           obj = params;
       }
       return obj.dataIndex != 11 ? '' : label;
   }

   var currentMenu;


   var option = {
       title: {
           text: 'echarts 小程序'
       },
       xAxis: {
           position: 'top',
           type: 'value',
           axisTick: {
               show: false
           },
           axisLabel: {
               show: false
           },
           axisLine: {
               show: false
           },
           splitLine: {
               show: false
           }

       },
       yAxis: {
           type: 'category',
           data: ['', '', '', '', '', '', '', '', '', '', '', ''],
           axisTick: {
               show: false
           },
           axisLabel: {
               show: false
           },
           axisLine: {
               show: false
           },
           splitLine: {
               show: false
           }

       },
       series: [{
           name: 'file',
           type: 'bar',
           stack: '总量',
           label: {
               normal: {
                   formatter: function(params) {
                       return menuFormater(params, 'File >')
                   },
                   textStyle: {
                       fontSize: 14,
                       color: '#000'
                   },
                   show: true,
                   position: [10, 10]
               }
           },
           data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 300],
           itemStyle: {
               normal: {
                   color: '#99a9bf'
               }
           }
       }, {
           name: 'edit',
           type: 'bar',
           stack: '总量',
           label: {
               normal: {
                   formatter: function(params) {
                       return menuFormater(params, 'Edit')
                   },
                   textStyle: {
                       fontSize: 14,
                       color: '#000'
                   },
                   show: true,
                   position: [10, 10]
               }
           },
           data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 300],
           itemStyle: {
               normal: {
                   color: '#99a9bf'
               }
           }
       }, {
           name: 'view',
           type: 'bar',
           stack: '总量',
           label: {
               normal: {
                   formatter: function(params) {
                       return menuFormater(params, 'View')
                   },
                   textStyle: {
                       fontSize: 14,
                       color: '#000'
                   },
                   show: true,
                   position: [10, 10]
               }
           },
           data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 300],
           itemStyle: {
               normal: {
                   color: '#99a9bf'
               }
           }
       }, {
           name: 'help',
           type: 'bar',
           stack: '总量',
           label: {
               normal: {
                   formatter: function(params) {
                       return menuFormater(params, 'Help')
                   },
                   textStyle: {
                       fontSize: 14,
                       color: '#000'
                   },
                   show: true,
                   position: [10, 10]
               }
           },
           data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 300],
           itemStyle: {
               normal: {
                   color: '#99a9bf'
               }
           }
       }, {
           name: 'about',
           type: 'bar',
           stack: '总量',
           label: {
               normal: {
                   formatter: function(params) {
                       return menuFormater(params, 'About')
                   },
                   textStyle: {
                       fontSize: 14,
                       color: '#000'
                   },
                   show: true,
                   position: [10, 10]
               }
           },
           data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 300],
           itemStyle: {
               normal: {
                   color: '#99a9bf'
               }
           },
           barGap: '1%',
       }]
   };

   myChart.on('click', function(params) {
       if(params.seriesName === 'file'){
           showSubMenu(params);
       }
        
       if(params.seriesName === 'view'){
           alert('hello echarts');
           return ;
       }
       if(params.seriesName === 'about'){
           alert('echart 小程序 1.0');
           return ;
       }
        console.log(params)
   });

   myChart.on('mouseover', function(params) {


   });


   function showSubMenu(params) {
       for (var i = 0; i < option.series.length; i++) {
           option.series[i].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 300]
       }
     
       option.series[params.seriesIndex].data = [0, 0, 0, 0, 0, 0, 0, 300, 300, 300, 300, 300];
       myChart.setOption(option)
   }
    
截图如下