react中,echarts渲染多个饼图,数据一样_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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

这是子页面的引用

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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

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

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