react使用echarts

react 使用echarts

1.引入echarts

1.要使用该插件肯定要先下载该插件：
npm  install  echarts  --save
2.下载完之后就可以项目中使用了，但是在React框架中使用，必须还要下载一个echarts-for-react 库：
npm  install  echarts-for-react  --save

2.创建子组件

import React from "react";
import * as echarts from 'echarts';
export default class EchartsTest extends React.Component{
    constructor(props){
        super(props)
        
    }
    componentDidMount(){
        var chartDom = document.getElementById('ech');
        var myChart = echarts.init(chartDom);
        var option;

        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'
            }
        ]
        };

        option && myChart.setOption(option);

    }
    render(){
        return (
            <div>
                <div id="ech" style={{ width: "100%", height: "300%" }}>
                
                </div>
            </div>
        )
    }
}

3.在父组件中导入

import EchartsTest from './EchartsTest';