react使用Echarts（React）

除了 Echarts 自身外，我们还可以搭配 echarts-for-react 插件来一起实现数据可视化渲染。

一、下载

yarn add echarts echarts-for-react

二、使用

1、引入依赖包

import ReactEcharts from 'echarts-for-react';

2、绘制图表

export default class Payment extends Component {
    state = {
        option: {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        }
    }

    render() {
        const { option } = this.state;
        return (
            <ReactEcharts option={option1} style={{ width: 400, height: 300 }}></ReactEcharts>
        );
    }
}