最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】ReactJS中ECharts中水平柱状图中第一列的提示内容显示多余内容

ECharts crifan 401浏览 0评论

在ReactJS调试ECharts期间,遇到一个诡异的现象:

同样的配置代码:

    // continue to update by model and by consultant
    this.processNewAddByModelDict(resultDict, ”);
    this.processNewAddByConsultantDict(resultDict, ‘’);
  processNewAddByModelDict(resultDict, filteredDataName) {
    console.log(‘processNewAddByModelDict: resultDict=’, resultDict,
      ‘ ,filteredDataName=’, filteredDataName
    );
    let newNewAddByModelDict = this.state.newAddByModelDict;
    let carModelNameList = [];
    let carModelNumList = [];
    let carModalInfoDictList = resultDict.hopeNumByCarList;
    carModalInfoDictList.map((eachDict) => {
      let curName = eachDict.NAME;
      carModelNameList.push(curName);
      let curNum = eachDict.CUS_NUM;
      carModelNumList.push(curNum);
    });
    console.log(‘filteredDataName=’, filteredDataName,
      ‘ ,carModelNameList=’, carModelNameList,
      ‘ ,carModelNumList=’, carModelNumList
    );
    let curEchartsOption = this.generateNewAddByModelEchartsOption(
      filteredDataName,
      carModelNameList,
      carModelNumList
    );
    newNewAddByModelDict.echartsOption = curEchartsOption;
    this.setState({
      newAddByModelDict : newNewAddByModelDict
    });
  }
  generateNewAddByModelEchartsOption(
    filteredDataName = ”,
    carModelNameList = [],
    carModelNumList = []
  ){
    console.log(‘generateNewAddByModelEchartsOption: filteredDataName=’, filteredDataName,
      ‘ ,carModelNameList=’, carModelNameList,
      ‘ ,carModelNumList=’, carModelNumList,
    );
    let curEchartsOption = {
            title : {
        // text:’本月新增有望客户分类(按车型分)’,
        text: ”,
        // textStyle: {
        //     fontWeight: ‘normal’,
        //     fontSize: ’14’
        // },
        // subtext:datName,
        // subtext: ‘DCC’,
        subtext: filteredDataName,
        subtextStyle: {
          fontWeight: ‘normal’,
          fontSize: ’14’,
          color: ‘red’
        },
        top: 10,
        left: 10
      },
      tooltip: {
        trigger: ‘axis’
        // trigger: ‘item’
      },
      // toolbox: {
      //     feature: {
      //         dataView: {show: false, readOnly: true},
      //         magicType: {show: false, type: [‘bar’]},
      //         restore: {show: false},
      //         saveAsImage: {show: false}
      //     }
      // },
      legend: {
        left: ‘65%’,
        // top: 33,
        top: 10,
        data: [‘新增有望客户’]
      },
      grid: {
        bottom: 80
      },
      xAxis: [
        {
          type: ‘category’,
          axisLabel: {
            interval: 0,
            rotate: 60
          },
          // data:hopeNameArr
          // data: [‘Yeti野帝’, ‘SK’, ‘全新晶锐’, ‘明锐旅行车’, ‘2017款昕锐’, ‘2017款明锐’, ‘明锐经典款’, ‘2017款昕动’, ‘Yeti’],
          data: carModelNameList,
        }
      ],
      yAxis: [
        {
          type: ‘value’,
          min: 0,
          //max: 200,
          // interval: 30,
          axisLabel: {
            formatter: ‘{value}’
          }
        }
      ],
      series: [
        {
          name: ‘新增有望客户’,
          type: ‘bar’,
          // barWidth: 20,//柱图宽度
          barWidth: ‘50%’,
          label: {
            normal: {
              show: true,
              color: ‘red’,
              position: ‘top’,
              textStyle: {
                color: ‘black’,
                fontFamily: ‘verdana’,
                fontSize: 12,
                fontStyle: ‘normal’
              }
            }
          },
          itemStyle: {
            // normal:{color:’#C0DDAD’ }
            // normal:{color:’#3398DB’ }
            normal: {
              color: ValueColor.DARK_BLUE
            }
          },
          // data:hopeNameArrNum
          // data: [9, 26, 10, 1, 2, 37, 27, 1, 1]
          data: carModelNumList
        }
      ]
    };
    
    return curEchartsOption;
  }
  processNewAddByConsultantDict(resultDict, filteredDataName) {
    console.log(‘processNewAddByConsultantDict: resultDict=’, resultDict,
      ‘ ,filteredDataName=’, filteredDataName
    );
    let newDict = this.state.newAddByConsultantDict;
    let consultantNameList = [];
    let consultantNumList = [];
    let consultantPercentList = [];
    
    let consultantInfoDictList = resultDict.hopeCoseList;
    consultantInfoDictList.map((eachDict) => {
      let curName = eachDict.USER_NAME;
      consultantNameList.push(curName);
      let curNum = eachDict.HOPE_NUM;
      consultantNumList.push(curNum);
      let curPercent = eachDict.HOPE_PRECENT;
      consultantPercentList.push(curPercent);
    });
    console.log(‘filteredDataName=’, filteredDataName,
      ‘ ,consultantNameList=’, consultantNameList,
      ‘ ,consultantNumList=’, consultantNumList,
      ‘ ,consultantPercentList=’, consultantPercentList,
    );
    let curEchartsOption = this.generateNewAddByConsultantEchartsOption(
      filteredDataName,
      consultantNameList,
      consultantNumList,
      consultantPercentList
    );
    newDict.echartsOption = curEchartsOption;
    this.setState({
      newAddByConsultantDict : newDict
    });
  }
  generateNewAddByConsultantEchartsOption(
    filteredDataName = ”,
    consultantNameList = [],
    consultantNumList = [],
    consultantPercentList = [],
  ){
    console.log(‘generateNewAddByConsultantEchartsOption: filteredDataName=’, filteredDataName,
      ‘ ,consultantNameList=’, consultantNameList,
      ‘ ,consultantNumList=’, consultantNumList,
      ‘ ,consultantPercentList=’, consultantPercentList,
    );
    let curEchartsOption = {
            title : {
        // text: ‘本月新增有望客户分类(按销售顾问分)’,
        text: ”,
        textStyle: {
          fontWeight: ‘normal’,
          fontSize: ’14’
        },
        // subtext: names,
        // subtext: ‘DCC’,
        subtext: filteredDataName,
        subtextStyle: {
          fontWeight: ‘normal’,
          fontSize: ’14’,
          color: ‘red’
        },
        top: 10,
        left: 40
      },
      tooltip: {
        trigger: ‘axis’,
        // trigger: ‘item’,
      },
      grid:{
        bottom: 80
      },
      toolbox: {
        feature: {
          dataView: {
            show: false,
            readOnly: false
          },
          magicType: {
            show: false,
            type: [‘line’, ‘bar’]
          },
          restore: {
            show: false
          }, //重置
          saveAsImage: {
            show: false
          } //保存图片
        }
      },
      legend: {
        left: ‘right’,
        //orient : ‘vertical’,
        //align:’left’,
        // top: 33,
        top: 10,
        data: [ ‘有望客户’,’有望目标完成率’ ]
      },
      xAxis: [
        {
          axisLabel: {
            interval: 0,
            rotate: 60
          },
          type: ‘category’,
          // data: hopeCoseNameArr
          // data: [0, 89]
          // data: [‘吴兆军’, ‘洪嘉盛’]
          data: consultantNameList
        }
      ],
      yAxis: [
        {
          type: ‘value’,
          min: 0,
          //interval: 4,
          axisLabel: {
            formatter: ‘{value} ‘
          }
        },
        {
          type: ‘value’,
          name: ”,
          min: 0,
          //interval 间隔值
          //interval: 20,
          axisLabel: {
            formatter: ‘{value} %’
          }
        }
      ],
      series: [
        {
          name: ‘有望目标完成率’,
          type: ‘line’,
          yAxisIndex: 1,
          label: {
            normal: {
              show: true,
              color: ‘red’,
              // color: ValueColor.GREEN,
              position: ‘top’,
              formatter: ‘{c}%’,
              textStyle: {
                color: ‘black’,
                fontSize: 12,
                fontStyle: ‘normal’
              }
            }
          },
          itemStyle: {
            normal: {
              // color: ‘#70AD47’
              color: ValueColor.GREEN
            }
          },
          // data: hopeCosePrecentArr
          // data: [2, 8]
          data: consultantPercentList
        },
        {
          name: ‘有望客户’,
          type: ‘bar’,
          // barWidth : 20,//柱图宽度
          barWidth : ‘30%’,
          label: {
            normal: {
              show: true,
              // color: ‘red’,
              color: ValueColor.GREEN,
              position: ‘inside’,
              textStyle: {
                color: ‘black’,
                fontFamily: ‘verdana’,
                fontSize: 12,
                fontStyle: ‘normal’
              }
            }
          },
          itemStyle: {
            normal: {
              // color: ‘#70AD47’
              color: ValueColor.DARK_BLUE
            }
          },
          // data: hopeCoseNumArr
          // data: [26, 89]
          data: consultantNumList
        }
      ]
    };
    
    return curEchartsOption;
  }
  render() {
    console.log(`ProspectMonitor render`);
    return (
。。。
                  <div className=”chart”>
                    <ReactEcharts
                      option={this.state.newAddByModelDict.echartsOption}
                      onEvents={this.onClickByModelEvents}
                    />
                  </div>
。。。
                  <div className=”chart”>
                    <ReactEcharts
                      option={this.state.newAddByConsultantDict.echartsOption}
                      onEvents={this.onClickByModelEvents}
                    />
                  </div>
。。。

但是显示出来的效果却是:

第一列中的提示内容中诡异的多出了一些内容:

而其它列,则没有多余的内容,显示是正常的:

而别人的同样的ECharts的配置中,却没有此问题:

然后去调试找原因。

把generateNewAddByModelEchartsOption中去掉了legend的data:

      legend: {
        left: ‘65%’,
        // top: 33,
        top: 10,
        // data: [‘新增有望客户’]
      },

结果:

原先问题依旧,但更多出了legend的更多图例:

更加诡异了。

调试到最后,终于找到原因了:

是最开始的时候,为了不让newAddByModelDict和newAddByConsultantDict的echartsOption不为null,不会导致ECharts显示异常,所以当时初始化时,给了这2个option都是,前面一个表的option的默认空值:

export default class ProspectMonitor extends Component {
  state = {
。。。
    completeProgressDict : {
      title: ”,
      boxType : ‘box-primary’,
      isFiltered: false,
      monthTarget: 0,
      monthCompleted: 0,
      completePercent: 0,
      // echartsOption: null
      echartsOption: this.generateCompleteProgressEchartsOption()
    },
    newAddByModelDict : {
      title: ‘本月新增有望客户分类(按车型分)’,
      boxType : ‘box-success’,
      isFiltered: false,
      // legendTitleList: [‘新增有望客户’],
      // echartsOption: null
      echartsOption: this.generateCompleteProgressEchartsOption()
    },
    newAddByConsultantDict : {
      title: ‘本月新增有望客户分类(按销售顾问分)’,
      boxType : ‘box-danger’,
      isFiltered: false,
      // legendTitleList: [‘有望客户’, ‘有望目标完成率’],
      // echartsOption: null
      echartsOption: this.generateCompleteProgressEchartsOption()
    }
  };

而其中有一堆的DCC,电话等图例:

  generateCompleteProgressEchartsOption(
    completePercent = 0,
    percentColor = COMPLETE_COLOR.NORMAL,
    dccNum = 0,
    telNum = 0,
    intoShopNum = 0,
    outExpandNum = 0,
    secondaryNetNum = 0,
    lackNum = 0,
  ){
    console.log(‘generateCompleteProgressEchartsOption: completePercent=’, completePercent,
      ‘ ,percentColor=’, percentColor,
      ‘ ,dccNum=’, dccNum,
      ‘ ,telNum=’, telNum,
      ‘ ,intoShopNum=’, intoShopNum,
      ‘ ,outExpandNum=’, outExpandNum,
      ‘ ,secondaryNetNum=’, secondaryNetNum,
      ‘ ,lackNum=’, lackNum,
    );
    let curEchartsOption = {
      title: {
        show: true,
        text: `${completePercent}%`,
        textStyle: {
          color: percentColor,
          align: ‘right’,
          verticalAlign: ‘middle’
        },
        left: ‘right’,
        top: ‘middle’,
      },
      tooltip : {
        trigger: ‘item’
      },
      legend: {
        show: true,
        x: ‘center’,
        y: ‘bottom’,
        // bottom: -5,
        bottom: 5,
        data: [
          ‘DCC’,
          ‘电话’,
          ‘进店’,
          ‘外拓’,
          ‘二级网点’,
          ‘缺口’
        ]
      },
      xAxis:  {
        show: false,
        type: ‘value’
      },
      yAxis: {
        show: false,
        type: ‘category’
      },
      series:
      [
        {
          name: ‘DCC’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: true,
              position: ‘inside’
            }
          },
          itemStyle: {
            normal: {
              color: ValueColor.DARK_BLUE
            }
          },
          data: [dccNum]
        },
        {
          name: ‘电话’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: true,
              position: ‘inside’
            }
          },
          itemStyle: {
            normal: {
              color: ValueColor.GREEN
            }
          },
          data: [telNum]
        },
        {
          name: ‘进店’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: true,
              position: ‘inside’
            }
          },
          itemStyle: {
            normal: {
              color: ValueColor.YELLOW
            }
          },
          data: [intoShopNum]
        },
        {
          name: ‘外拓’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: true,
              position: ‘inside’
            }
          },
          itemStyle: {
            normal: {
              color: ValueColor.LIGHT_BLUE
            }
          },
          data: [outExpandNum]
        },
        {
          name: ‘二级网点’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: true,
              position: ‘inside’
            }
          },
          itemStyle: {
            normal: {
              color: ValueColor.GRAY
            }
          },
          data: [secondaryNetNum]
        },
        {
          name: ‘缺口’,
          type: ‘bar’,
          stack: ‘总量’,
          label: {
            normal: {
              show: true,
              position: ‘inside’
            }
          },
          itemStyle: {
            normal: {
              color: ValueColor.RED
            }
          },
          data: [lackNum]
        }
      ]
    };
    return curEchartsOption;
  }

