intimate_view/src/ChartsCount.js

import React from 'react';
import ReactEcharts from 'echarts-for-react';
import apihost from './Var.js';

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 (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(`${apihost}/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;