下钻时柱状图和折线图点击范围扩大到空白处

src/components/chartDesigner/charts/echartsView.jsx

@@ -10,6 +10,8 @@ moment.locale('zh-cn');
 class EchartsView extends Component {
     render() { 
         const { chartOption, inDashBoard, item } = this.props;
+        const { themeConfig } = chartOption;
+        const { name: themeName } = themeConfig || {};
         if(!chartOption || ((!chartOption.series || chartOption.series.length === 0) && (!chartOption.baseOption || !chartOption.baseOption.series || chartOption.baseOption.series.length === 0))) {
             return <EmptyContent />
         }else {
@@ -46,7 +48,7 @@ class EchartsView extends Component {
                                      *  在钻取开启后 drillDown会生成钻取数组 默认为第一层
                                      *  DrillDownBar组件为钻取层级工具栏
                                      */
-                                    <DrillDownBar inDashBoard={inDashBoard} item={item} key={hashcode(drillDown)} drillDown={drillDown}></DrillDownBar>
+                                    <DrillDownBar className={`drilldownbar ${themeName}`} inDashBoard={inDashBoard} item={item} key={hashcode(drillDown)} drillDown={drillDown}></DrillDownBar>
                                 }
                             </div>
                         )
@@ -54,19 +56,41 @@ class EchartsView extends Component {
                     <Echarts
                         key={hashcode(chartOption)}
                         option={chartOption}
-                        onEvents={drillable?this.onClickByModelEvents:null}
+                        events={drillable?this.getEvents:{}}
                     />
                 </Fragment>
             ) 
         }
     }
