react echarts制作曲线图(以天气预报为例)

最新推荐文章于 2025-02-18 15:23:23 发布

liuye066

最新推荐文章于 2025-02-18 15:23:23 发布

阅读量3.3k

点赞数

分类专栏： H5 混合开发文章标签： react js echarts 曲线图

本文链接：https://blog.youkuaiyun.com/liuye066/article/details/116980526

版权

在React中使用echarts图表，制作一张24小时天气曲线图，显示温度，湿度曲线和各个小时的天气情况和具体温度；

描述：

设置了3个x轴，设置了时间，温度，天气

效果图：

1. 安装：

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

2. 在图表页面引入Echarts

import React from 'react';
import ReactEcharts from 'echarts-for-react';

3. 具体设置：

import React, {Component} from 'react';
import EChartsReact from 'echarts-for-react';

class LineChart extends Component{
    getOptions =(hours,temps, humiditys,weathers) => {
        return {
            title: {
                text: '天气预报'
            },
            tooltip: {},
            legend: {
                data: ['温度', '湿度']