如何在react中简单应用echart,及echart特性

一分钟学会在react中简单应用echart

1.首先安装echart、echarts-for-react

npm install echarts --save
npm install --save echarts-for-react

2、在相应组件中引入模块

import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';

3、使用的时候非常简单

用的时候只需要在官网找到你需要的的模板,将里面的option里的代码复制在下方你自己写代码里的option里,根据需求改变相应的数据
官网
可以直接点击进入各个案例
找到想要的,例如:
如何在react中简单应用echart,及echart特性_第1张图片

必须要的代码

import React,{
   Component}from 'react'

export default class Pie extends Component {
   

    getOption = ()=>{
   
        let option = {
   
           //粘贴上面复制过来的代码
        };
        return option;
    };
    render() {
   
        return (
        <div>
            <ReactEcharts option={
   this.getOption()}/>
        </div>
        )
    }
}

完毕,就这么简单,附个自己使用的案例

import React, {
    Component 

你可能感兴趣的:(react,reactjs,前端)