月度年度统计echarts 柱状配置项内容和展示

       builderJson = {

     // "all": 10887,
     "charts": {
         "一月": 123,
         "二月": 334,
         "三月": 342,
         "四月": 321,
         "五月": 322,
         "六月": 254,
         "七月": 564,
         "八月": 466
     },
     "components": {
         "一月": 133,
         "二月": 344,
         "三月": 442,
         "四月": 521,
         "五月": 322,
         "六月": 554,
         "七月": 664,
         "八月": 466
     },
     "ie": 9743
 };

 var downloadJson = {
     "部门1": 123,
     "部门2": 135,
     "部门3": 135,
     "部门4": 234
 };

 var themeJson = {
     "部门1": 133,
     "部门2": 342,
     "部门3": 235,
     "部门4": 334
 };


 var waterMarkText = '测试';

 var canvas = document.createElement('canvas');
 var ctx = canvas.getContext('2d');
 canvas.width = canvas.height = 100;
 ctx.textAlign = 'center';
 ctx.textBaseline = 'middle';
 ctx.globalAlpha = 0.08;
 ctx.font = '20px Microsoft Yahei';
 ctx.translate(50, 50);
 ctx.rotate(-Math.PI / 4);
 ctx.fillText(waterMarkText, 0, 0);

 option = {
     legend: {
         textStyle: {
             color: '#fff'
         },
         x: 'left',
         selected: {
             '是部': false,
             '测试': false
         }
     },
     textStyle: {
         color: '#000',
         fontSize: 16

     },
     color: ['#C10000', '#0000F0', '#FF5706', '#00BDBD', '#C28585', '#00B55A', '#804000'],
     backgroundColor: {
         type: 'pattern',
         image: canvas,
         repeat: 'repeat'
     },
     tooltip: {},
     title: [{
         text: '',
         // subtext: '总计 ' + builderJson.all,
         color: '#000',
         x: '25%',
         textAlign: 'center'
     }, {

         textStyle: {
             color: '#000'
         },
         text: '_2018年 总计 ' + Object.keys(downloadJson).reduce(function(all, key) {
             return all + downloadJson[key];
         }, 0),
         subtextStyle: {
             color: '#000'
         },
         subtext: '',


         x: '72%',
         textAlign: 'center'
     }, {
         color: '#000',
         textStyle: {
             color: '#000'
         },
         text: '_2019年 总计 ' + Object.keys(themeJson).reduce(function(all, key) {
             return all + themeJson[key];
         }, 0),
         subtextStyle: {
             color: '#000'
         },
         subtext: '',
         x: '72%',
         y: '50%',
         textAlign: 'center'
     }],
     grid: [{
         top: 50,
         width: '50%',
         bottom: '45%',
         left: 10,
         containLabel: true
     }, {
         top: '55%',
         width: '50%',
         bottom: 0,
         left: 10,
         containLabel: true
     }],
     xAxis: [{
         axisLine: {
             lineStyle: {
                 color: '#000'
             }
         },
         type: 'value',
         max: builderJson.all,
         splitLine: {
             show: false
         }
     }, {
         axisLine: {
             lineStyle: {
                 color: '#000'
             }
         },
         type: 'value',
         max: builderJson.all,
         gridIndex: 1,
         splitLine: {
             show: false
         }
     }],
     yAxis: [{
         type: 'category',
         data: Object.keys(builderJson.charts),
         axisLabel: {
             interval: 0,
             rotate: 5
         },
         splitLine: {
             lineStyle: {
                 // 使用深浅的间隔色
                 color: ['#fff']
             }
         },
         nameTextStyle: {
             color: ['#fff']
         },
         axisLine: {
             lineStyle: {
                 color: '#fff',
                 width: 1, //这里是为了突出显示加上的
             }

         }
     }, {
         gridIndex: 1,
         type: 'category',
         data: Object.keys(builderJson.components),
         axisLabel: {
             interval: 0,
             rotate: 5
         },
         splitLine: {
             lineStyle: {
                 // 使用深浅的间隔色
                 color: ['#000']
             }
         },
         nameTextStyle: {
             color: ['#000']
         },
         axisLine: {
             lineStyle: {
                 color: '#000',
                 width: 1, //这里是为了突出显示加上的
             }

         }
     }],
     series: [{
         type: 'bar',
         stack: 'chart',
         z: 3,
         label: {
             normal: {
                 position: 'right',
                 show: true
             }
         },
         data: Object.keys(builderJson.charts).map(function(key) {
             return builderJson.charts[key];
         })
     }, {
         type: 'bar',
         stack: 'chart',
         silent: true,
         itemStyle: {
             normal: {
                 color: '#eee'
             }
         },
         data: Object.keys(builderJson.charts).map(function(key) {
             return builderJson.all - builderJson.charts[key];
         })
     }, {
         type: 'bar',
         stack: 'component',
         xAxisIndex: 1,
         yAxisIndex: 1,
         z: 3,
         label: {
             normal: {
                 position: 'right',
                 show: true
             }
         },
         data: Object.keys(builderJson.components).map(function(key) {
             return builderJson.components[key];
         })
     }, {
         type: 'bar',
         stack: 'component',
         silent: true,
         xAxisIndex: 1,
         yAxisIndex: 1,
         itemStyle: {
             normal: {
                 color: '#eee'
             }
         },
         data: Object.keys(builderJson.components).map(function(key) {
             return builderJson.all - builderJson.components[key];
         })
     }, {
         type: 'pie',
         radius: [0, '30%'],
         center: ['75%', '25%'],
         data: Object.keys(downloadJson).map(function(key) {
             return {
                 name: key.replace('.js', ''),
                 value: downloadJson[key]
             }
         })
     }, {
         type: 'pie',
         radius: [0, '30%'],
         center: ['75%', '75%'],
         data: Object.keys(themeJson).map(function(key) {
             return {
                 name: key.replace('.js', ''),
                 value: themeJson[key]
             }
         })
     }]
 };