React中使用echarts

Posted 2021-01-01 fangyinghua

1.安装相关的依赖：

cnpm i react-for-echarts -S

cnpm i echarts -S

2.使用方法:

页面引入:

import ReactEcharts from ‘echarts-for-react‘;

1).使用组件方式

class EchartsTest extends Component{

　　render(){

        const option = {
            xAxis: {
                type: ‘category‘,
                data: [‘Mon‘, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘, ‘Sat‘, ‘Sun‘]
            },
            yAxis: {
                type: ‘value‘
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: ‘line‘
            }]
        };
　　　　return(
　　　　　　<ReactEcharts  option={option} style={{height:‘200px‘,width:‘100%‘}}/>
　　　　)
　　}
}

2).echarts相关的配置项目

const option = {
　　xAxis: {
　　　　type: ‘category‘,
　　　　data: [‘Mon‘, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘, ‘Sat‘, ‘Sun‘]
　　},
　　yAxis: {
　　　　type: ‘value‘
　　},
　　series: [{
　　　　data: [820, 932, 901, 934, 1290, 1330, 1320],
　　　　type: ‘line‘
　　}]
};

const EchartsTest =()=>(
    <ReactEcharts
        option={option}
        style={{height:‘220px‘,width:‘100%‘}}
    ></ReactEcharts>
);

最后导出

export default EchartsTest;