echarts报表展示

总结了一下，echarts公共可配置x项和一些私有配置项，看代码做

let echarts = require('echarts/lib/echarts');
const draw={

//基础属性配置项公有
drawBase(currentAttr){
var base={};
return base={
title : {
           text: currentAttr.baseAttr.title,
           subtext:currentAttr.baseAttr.subTitle,
           x:'center'
       },
       backgroundColor:currentAttr.baseAttr.bgColor,
       textStyle:{
        color:currentAttr.baseAttr.color,
        fontStyle:currentAttr.baseAttr.style,
        fontWeight:currentAttr.baseAttr.weight,
        fontFamily:currentAttr.baseAttr.family,
        fontSize:currentAttr.baseAttr.size
       },
       color:currentAttr.styleAttr.color,
       calculable: false,
       toolbox: {
       show : currentAttr.toolAttr.isShow,
       feature : {
           dataView : {show:currentAttr.toolAttr.dataViewShow, readOnly: false},
           restore : {show: currentAttr.toolAttr.restoreShow},
           saveAsImage : {show: currentAttr.toolAttr.saveAsImageShow}
       }
   },
   legend:{
    show:currentAttr.lgendAttr.isShow,
    orient: currentAttr.lgendAttr.orient,
    x:currentAttr.lgendAttr.x+'px',
    y:currentAttr.lgendAttr.y+'px',
    data:currentAttr.lgendAttr.data
   },
   brush: {
       toolbox: currentAttr.toolAttr.brush,
       // ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
       xAxisIndex: 0
   }
}
},
setTooltip(currentAttr){
return  currentAttr.style.commonStyle.tooltip;
},
isDataZoom(currentAttr){
return currentAttr.style.commonStyle.dataZoom;
},
isMarkPoint(currentAttr){
var markPoint=null;
if(currentAttr.style.lineStyle.markPoint){
    markPoint=[{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]
    }
    return markPoint
},
isMarkLine(currentAttr){
var markLine=null;
if(currentAttr.style.lineStyle.markLine){
    markLine=[{type: 'average', name: '平均值'}]
    }
},
isSplitLine(isSplitLine){
if(isSplitLine=='noPlitLines'){
return [false,false]
}else if(isSplitLine=='yPlitLines'){
return [true,false]
}else if(isSplitLine=='xPlitLines'){
return [false,true]
}else{
return [true,true]
}
},
setVisualMap(currentAttr){
var visualMap={};
return visualMap={
show:currentAttr.mapAttr.isShow,
    dimension: 1,
       type: 'continuous',
       text: ['High','Low'],
       itemHeight: currentAttr.mapAttr.itemHeight,
       calculable: currentAttr.mapAttr.calculable,
       min: currentAttr.mapAttr.max,
       max: currentAttr.mapAttr.min,
       top: currentAttr.mapAttr.top,
       left: currentAttr.mapAttr.left,
       inRange: {
           colorLightness: currentAttr.mapAttr.colorLightness
       },
       outOfRange: {
           color: currentAttr.mapAttr.outOfRangeColor
       },
       controller: {
           inRange: {
               color: currentAttr.mapAttr.inRangeColor
           }
       }
}
},
isLineArea(type){
if(type='lineArea'){
return  {normal: {}};
}else{
return null
}
},
setSeries(currentAttr,type){

//判断是否为组合图
if(type.constructor != Array){
if(type=='bar'||type=='panel'){
var series=[]
       for(let key in currentAttr.data){
        series.push({
        name:key,
        type:type,
               data: currentAttr.data[key],
               stack:currentAttr.style.barStyle.stack,
               barWidth: currentAttr.style.barStyle.barWith,
        })
       }  
}else if(type=='line'||type=='lineArea'){
var series=[]
       for(let key in currentAttr.data){
        series.push({
        name:key,
        type:'line',
        areaStyle: this.isLineArea(type),
               smooth:currentAttr.style.lineStyle.smooth,
               step:currentAttr.style.lineStyle.step,
               data: currentAttr.data[key],
               markPoint:this.isMarkPoint(currentAttr),
               markLine:this.isMarkLine(currentAttr)
        })
       }
}else if(type=='scatter'){
var series=[]
for(let key in currentAttr.data){
        series.push({
        name:key,
        type:'scatter',
        symbolSize: function(data){
        if(currentAttr.style.scatterStyle.scatterType=='same'){
        return currentAttr.style.scatterStyle.size
        }else{      
        console.log(data)  
                          let size=data[1]/(currentAttr.style.scatterStyle.scale*5);
                           if(size<20){
                               size=20;
                           }
                           return size
        }
                        },


               data: currentAttr.data[key],
               markPoint:this.isMarkPoint(currentAttr),
               markLine:this.isMarkLine(currentAttr)
        })
       }
}
}else{
var series=[]
       for(let key in currentAttr.data){
        series.push({
        name:key,
        type:type[0],
               smooth:currentAttr.style.lineStyle.smooth,
               step:currentAttr.style.lineStyle.step,
               data: currentAttr.data[key],
               markPoint:this.isMarkPoint(currentAttr),
               markLine:this.isMarkLine(currentAttr)
        },{
        name:key,
        type:type[1],
               data: currentAttr.data[key],
               stack:currentAttr.style.barStyle.stack,
               barWidth: currentAttr.style.barStyle.barWith,
        })
       }  
}
        return series
},
drawPie(option,currentAttr){
   document.querySelector('.pieChart').style.height = 400 + 'px';
   document.querySelector('.pieChart').style.width = 100 + '%';
   var pieView =echarts.init(document.querySelector('.pieChart'));
   var baseObj=this.drawBase(currentAttr)    
   option = {
       ...baseObj,
       tooltip : {
           trigger: 'item',
           formatter: "{a} <br/>{b} : {c} ({d}%)"
       },
       series : [
           {
               name: '',
               type: 'pie',
               radius : '55%',
               center: ['50%', '60%'],
               data:currentAttr.data,
               itemStyle: {
                   emphasis: {
                       shadowBlur: 10,
                       shadowOffsetX: 0,
                       shadowColor: 'rgba(0, 0, 0, 0.5)'
                   }
               },
animationType:currentAttr.style.pieStyle.animationType,
roseType:currentAttr.style.pieStyle.roseType,
radius:[currentAttr.style.pieStyle.radius[0],currentAttr.style.pieStyle.radius[1]]
           },
       ]
   };
        return [pieView,option]
    },
    drawLine(option,currentAttr){
   document.querySelector('.lineChart').style.height = 400 + 'px';
   document.querySelector('.lineChart').style.width = 100 + '%';
   var pieView =echarts.init(document.querySelector('.lineChart'));
   var baseObj=this.drawBase(currentAttr)
   option = {
    ...baseObj,
   tooltip: this.setTooltip(currentAttr),
   visualMap: this.setVisualMap(currentAttr),
   xAxis:  {
        type : 'category',
name : currentAttr.style.commonStyle.xName,
                data :currentAttr.axis,
                splitLine:{
                show:this.isSplitLine(currentAttr.style.commonStyle.isSplitLine)[0]
                },
                axisTick: {
                    alignWithLabel: true
                }


   },
   yAxis: {
       type : 'value',
min:parseInt(currentAttr.style.commonStyle.min),
splitLine:{
                show:this.isSplitLine(currentAttr.style.commonStyle.isSplitLine)[1]
                },
name:currentAttr.style.commonStyle.yName


   },
   dataZoom:this.isDataZoom(currentAttr),
   series:this.setSeries(currentAttr,'line'),
   };
        return [pieView,option]
    },
    drawBar(option,currentAttr){
        document.querySelector('.barChart').style.height = 400 + 'px';
        document.querySelector('.barChart').style.width = 100 + '%';
        var pieView =echarts.init(document.querySelector('.barChart'));
        var baseObj=this.drawBase(currentAttr)
        option = {
        ...baseObj,
            tooltip :this.setTooltip(currentAttr),
   visualMap: this.setVisualMap(currentAttr),
            xAxis:  {
       type : 'category',
name : currentAttr.style.commonStyle.xName,
                data :currentAttr.axis,
                splitLine:{
                show:this.isSplitLine(currentAttr.style.commonStyle.isSplitLine)[0]
                },
                axisTick: {
                    alignWithLabel: true
                }


   },
   yAxis: {
       type : 'value',
       splitLine:{
                show:this.isSplitLine(currentAttr.style.commonStyle.isSplitLine)[1]
                },
min:parseInt(currentAttr.style.commonStyle.min),
name:currentAttr.style.commonStyle.yName


   },
   dataZoom:this.isDataZoom(currentAttr),
            series :this.setSeries(currentAttr,'bar'),
        };
        return [pieView,option]
    },
    drawPanel(option,currentAttr){
   document.querySelector('.panelChart').style.height = 400 + 'px';
   document.querySelector('.panelChart').style.width = 100 + '%';
   var pieView =echarts.init(document.querySelector('.panelChart'));
   var baseObj=this.drawBase(currentAttr)
   option = {
    ...baseObj,
    xAxis:  {         
    type : 'value',
    splitLine:{
                show:this.isSplitLine(currentAttr.style.commonStyle.isSplitLine)[0]
                },
min:parseInt(currentAttr.style.commonStyle.min),
name:currentAttr.style.commonStyle.xName
   },
   yAxis: {
    type : 'category',
    splitLine:{
                show:this.isSplitLine(currentAttr.style.commonStyle.isSplitLine)[1]
                },
name : currentAttr.style.commonStyle.yName,
                data :currentAttr.axis,
                axisTick: {
                    alignWithLabel: true
                }
   },
   tooltip:this.setTooltip(currentAttr),
   visualMap: this.setVisualMap(currentAttr,'bar'),
   dataZoom:this.isDataZoom(currentAttr),
   series:this.setSeries(currentAttr,'bar'),
};
        return [pieView,option]
    },
    drawGauge(option,currentAttr){
   document.querySelector('.gaugeChart').style.height = 400 + 'px';
   document.querySelector('.gaugeChart').style.width = 100 + '%';
   var pieView =echarts.init(document.querySelector('.gaugeChart'));   
   var baseObj=this.drawBase(currentAttr)
   option = {
    ...baseObj,
   tooltip : {
       formatter: "{a} <br/>{b} : {c}%"
   },
   series: [
       {
           name: name,
           type: 'gauge',
           detail: {formatter:'{value}%'},
data: currentAttr.data,
startAngle:currentAttr.style.gaugeType.startAngle,
endAngle:currentAttr.style.gaugeType.endAngle,
axisLine:{
lineStyle:{
color:[[currentAttr.style.gaugeType.axisLine.lineStyle.color[0][0], currentAttr.style.gaugeType.axisLine.lineStyle.color[0][1]], [currentAttr.style.gaugeType.axisLine.lineStyle.color[1][0], currentAttr.style.gaugeType.axisLine.lineStyle.color[1][1]], [currentAttr.style.gaugeType.axisLine.lineStyle.color[2][0], currentAttr.style.gaugeType.axisLine.lineStyle.color[2][1]]],
width:currentAttr.style.gaugeType.axisLine.lineStyle.width
}
},
axisTick:{
splitNumber:currentAttr.style.gaugeType.axisTick.splitNumber,
length:currentAttr.style.gaugeType.axisTick.length
},
axisLabel:{
distance:currentAttr.style.gaugeType.axisLabel.distance
},
splitNumber:currentAttr.style.gaugeType.splitNumber,
splitLine:{
length:currentAttr.style.gaugeType.splitLine.length
},
pointer:{
length:currentAttr.style.gaugeType.pointer.length,
width:currentAttr.style.gaugeType.pointer.width
},
radius:currentAttr.style.gaugeType.radius
       }
   ]
};
        return [pieView,option]
    },
    DrawLineArea(option,currentAttr){
   document.querySelector('.lineAreaChart').style.height = 400 + 'px';
   document.querySelector('.lineAreaChart').style.width = 100 + '%';
   var pieView =echarts.init(document.querySelector('.lineAreaChart'));
   var baseObj=this.drawBase(currentAttr)  
   option = {
    ...baseObj,
    tooltip:this.setTooltip(currentAttr),
   visualMap: this.setVisualMap(currentAttr),
  xAxis:  {
       type : 'category',
       splitLine:{
                show:this.isSplitLine(currentAttr.style.commonStyle.isSplitLine)[0]
                },
name : currentAttr.style.commonStyle.xName,
                data :currentAttr.axis,
                axisTick: {
                    alignWithLabel: true
                }


   },
   yAxis: {
       type : 'value',
       splitLine:{
                show:this.isSplitLine(currentAttr.style.commonStyle.isSplitLine)[1]
                },
min:parseInt(currentAttr.style.commonStyle.min),
name:currentAttr.style.commonStyle.yName


   },
   dataZoom:this.isDataZoom(currentAttr),
   series:this.setSeries(currentAttr,'lineArea'),
   };
        return [pieView,option]
    },
    drawScatter(option,currentAttr){
   document.querySelector('.scatterChart').style.height = 400 + 'px';
   document.querySelector('.scatterChart').style.width = 100 + '%';
   var pieView =echarts.init(document.querySelector('.scatterChart'));
   var baseObj=this.drawBase(currentAttr)    
   option = {
    ...baseObj,
   tooltip: this.setTooltip(currentAttr),
   visualMap:this.setVisualMap(currentAttr),
   xAxis:  {
       type : 'category',
       splitLine:{
                show:this.isSplitLine(currentAttr.style.commonStyle.isSplitLine)[0]
                },
name : currentAttr.style.commonStyle.xName,
                data :currentAttr.axis,
                axisTick: {
                    alignWithLabel: true
                }


   },
   yAxis: {
       type : 'value',
       splitLine:{
                show:this.isSplitLine(currentAttr.style.commonStyle.isSplitLine)[1]
                },
min:parseInt(currentAttr.style.commonStyle.min),
name:currentAttr.style.commonStyle.yName


   },
   dataZoom:this.isDataZoom(currentAttr),
   series:this.setSeries(currentAttr,'scatter'),
   };
        return [pieView,option]
    },
    drawBarLine(option,currentAttr){
        document.querySelector('.barLineChart').style.height = 400 + 'px';
        document.querySelector('.barLineChart').style.width = 100 + '%';
        var pieView =echarts.init(document.querySelector('.barLineChart'));
        var baseObj=this.drawBase(currentAttr)   
        option = {
        ...baseObj,
            tooltip:this.setTooltip(currentAttr),
   visualMap: this.setVisualMap(currentAttr),
           xAxis:  {
       type : 'category',
       splitLine:{
                show:this.isSplitLine(currentAttr.style.commonStyle.isSplitLine)[0]
                },
name : currentAttr.style.commonStyle.xName,
                data :currentAttr.axis,
                axisTick: {
                    alignWithLabel: true
                }


   },
   yAxis: {
       type : 'value',
       splitLine:{
                show:this.isSplitLine(currentAttr.style.commonStyle.isSplitLine)[1]
                },
min:parseInt(currentAttr.style.commonStyle.min),
name:currentAttr.style.commonStyle.yName


   },
   dataZoom:this.isDataZoom(currentAttr),
            series:this.setSeries(currentAttr,['line','bar']),
        };
        return [pieView,option]
    }
}
export default draw