react中,echarts渲染多个饼图,数据一样

react中,echarts渲染多个饼图,数据一样

最近在写一个echarts的pie图的需求, 需要展示成下面这样

但是在初始化过程中, 数据一直显示的是最后一组数据,

代码如下
这是父页面的数据

import React, { Component } from 'react'
import Pie from './pie'

class EchartsPie extends Component {
  state = { 
    data: [
      {
        mac1: '小米',
        evaluate: {
          evaluate1: 0,
          evaluate2: 10,
          evaluate3: 20,
          evaluate4: 30,
          evaluate5: 40,
          evaluate6: 50,
          evaluate7: 60,
        }
      },
      {
        mac1: '华为',
        evaluate: {
          evaluate1: 20,
          evaluate2: 10,
          evaluate3: 30,
          evaluate4: 60,
          evaluate5: 40,
          evaluate6: 30,
          evaluate7: 10,
        }
      },
      {
        mac1: 'iphone',
        evaluate: {
          evaluate1: 30,
          evaluate2: 10,
          evaluate3: 70,
          evaluate4: 40,
          evaluate5: 20,
          evaluate6: 10,
          evaluate7: 10,
        }
      },
      {
        mac1: 'vivo',
        evaluate: {
          evaluate1: 0,
          evaluate2: 10,
          evaluate3: 20,
          evaluate4: 30,
          evaluate5: 40,
          evaluate6: 50,
          evaluate7: 60,
        }
      },
      {
        mac1: 'oppo',
        evaluate: {
          evaluate1: 50,
          evaluate2: 60,
          evaluate3: 70,
          evaluate4: 20,
          evaluate5: 30,
          evaluate6: 40,
          evaluate7: 10,
        }
      },
      {
        mac1: '锤子',
        evaluate: {
          evaluate1: 10,
          evaluate2: 30,
          evaluate3: 74,
          evaluate4: 45,
          evaluate5: 23,
          evaluate6: 11,
          evaluate7: 12,
        }
      },
    ],
    dataOption: {
      color: ['red', 'blue', 'green', 'pink', 'orange', 'gary', 'yellow'],
      // title : {
      //     text: '某站点用户访问来源',
      //     subtext: '纯属虚构',
      //     x:'center'
      // },
      tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
      },
      series : [
          {
              name: '访问来源',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
                  {value:335, name:'直接访问'},
                  {value:310, name:'邮件营销'},
                  {value:234, name:'联盟广告'},
                  {value:135, name:'视频广告'},
                  {value:1548, name:'搜索引擎'}
              ],
              itemStyle: {
                  emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
    }
  }

  render() { 
    return (
      <div>
        <div style={{display:'flex'}}>
          {
            this.state.data.map((item, index) => {
              return <Pie key={index} data={this.state.data} index={index} dataOption={this.state.dataOption}></Pie>
            })
          }
        </div>
      </div>
      
    )
  }
}
 
export default EchartsPie;

这是子页面的引用

import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react'

class Pie extends Component {
  state = {
    
  }

  componentDidMount() {
    // this.getOption(this.state.data)
  }

  componentWillReceiveProps() {
    
  }

  getOption = () => {
    const data = this.props.data
    const index = this.props.index
    const dataOption = (this.props.dataOption)
    const evaluateData = data[index].evaluate
    dataOption.series[0].data = Object.keys(evaluateData).map(item => {
      return { name: item, value: evaluateData[item] }
    })
    dataOption.series[0].name = data[index].mac1
    return dataOption
  }

  render() { 
    // const { getOption, index } = this.props
    return (
      <ReactEcharts style={{width: '15%'}} option={this.getOption()}></ReactEcharts>
    );
  }
}
 
export default Pie;

进过认真的排查, 发现是对象引用的问题, 多个对象引用了同一个地址

解决方法是,将对象赋值的时候进行生拷贝下,就可以了

const dataOption = JSON.parse(JSON.stringify(this.props.dataOption))