ReactEcharts使用，并自定义echart的series和tooltip等等

最新推荐文章于 2024-02-06 11:13:20 发布

墨·殇

最新推荐文章于 2024-02-06 11:13:20 发布

阅读量441

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/freedms/article/details/132565077

版权

1.data形式为如下的json数组

2：echart图表代码

import React, {useEffect, useState} from "react";
import ReactEcharts from 'echarts-for-react';
import {deepClone} from "../../../../../utils/copyUtils";

const PersonalPortraitLeftTwoChart = (props) => {


    //创建echart的option为useState形式
    const [option,setOption] = useState(
        {
            tooltip: {
                trigger: 'axis',
                confine: 'true',
            },
            animation: true,

            legend: {
                data: ['上界', '进站量均值' ,'下界'],
                textStyle: {
                    color: '#fff'
                },

            },
            dataZoom: {
                type: 'inside',
                minSpan:10,
                maxSpan:100,
                filterMode: 'none'
            },
            grid: {
                left: '2%',
                containLabel: true
            },
            xAxis: {
                name: '时间',
                type: 'category',
                boundaryGap: false,
                data: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
                axisLine: {
                    lineStyle: {
                        color: '#ffffff',
                    },
                }
            },
            yAxis: {
                name: '客流量',
                type: 'value',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ffffff',
                    },
                },
                splitLine: {
                    show: false
                },
            },
            series: [
                {
                    name: '上界',
                    type: 'line',
                    smooth: 'true',
                    color:'#2ed750',
                },

                {
                    name: '进站量均值',
                    type:'line',
                    smooth: 'true',
                    color:'#ff9244',
                },
                {
                    name: '下界',
                    type:'line',
                    smooth: 'true',
                    color:'#0097a5',
                },

            ]
        })

    useEffect(() => {
        init(props.stationLabel)
    },[props.stationLabel])

    //创建一个数据更新函数，并且用useEffect接受数据，当数据更新时，图表数据随之动态变化
    const init= (data) => {
        if (data=== null) return;
        if (data === undefined) return;
        console.log(data)
        //引入深度克隆函数
        let objLine = deepClone(option);

        //插入x轴和series数据
        objLine.xAxis.data =data.map(obj => obj.v4)
        objLine.series[0].data =data.map(obj => obj.v1)
        objLine.series[1].data =data.map(obj => (obj.v3/1).toFixed(2))
        objLine.series[2].data =data.map(obj => obj.v2)

        //根据数据动态添加暂无数据
        objLine.graphic={
            type: 'text',     // 类型：文本
            left: 'center',
            top: 'middle',
            silent: true,     // 不响应事件
            invisible: data.length > 0,   // 有数据就隐藏
            style: {
                fill: '#9d9d9d',
                fontWeight: 'bold',
                text: '暂无数据',
                fontFamily: 'Microsoft YaHei',
                fontSize: '25px'
            }
        }
        //根据数据动态修改tooltip
        objLine.tooltip={
            trigger: 'axis',
            confine: true,
            formatter: function(params) {
                return  '时间：'+params[0].axisValue + '<br>'+
                    params[0].marker +params[0].seriesName + ': ' + params[0].value +' 日期：'+ data[params[0].dataIndex].v5+'<br>'+
                    params[1].marker +params[1].seriesName + ': ' + params[1].value + '<br>'+
                    params[2].marker +params[2].seriesName + ': ' + params[2].value +' 日期：'+ data[params[0].dataIndex].v6+ '<br>'
            },
            textStyle:{
                color:'#296ed1'
            }
        }
        //更新echart的option
        setOption(objLine)
    }

    return (
        // 使用ReactEcharts
        <ReactEcharts
            style={{width: '100%', height: '90%'}}
            option={option}
        />
    )
}
export default PersonalPortraitLeftTwoChart;