echarts 柱状图的选中模式实现

方法：

 function barCharShow(curr_dim,divId,result_data){

     mutilDim(curr_dim);//维度信息

       var paint = initEcharts(echarts,divId);

       var option = buildStandardBar();

        option.xAxis[0].data=result_data.xAxis_data;

        option.series[0].data= result_data.data;

        option.series[1].data=result_data.data_year;

        option.series[2].data= result_data.data_mom;

        paint.setOption(option);

        var select_dim_id = "dim_"+(Number(curr_dim)+1);

 //       paint.on('click', function (params) {

12//            option.series[params.seriesIndex].itemStyle.normal.color=function (param){

  //              if(params.dataIndex == param.dataIndex &&$("#parent_dim_"+curr_dim).val()!=params.name){

 //                   return '#FF3333';

 //               }else{

 //                   return '#00FFCC';

 //               } 
//           };

   paint.on('click', function (params) {

            option.series[].itemStyle.normal.color=function (param){//params.seriesIndex

                if(params.dataIndex == param.dataIndex &&$("#parent_dim_"+curr_dim).val()!=params.name){

                    return '#FF3333';

                }else{

                    return '#00FFCC';

                } 
};

            option.series[].itemStyle.normal.color=function (param){

                if(params.dataIndex == param.dataIndex &&$("#parent_dim_"+curr_dim).val()!=params.name){

                    return '#FF3333';

                }else{

                    return '#999933';

                } 
};

            option.series[].itemStyle.normal.color=function (param){

                if(params.dataIndex == param.dataIndex &&$("#parent_dim_"+curr_dim).val()!=params.name){

                    return '#FF3333';

                }else{

                    return '#66FF00';

                } 
};

            paint.setOption(option);
//alert(params);

               //$("#"+select_dim_id).val(params.data.key);
if($("#parent_dim_"+curr_dim).val()==params.name){

                 //取消维度选择

                   $("#parent_dim_"+curr_dim).val(null);

               }else{

                 //维度选择

                   $("#parent_dim_"+curr_dim).val(params.name);

               }
//获取全部维度-拼维度

                var str="";

                for (var i = 1; i <=curr_dim; i++) {

                 if($("#parent_dim_"+i).val()!=""&&$("#parent_dim_"+i).val()!=null){

                     if(i>1){

                         str+="-";

                     }

                     str+=$("#parent_dim_"+i).val();

                 }

             }

                $("#parent_mdim_"+curr_dim).val(str);
$("#"+select_dim_id).trigger("change");
//  
});
}

柱状图：

 //标注柱状图

 function buildStandardBar(){

     var option = {

               color: ['#00FFCC','#999933','#66FF00'],

             title : {

                 text: ' ',

                 subtext: ' '

             },

             grid: [

                     {x: '3%', y: '10%', width: '94%', height: '80%',x2:'1%', y2: '3%'},

                   ],

             tooltip : {

                 trigger: 'axis'

             },

             legend: {

                  textStyle: {

                         color: '#fff',

                         fontSize:15

                     },

                 data:['当前','环比','同比']

             },

             calculable : true,

             xAxis : [

                 {

                     type : 'category',

                     boundaryGap: true,

                     axisLabel:{

                         color:'#fff',

                         interval:0,

                         rotate:15,//倾斜度 -90 至 90 默认为0

                         textStyle:{

                             fontSize:15,

                         }

                     },

                     axisLine:{

                         lineStyle:{

                             color:'#fff'

                         }

                     },

                     data : [ ]

                 }

             ],

             yAxis : [

                 {

                     type : 'value',

                     axisLabel:{

                         color:'#fff',

                         rotate:-50,//倾斜度 -90 至 90 默认为0

                         textStyle:{

                             fontSize:15,

                         },

                         formatter: function(value,index){//纵坐标单位转换

                             if((value/100000000)>=1){

                             return (value/100000000).toFixed(0)+" 亿";

                             }else if((value/10000000)>=1){

                             return (value/10000000).toFixed(0)+"千万";

                             }else if((value/1000000)>=1){

                             return (value/1000000).toFixed(0)+"百万";

                             }else if((value/10000)>=1){

                             return (value/10000).toFixed(0)+" 万";

                             }else{

                             return value;

                             }

                            }

                     },

                     axisLine:{

                         lineStyle:{

                             color:'#fff'

                         }

                     },

                     axisTick:{

                         show:false

                     },

                     splitLine:{

                         show:false

                     }

                 }

             ],

             series : [

                 {

                     name:'当前',

                     type:'bar',

                     data:[],

                     barCategoryGap:'10%',

                     barGap:'40%',

                     itemStyle : {

                         normal : {

                             label: {

                                   show: true,

                                   position: 'top',

                                   textStyle: {

                                     color: '#FFFF00',

                                     fontSize:15

                               }

                            },

                             color: '#00FFCC'

                         },
}

                 },

                 {

                     name:'同比',

                     type:'bar',

                     data:[ ],

                     barCategoryGap:'10%',

                     barGap:'40%',

                     itemStyle : {

                         normal : {

                             label: {

                                   show: true,

                                   position: 'top',

                                   textStyle: {

                                     color: '#FFFF00',

                                     fontSize:15

                               }

                            }

                         },
}
},

                 {

                     name:'环比',

                     type:'bar',

                     data:[ ],

                     barCategoryGap:'10%',

                     barGap:'40%',

                     itemStyle : {

                         normal : {

                             label: {

                                   show: true,

                                   position: 'top',

                                   textStyle: {

                                     color: '#FFFF00',

                                     fontSize:15

                               }

                            }

                         },
}
}

             ]

         };

     return option;

 }