图表图例修改

src/components/AssessResult/ChartItem/index.jsx

@@ -81,17 +81,28 @@ class ChartItem extends Component {
     }
     handleChange&&handleChange(Object.assign(temp,{[i]:type}));
   }
-  getContainers(){
+  getContainers(obj){
     const timeTypes = this.props.timeTypes;
-    const range = this.getXAxisArr(config.chartDismen);
-    const obj = this.props.data[range[0]+range[range.length-1]];
     const {endDate} = this.props;
-    let arr = [];
+    let len = 1,idx=0;    //单个图表第一条线的在所有线中的index,用于显示不同的形状，打印使用
+    let arr = [],keys = Object.keys(obj||{});
     for(let i in obj){
-      arr.push(<Chart data={obj[i]} endDate={endDate} type={timeTypes&&timeTypes[i]} index={i} getXAxisArr={this.getXAxisArr} handleRangeChange={this.rangChange}/>)
+      idx = keys.findIndex((t)=>{return t==i});
+      len = idx==0?0:len+obj[keys[idx-1]].length;
+      arr.push(<Chart data={obj[i]} len={len} endDate={endDate} type={timeTypes&&timeTypes[i]} index={i} getXAxisArr={this.getXAxisArr} handleRangeChange={this.rangChange}/>)
     }
     return arr.length>0?arr:<p style={{color:'#acacac'}}>该模块暂无数据</p>;
   }
+  getLegends(obj){
+    let arr = [],temp='',doms=[];
+    for(let i in obj){
+      arr = [...arr,...obj[i]];
+    }
+    arr.map((it,ix)=>{
+      doms.push(<div><img src={require('@common/images/'+(ix+1)+'.png')} /><span>{it}</span></div>);
+    });
+    return doms;
+  }
   componentDidMount(){
     const {initFn,pindex} = this.props;
     const type = config.chartDismen;
@@ -102,11 +113,17 @@ class ChartItem extends Component {
     initFn&&initFn({range,rangeType:type,pindex,getNew:true});
   }
   render() {
-    const {title} = this.props;
+    const {title,data,names} = this.props;
+    const range = this.getXAxisArr(config.chartDismen);
+    const obj = data[range[0]+range[range.length-1]];
+    const nameObj = names[range[0]+range[range.length-1]];
     return <div className={style['assess-item']}>
       <h2>{title}</h2>
+      <div className={style['legend']}>
+        {this.getLegends(nameObj)}
+      </div>
       <div className={style['item-content']}>
-        {this.getContainers()}
+        {this.getContainers(obj)}
       </div>
     </div>;
   }
@@ -127,7 +144,7 @@ class Chart extends Component{
     this.timeSwitch = this.timeSwitch.bind(this);
   }
   drawChart(){
-    const {index,data,getXAxisArr,type,endDate} = this.props;
+    const {index,data,getXAxisArr,type,endDate,len} = this.props;
     const xAxis = getXAxisArr(type);
     const id = endDate?'chart'+endDate+index:'chart'+index;
     let series = [],names=[],inx=-1;
@@ -139,7 +156,6 @@ class Chart extends Component{
       sixMonth:9,
       year:60
     };
-
     data&&data.map((it,j)=>{
       let values=new Array();
       let name='';
@@ -161,10 +177,10 @@ class Chart extends Component{
         type: 'line',
         data: values,
         showAllSymbol:true,
-        symbol:config.chartSymbols[j%7],
+        symbol:config.chartSymbols[(len+j)%8],
         symbolSize:7,
         itemStyle:{
-          color:config.chartColors[j%7]
+          color:config.chartColors[(len+j)%8]
         }
       });
     });

src/components/AssessResult/index.jsx

@@ -80,7 +80,7 @@ class AssessResult extends Component {
   }
   handoutTypes(item,i){
     const {getIndexData,indexData,timeTypes,wholeIndexs,closeAssess,showScaleFn,calcuFormula,isRecommend,chronicPushItems,
-      formulaResult,calcuResult,calcuValues} =this.props;
+      formulaResult,calcuResult,calcuValues,indexNames} =this.props;
     let obj = [];
     Object.keys(wholeIndexs).map((i)=>{
       obj[i]=chronicPushItems[i];
@@ -113,8 +113,10 @@ class AssessResult extends Component {
                            handleChange={this.handleChooseChange.bind(this,i)}
                            selecteds={chooseSelecteds[i]||{}} ></ChooseItem>;
       case 10:   //数据来源于后台
+        console.log(indexData)
         return <ChartItem title={name}
                           data={chartData||{}}
+                          names={indexNames||{}}
                           timeTypes={JSON.stringify(chartTimeTypes)=='{}'?timeTypes&&timeTypes[i]:chartTimeTypes[i]}
                           pindex={i}
                           initFn={getIndexData}

src/components/AssessResult/index.less

@@ -168,6 +168,22 @@
   border-radius: 4px;
   padding: 5px;
 }
+.legend{
+  padding: 0 36px;
+  margin-bottom: 15px;
+  &>div{
+    display: inline-block;
+    margin-top: 10px;
+  }
+  span{
+    margin-right: 20px;
+  }
+  img{
+    vertical-align: middle;
+    width: 18px;
+    margin-right: 3px;
+  }
+}
 @media print {
   .printShow,.textareaStatic {
     display: block;

src/containers/AssessResult.js

@@ -23,6 +23,7 @@ function mapStateToProps(state) {
   return {
     data:assessResult.data,
     indexData:assessResult.indexData,
+    indexNames:assessResult.indexNames,
     update:assessResult.update,     //评估数据更新
     update1:assessResult.update1,       //加入记录更新
     timeTypes:assessResult.indexTimeTypes,    //图表切换的维度
@@ -106,7 +107,7 @@ function parseChartData(indexData){
     nameObj[temp.indexDesc]=[...nameArr,it.itemName];
   });
   //nameObj,obj;
-  return obj;
+  return {nameObj,obj};
 }
 const AssessResultContainer = connect(mapStateToProps, mapDispatchToProps)(AssessResult);
 

src/store/reducers/assessResult.js

@@ -5,6 +5,7 @@ import config from "@config";
 const init = {
   data:[],        //评估模块数据
   indexData:{},     //评估图表数据
+  indexNames:{},
   indexTimeTypes:{},    //单个图表选中的维度
   wholeAssess:[],     //整体评估数据
   wholeIndexs:{},     //已加入的评估数据的index,加入按钮状态用
@@ -24,8 +25,9 @@ export default (state=init,action)=>{
       res.data = action.data;
       return res;
     case SET_INDEX_DATA:
-      res.indexData[range[0]+range[1]] = data;
-      Object.keys(data).map((i)=>{
+      res.indexData[range[0]+range[1]] = data.obj;
+      res.indexNames[range[0]+range[1]] = data.nameObj;
+      Object.keys(data.obj).map((i)=>{
         if(getNew){
           res.indexTimeTypes[pindex]=Object.assign({},res.indexTimeTypes[pindex],{[i]:config.chartDismen});
         }else{