intimate_view/src/ChartsCount.js

import React from 'react';
import ReactEcharts from 'echarts-for-react';

function parseData(cw={}) { 
    var legendData = [];
    var seriesData = [];
    var selected = {};

    for(var i =0; i < cw.length ; i++){       
        // legendData.push(name);
        var taginfo = cw[i]; 
        seriesData.push({
            name: taginfo.Name,
            value: taginfo.Value
        })
        selected[taginfo.Name] = false;
     } 

      
     seriesData.sort((a, b) => {
        return b.value - a.value
     })

     for(var i = 0;  i < seriesData.length ; i ++) {
        var o = seriesData[i];
        legendData.push(o.name);
        selected[o.name] = i <= 20;
     }

    return { legendData: legendData, seriesData: seriesData, selected:selected }
}

function getOption(state={}) { 
    const { platform, data } = state;
    const option = {
        title: {
            text: `${platform}同名数量统计`,
            subtext: '数据最新仅供参考',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10, 
            top: 10,
            bottom: 10,
            data: data.legendData,
            selected: data.selected
        },
        series: [
            {
                name: '标签',
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                data: data.seriesData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ],
    };
    return option;
}

class ChartsCount  extends React.Component {

    state = {
        option: {},
        platform: this.props.platform,
        data: {}
    }

    changePlatform = (p) => {
        this.setState({platform: p}, ()=>{
            this.updateData();
        } );
    };

    

    updateData = () => {
    
        const { platform } = this.state;
        fetch(`http://192.168.16.130:5500/tag/count?platform=${platform}`, {
            "mode": "cors"
        }).then(
            response => {
                response.json().then( value => {

                    this.setState({
                        data: parseData(value)
                      },  ()=> {
                 
                        var ins = this.echarts_react.getEchartsInstance();
                        ins.setOption( getOption(this.state) );

                      });

                } );
            }
        )
     };

      componentDidMount() {
        this.updateData();
      }

    render() {
        return ( <div style={{ padding: 24, background: '#fff', minHeight: 780 }} >
                    <ReactEcharts 
                        notMerge={true}
                        ref={(e) => { this.echarts_react = e; }}
                        option={ getOption(this.state)}
                        style={{height: '600px', width: '100%'}}
                    className='react_for_echarts' />
                    
                    </div>
        );
    }
};

export default ChartsCount;