然后,即使后序,用:

    this.setState({
      newAddByModelDict : newNewAddByModelDict
    });
    this.setState({
      newAddByConsultantDict : newDict
    });

已经彻底更新掉了ECharts的option,但是也会导致:

之前最开始赋值的option中,部分内容竟然是残留了下来,导致后序的Eharts的渲染出现多余的内容。

改为,同一类的表的空的配置:

    newAddByModelDict : {
      title: ‘本月新增有望客户分类(按车型分)’,
      boxType : ‘box-success’,
      isFiltered: false,
      // legendTitleList: [‘新增有望客户’],
      // echartsOption: null
      // echartsOption: this.generateCompleteProgressEchartsOption()
      echartsOption: this.generateNewAddByModelEchartsOption()
    },
    newAddByConsultantDict : {
      title: ‘本月新增有望客户分类(按销售顾问分)’,
      boxType : ‘box-danger’,
      isFiltered: false,
      // legendTitleList: [‘有望客户’, ‘有望目标完成率’],
      // echartsOption: null
      echartsOption: this.generateCompleteProgressEchartsOption()
      // echartsOption: this.generateNewAddByConsultantEchartsOption()
    }

即可正常显示了:

【总结】

此处问题的原因找到了:

感觉应该算是ECharts的bug:

最开始初始化时,设置了一个空的配置(但是是属于另外一种类型,比如时二维数组的柱状图)

然后后序更新option配置为另外一个配置,比如一位数组的柱状图

结果会导致,一位数组中的第一列中的tooltip提示内容中,会显示出原先二维数组的图例的内容。

希望ECharts可以以后可以解决这个bug。

其中,此处的ECharts的版本是:

ReactJS中用到的:

import ReactEcharts from ‘echarts-for-react’;

版本是:

“echarts-for-react”: “^1.4.4”,

其中用到的ECharts,应该是3.x的版本。

转载请注明:在路上 » 【已解决】ReactJS中ECharts中水平柱状图中第一列的提示内容显示多余内容

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
62 queries in 0.148 seconds, using 18.93MB memory