react+amcharts5柱状图demo

1.npm下载amcharts5并引入项目（amcharts5官网JavaScript charting library - amCharts 4）

2.新建js文件

        修改样式比较麻烦，可以在官方案列中找需要的属性或者样式然后修改

import React, { Component } from 'react';
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";


class App extends Component {
    componentDidMount() {

        let root = am5.Root.new("chartdiv");

        root.setThemes([
            am5themes_Animated.new(root)
        ]);



        let chart = root.container.children.push(
            am5xy.XYChart.new(root, {
                panY: false,

                wheelY: "zoomX",
                height: 600,
                y: 50,
                layout: root.verticalLayout
            })
        );
        chart.children.push(
            am5.Label.new(root, {
                text: 'am5charts',
                fontSize: '30px',
                fill: 'red',
                y: -50,
                x: am5.percent(50),
                centerX: am5.percent(50)
            })
        )


        // Define data
        let data = [{
            category: "Research",
            value1: 1000,
            value2: 588
        }, {
            category: "Marketing",
            value1: 1200,
            value2: 1800
        }, {
            category: "Sales",
            value1: 850,
            value2: 1230
        }];

        // Create Y-axis
        let yAxis = chart.yAxes.push(
            am5xy.ValueAxis.new(root, {
                renderer: am5xy.AxisRendererY.new(root, {}),
                // tooltip: am5.Tooltip.new(root, {})

            })
        );
        yAxis.get("renderer").labels.template.setAll({
            fontSize: '20px',
            fill: 'skyblue',
        })

        chart.children.push(am5.Label.new(root, {
            text: 'number',
            fill: 'green',
            fontSize: '20px',
            rotation: -90,
            y: am5.percent(35),
            centerY: am5.percent(90)
        }))

        // Create X-Axis
        let xAxis = chart.xAxes.push(
            am5xy.CategoryAxis.new(root, {
                renderer: am5xy.AxisRendererX.new(root, {}),
                categoryField: "category",
                // tooltip: am5.Tooltip.new(root, {})
            })
        );
        xAxis.data.setAll(data);
        xAxis.get("renderer").labels.template.setAll({
            fontSize: '20px',
            fill: 'pink',
        })
        chart.children.push(am5.Label.new(root, {
            text: 'type',
            fill: 'green',
            fontSize: '20px',
            x: am5.percent(50),
            y: am5.percent(60),
        }))

        // Create series
        let series1 = chart.series.push(
            am5xy.ColumnSeries.new(root, {
                name: "Series",
                xAxis: xAxis,
                yAxis: yAxis,
                valueYField: "value1",
                categoryXField: "category",
                tooltip: am5.Tooltip.new(root, {})

            })
        );
        series1.data.setAll(data);
        series1.columns.template.setAll({
            tooltipText: "{name},{category}:{valueY}",
            width: am5.percent(60),
            tooltipY: 0
        })

        let series2 = chart.series.push(
            am5xy.ColumnSeries.new(root, {
                name: "Series",
                xAxis: xAxis,
                yAxis: yAxis,
                valueYField: "value2",
                categoryXField: "category",
                tooltip: am5.Tooltip.new(root, {})

            })
        );
        series2.data.setAll(data);
        series2.columns.template.setAll({
            tooltipText: "{name},{category}:{valueY}",
            width: am5.percent(60),
            tooltipY: 0
        })


        // Add legend
        let legend = chart.children.push(am5.Legend.new(root, {
            y: am5.percent(68),
            x: am5.percent(40)
        }));
        legend.data.setAll(chart.series.values);

        // Add cursor
        let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));




        // let series = chart.series.push(am5xy.ColumnSeries.new(root, {
        //     name: "Series",
        //     xAxis: xAxis,
        //     yAxis: yAxis,
        //     valueYField: "value",
        //     valueXField: "date",
        //     tooltip: am5.Tooltip.new(root, {
        //         labelText: "{valueY}"
        //     })
        // }));
        // series.data.setAll(data);    
        // series.appear(1000)   

        this.root = root;

    }

    componentWillUnmount() {
        if (this.root) {
            this.root.dispose();
        }
    }

    render() {
        return (
            <div id="chartdiv" style={{ width: "800px", height: "650px", margin: "120px auto" }}></div>
        );
    }
}

export default App;

3.注释的let series和xy轴部分的tooltip是鼠标悬浮显示数据的另一种样式

4.目前还没找到去除logo的办法

5.效果图：

                 注释的鼠标悬浮另一种样式：