React 中echart曲线图的使用

效果如下：

 LineChart.js

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

class LineChart extends Component{
    getOptions =(hours,temps, humiditys,weathers) => {
        return {
            title: {
                text: ''
            },
            tooltip: {
                show: true,
                trigger: 'axis',
                // axisPointer:{
                //     show:true,
                //     // type:'cross'
                //     type:'line',
                //     // z:1,
                //     // lineStyle:{
                //     //     color: '#2283e2',
                //     //     width:1,
                //     // },
                //     // confine: true,//浮窗不超出屏幕范围
                // },
                // formatter: function (value) {
                //     var item='';
                //     console.log('tooltip=======',value);
                //     for (var index=0;index<value.length;index++) {
                //         if (value[index].seriesName.indexOf('温度') !== -1) {
                //             item = value[index].value+'°C';
                //         }
                //         if (value[index].seriesName.indexOf('湿度') !== -1) {
                //             item = value[index].value+'%';
                //         }
                //
                //     }
                //     return item;
                // },
                // position: function (point) {
                //     console.log('position=======',point);
                //     return [point[0]-50, '10%'];
                //     // 固定在顶部
                //     // if(!_this.showChartFlag){
                //     //     return [point[0]-50, '10%'];
                //     // }else{
                //     //     return [point[0]-50, '50%'];
                //     // }
                // }
            },
            color: ['#61DBF4', '#2283E2'],
            // inactiveColor:['#61DBF4', '#2283E2'],
            legend: {
                x:'left',
                left:13,
                // data: ['温度', '湿度'],
                textStyle:{
                    // fontFamily:'PingFangSC-Regular',
                    fontFamily:'PingFangSC-Light',
                    fontSize:15,
                    color:'#333333'
                },
                //图标的宽高
                itemWidth:8,
                itemHeight:8,

                data:[{
                    name:'温度(°C)',//值必须与series中的name一致才能显示
                    color:'#61DBF4',//图标的颜色
                    icon:'circle',//图例旁边图标的形状，默认是一个圈两边各一条横线
                },{
                    name:'湿度(%)',
                    color:'#2283E2',
                    icon:'circle'
                }],
                itemGap:26 //图例的间距
            },
            xAxis: [
                {
                    // type: 'category',
                    boundaryGap: false,//坐标轴两边留白策略，false不留边
                    data: hours,
                    // name:'时间',
                    axisLabel: {//横坐标轴上的文字样式
                        color:'#A4A4A4',
                    },
                    splitLine: { //竖向间隔线的样式
                        show:true,
                        lineStyle: {
                            color: '#EAEAEA',
                            opacity:0.5,
                        }
                    },
                    axisLine: {//x轴线的样式
                        lineStyle: {
                            color: '#EAEAEA',
                            opacity:0.5,
                            type:'dashed',
                        }
                    },
                    zlevel: 2,
                    //数据反向显示
                    // inverse:true
                },
            ],
            yAxis: {
                // showLine: true,
                axisLabel: {
                    show:false,
                    interval:0,//代表显示所有x轴标签显示
                    rotate:45, //代表逆时针旋转45度
                },
                axisLine: {//轴线和标签的样式
                    show: false,//是否显示轴线
                    // lineStyle: {
                    //     color: '#333333',
                    // }
                },
                splitLine: {
                    show:true,
                    lineStyle: {
                        color: '#EAEAEA',
                        opacity:0.5,
                        type:'dashed',
                    }
                },
                // position: 'right'
            },
            series: [{
                name: '温度(°C)',
                type: 'line',
                smooth: true,
                data: temps,
                showSymbol :true,//是否显示拐点
                //拐点大小
                // symbolSize: function (val) {
                //     return val[2] * 40;
                // },
                //在曲线图上显示所有数据
                itemStyle: {
                    normal:{
                        label:{
                            show:true,
                            color:'#999999',
                            formatter: function (value) {
                                return value.value+'°C';
                            },
                        }
                    }
                },
                lineStyle:{
                    width:2,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#61DBF4' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#32B5E6' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                //曲线下方加阴影
                areaStyle: {
                    normal: {
                        color: {
                            //分别控制渐变方向，横向渐变或纵向渐变
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            //渐变颜色，offset是偏移量，哪种颜色占比多少
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(170,213,254,0.07)' // 0% 处的颜色
                            }, {
                                offset: 0.7,
                                color: 'rgba(105,181,255,0.13)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    }
                },
            }, {
                name: '湿度(%)',
                type: 'line',
                smooth: true,
                data: humiditys,
                showSymbol :true,
                itemStyle: {
                    normal:{
                        label:{
                            show:true,
                            color:'#999999',
                            formatter: function (value) {
                                return value.value+'%';
                            },
                        }
                    }
                },
                lineStyle:{
                    width:2,
                    color: {
                        type: 'linear',
                        // type: 'radial',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#94CAFF' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#2283E2' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }],
            dataZoom: {
                //type: 'slider':dataZoom 组件在外边。type: 'inside'：看不到组件，但可拖拉查看
                type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                start: 0,// 左边在 10% 的位置。
                end: 25, // 右边在 60% 的位置。
                zoomLock:true,//如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
                // disabled:true, //不能缩放，不能平移
                preventDefaultMouseMove:false,//解决上下滑动屏幕时，在图表区域无法滑动的问题
            },
            grid: [
                {
                    bottom: 30,
                    top:52,
                    left:20,
                    right:20
                },
                // {
                //     height: 160,
                //     bottom: 0
                // }
            ],
        };
    }
    //https://m.ehaier.com/sgmobile/goodsDetail?productId=40239
    render() {
        const {hourWeather} = this.props;
        const hours = [];
        const temps = [];
        const humiditys = [];
        const weathers = [];
        Object.keys(hourWeather).forEach((item, index)=> {
            let itemArr = item.split(' ');
            let itemStr = itemArr[1].substring(0,5);
            // console.log('hourWeather',item);
            hours.push(itemStr);
            // console.log('hourWeather',hourWeather[item]);
            temps.push(hourWeather[item].temp);
            humiditys.push(hourWeather[item].humidity);
            weathers.push(hourWeather[item].condition);
        });
        return (
            <div className='hiddenBg' style={{padding: '0px'}}>
                <div style={{margin: '0px 12px 0px 12px', borderRadius: '10px',padding: '14px 0px 10px 0px',backgroundColor: 'white'}}>
                    <EChartsReact option={this.getOptions(hours,temps, humiditys,weathers)}/>
                </div>
            </div>
        );
    }
}

export default LineChart;