intimate_view/src/ChartsCount.js

import React from 'react';
import ReactEcharts from 'echarts-for-react';
import apihost from './Var.js';
import { Row, Col, Button, Divider } from 'antd';

function parseData(cw = {}) {

    var legendData = [];
    var seriesData = [];
    var selected = {};

    if (cw == null) {
        seriesData.push({ name: "没有数据", value: 1 })
        legendData.push(seriesData[0].name)
        selected[seriesData[0].name] = true;
        return { legendData: legendData, seriesData: seriesData, selected: 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 (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, title } = state;
    const option = {
        title: {
            text: `${platform}${title}`,
            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 {
    
    constructor(props) {
        super(props)
        this.state = {
            option: {},
            platform: this.props.platform,
            data: {},
            countkey: "count",
            title: "与数量关系",
        }
      }

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

    updateData = () => {
        const { countkey, platform } = this.state;
        fetch(`${apihost}/tag/count?platform=${platform}&countkey=${countkey}`, {
            "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();
    }

    countMethod(countkey, title) {
        this.setState({ countkey: countkey, title: title }, () => { this.updateData() });
    }

    render() {
        return (
            <div style={{ padding: 24, background: '#fff', minHeight: 780 }} >
                <div>
                    <Row justify="start" gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                        <Col span={4}> <Button type="primary" onClick={(e) => { this.countMethod("count", e.target.innerText) }} >与数量关系</Button> </Col>
                        <Col span={4}> <Button type="primary" onClick={(e) => { this.countMethod("followers", e.target.innerText) }}>与关注关系</Button> </Col>
                        <Col span={4}> <Button type="primary" onClick={(e) => { this.countMethod("gratuity", e.target.innerText) }} >与赏币关系</Button> </Col>
                    </Row>
                </div>
                <Divider />
                <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;