react项目 使用echarts

• Z时代
• 2024-01-10
• 分类：综合

1.安装

npm install --save echarts-for-react
//如果需要使用echarts的一些特殊方法需要安装
npm install --save echarts

2.使用

import React,{Component} from 'react';
import ReactEcharts from 'echarts-for-react';
class IEcharts extends Component{
render(){
        return(
            <div>
<ReactEcharts option={this.getOption()} style={{height: '500px', width: '60%'}} />
            </div>
        )
    }
}
export default IEcharts;    

3.简单的示例

import React,{Component} from 'react';
import ReactEcharts from 'echarts-for-react';
class IEcharts extends Component{
    getOption = () => {
       var option= {
            title: {
                    text: '未来一周气温变化',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['最高气温','最低气温']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name:'最高气温',
                        type:'line',
                        data:[11, 11, 15, 13, 12, 13, 10],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'最低气温',
                        type:'line',
                        data:[1, -2, 2, 5, 3, 2, 0],
                        markPoint: {
                            data: [
                                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        normal: {
                                            position: 'start',
                                            formatter: '最大值'
                                        }
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }]
                            ]
                        }
                    }
                ]};
        return option;
    };
    render(){
        return(
            <div>
                <div style={{marginTop:20}}>
                    <ReactEcharts
                    option={this.getOption()}
                    style={{height: '500px', width: '60%'}}
                    />
                </div>
            </div>
        )
    }
}
export default IEcharts;

以上是 react项目 使用echarts 的全部内容， 来源链接： utcz.com/z/382614.html