-    onByModelClick(e){
+
+    //加入事件
+    getEvents = {
+        'click': this.onEchartClick.bind(this)
+    }
+
+    onEchartClick(e,echart){
+        let index = -1;
+        //判断是否点击了图表
+        if( echart ){
+            const echartInstance = echart.getEchartsInstance();
+            const pointInPixel = [e.offsetX, e.offsetY];
+            if( echartInstance.containPixel('grid',pointInPixel) ){
+                //获取点击的X轴的索引
+                index = echartInstance.convertFromPixel({seriesIndex:0},pointInPixel)[0];
+            }else{
+                return false;
+            }
+        }
+        
         // 钻取（下钻）
         const { chartOption, dispatch, inDashBoard, item } = this.props;
         let { drillDown } = chartOption;
         const { baseOption } = chartOption;
         const { originConfig } = baseOption;
         const { drillList } = originConfig;
+        let xType = e.componentSubType || (baseOption.bar?'bar':null) || 
+                    (baseOption.line?'line':null) ||  (baseOption.pie?'pie':null);
+        let xValue = index>-1?baseOption.xAxis[0].data[index]:e.name;
         // 若下钻层级已到达钻取配置最后一层 提示信息
         if( drillList.length === drillDown.length ){
             message.warning('已经钻取到最后一层了！');
@@ -77,14 +101,14 @@ class EchartsView extends Component {
         //拿到当前层级的钻取配置
         let curDrill = drillList.slice(drillDown.length,drillDown.length+1)[0];
         //将本次钻取的数据加入drillDown中
-        switch(e.componentSubType){
+        switch(xType){
             case 'bar':{
                 drillDown.push({
                     label : curDrill.column.label,
                     field : curDrill.column.value,
                     type : curDrill.column.type,
-                    filter : this.getFilter(preDrill,e),
-                    value : e.name,
+                    filter : this.getFilter(preDrill,xValue),
+                    value : xValue,
                     showDataType : curDrill.column.type==='time'?curDrill.granularity.value:''
                 });
                 break;
@@ -94,15 +118,15 @@ class EchartsView extends Component {
                     label : curDrill.column.label,
                     field : curDrill.column.value,
                     type : curDrill.column.type,
-                    filter : this.getFilter(preDrill,e),
-                    value : e.name,
+                    filter : this.getFilter(preDrill,xValue),
+                    value : xValue,
                     showDataType : curDrill.column.type==='time'?curDrill.granularity.value:''
                 });
                 break;
             }
             case 'pie':{
                 //饼图如果是其它 并且tooMany(后台判断有 其他 部分) 为 true 时 不能下钻
-                if( e.name==='其它' && chartOption.baseOption.originConfig.tooMany ){
+                if( xValue==='其它' && chartOption.baseOption.originConfig.tooMany ){
                     message.warning('其它类型无法钻取');
                     return false;
                 }
@@ -110,8 +134,8 @@ class EchartsView extends Component {
                     label : curDrill.column.label,
                     field : curDrill.column.value,
                     type : curDrill.column.type,
-                    filter : this.getFilter(preDrill,e),
-                    value : e.name,
+                    filter : this.getFilter(preDrill,xValue),
+                    value : xValue,
                     showDataType : curDrill.column.type==='time'?curDrill.granularity.value:''
                 });
                 break;
@@ -147,21 +171,17 @@ class EchartsView extends Component {
         }
     }
 
-    onClickByModelEvents = {
-        'click': this.onByModelClick.bind(this)
-    }
-
-    getFilter(curDrill,e){
+    getFilter(curDrill,xValue){
         const { column } = curDrill;
-        if( e.name === '空'){
+        if( xValue === '空'){
             return {
                 name: column.value,
                 label: column.label,
                 type: column.type,
                 operator: 'isNull',
                 operatorLabel: '为空',
-                value1: e.name,
-                value2: e.name,
+                value1: xValue,
+                value2: xValue,
             }
         }
         switch(column.type){
@@ -172,14 +192,14 @@ class EchartsView extends Component {
                     type: column.type,
                     operator: '=',
                     operatorLabel: '等于',
-                    value1: e.name,
-                    value2: e.name,
+                    value1: xValue,
+                    value2: xValue,
                 }
             }
             case 'time':{
                 //解析时间
                 const { granularity } = curDrill;
-                let values = this.getTimeByType(granularity,e.name);
+                let values = this.getTimeByType(granularity,xValue);
                 return {
                     name: column.value,
                     label: column.label,

src/components/common/echarts/index.jsx

@@ -1,4 +1,5 @@
 import ReactEchartsCore from 'echarts-for-react/lib/core';
+import React, { Component } from 'react';
 import echarts from 'echarts/lib/echarts';
 import 'echarts/lib/chart/bar';
 import 'echarts/lib/chart/line';
@@ -10,12 +11,41 @@ import 'echarts/lib/component/legend';
 import 'echarts/lib/component/legendScroll';
 import 'echarts/lib/component/dataZoom';
 
-const Echarts = ({ option,onEvents }) => <ReactEchartsCore
-    echarts={echarts}
-    option={option}
-    onEvents={onEvents}
-    className='rc-echarts'
-    style={{height: '100%'}}
-/>
-
+class Echarts extends Component {
+    componentDidMount() {
+        const { events, option } = this.props;
+        const echart = this.echartsRef;
+        if( Object.keys(events).length>0 ){
+            for (let key in events) {
+                if( events[key] ){
+                    if( key==='click' ){
+                        //如果是饼图 作用域只在饼块上
+                        if( option.baseOption.pie ){
+                            echart.getEchartsInstance().on(key,events[key]) 
+                        }else{
+                            //下钻使用的点击事件 绑定在任意处
+                            echart.getEchartsInstance().getZr().on(key,function(e){
+                                events[key](e,echart);
+                            })
+                        }
+                    }else{
+                        echart.getEchartsInstance().on(key,events[key])
+                    }
+                }
+            }
+        }
+    }
+    render() { 
+        return ( 
+            <ReactEchartsCore
+                ref={node => this.echartsRef = node}
+                echarts={echarts}
+                option={this.props.option}
+                className='rc-echarts'
+                style={{height: '100%'}}
+            />
+        );
+    }
+}
+ 
 export default Echarts;

src/models/chartDesigner.js

@@ -409,9 +409,9 @@ export default {
                 if(viewType === 'bar') {
                     const { barConfig } = chartDesigner;
                     if(barConfig.xAxis.column.value && barConfig.yAxis.column.value &&
-                        barConfig.drillable?barConfig.drillList.filter(item=>{
+                        (barConfig.drillable?barConfig.drillList.filter(item=>{
                             return Object.keys(item.column).length===0
-                        }).length===0:true) {
+                        }).length===0:true)) {
                         //开启了钻取 并且钻取配置不能有空的配置 否则不显示图表    
                         yield put({ type: 'fetchBarData', drillDown });
                     }else {