关注互联网应用及运维技术的个人博客

react中引入echarts,源码

import React, { useEffect, useState } from "react";
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import "./index.css"
import { urls } from "../../utils/utils";
import { Spin, message } from "antd";
//渲染图形
const myChart = (xData, yData) => {
    const myChart = echarts.init(document.getElementById("main"));
    myChart.setOption({
        baseOption: {
            tooltip: {
                trigger: "axis",
                // 自定义tooltip
                formatter: function (params) {
                    var res = '<p>X轴类目:' + params[0].name + '</p>'
                    for (var i = 0; i < params.length; i++) {
                        res += '<p> Y轴数据:' + params[i].data + '</p>'
                    }
                    return res;
                },
            },
            color: "#00A0E8",//柱状图的颜色
            grid: {
                left: '2%',
                //距离左边的距离
                right: '1%', //距离右边的距离
                bottom: '10%', //距离下边的距离
                top: '8%', //距离上边的距离
            },
            xAxis: {
                type: 'category',
                data: xData,
                "axisLine": {       //X轴
                    "show": true,
                    lineStyle: {
                        color: "rgba(0,0,0,0.25)",
                    }
                },
                "axisTick": {       //轴刻度线
                    "show": false
                },
                "splitLine": {     //网格线
                    "show": false
                },
                axisLabel: {
                    interval: 4,
                    formatter: function (e) {
                        return e
                    },
                    textStyle: {
                        color: "rgba(0,0,0,0.25)",  //更改坐标轴文字颜色
                        fontSize: 16      //更改坐标轴文字大小
                    },
                }
            },
            yAxis: {
                title: "wge",
                type: 'value',
                axisLabel: {
                    //隐藏Y轴数据
                    // formatter: function () {
                    //     return "";
                    // }
                    textStyle: {
                        color: "rgba(0,0,0,0.25)",  //更改坐标轴文字颜色
                        fontSize: 16      //更改坐标轴文字大小
                    }
                },
                dispaly: "none",
                "axisLine": {       //y轴
                    "show": true,
                    lineStyle: {
                        color: "rgba(0,0,0,0.25)",
                    }
                },
                "axisTick": {       //y轴刻度线
                    "show": false
                },
                "splitLine": {     //网格线
                    "show": false
                },
                "show": true,
            },
            series: [{
                data: yData,
                type: 'bar',
                smooth: true,
                symbol: "none",
                barWidth: 20
            }]
        },
        media: [{
            query: { maxWidth: 959 },
            option: {
                grid: {
                    left: '6%',
                    //距离左边的距离
                    right: '1%', //距离右边的距离
                    bottom: '10%', //距离下边的距离
                    top: '8%', //距离上边的距离
                },
                xAxis: {
                    axisLabel: {
                        interval: 8,
                        textStyle: {
                            color: "rgba(0,0,0,0.25)",  //更改坐标轴文字颜色
                            fontSize: 10     //更改坐标轴文字大小
                        }
                    }
                },
                yAxis: {
                    axisLabel: {
                        textStyle: {
                            color: "rgba(0,0,0,0.25)",  //更改坐标轴文字颜色
                            fontSize: 10      //更改坐标轴文字大小
                        }
                    }
                },
                series: [{
                    symbol: "none",
                }]
            }
        }, {
            query: { maxWidth: 400, },
            option: {
                grid: {
                    left: '10%',
                    //距离左边的距离
                    right: '1%', //距离右边的距离
                    bottom: '10%', //距离下边的距离
                    top: '8%', //距离上边的距离
                },
            }
        }]
    });
    myChart.on("click", function (e) {
        console.log(e)
        console.log(e.name)
    })
};

function ApiTime() {
    const [spinning, setspinning] = useState(true)
    useEffect(() => {
        getData();
        const timer = setInterval(() => {
            getData();
        }, 10000);

        return () => { clearInterval(timer) }
    }, []);
    //监听页面变化重置
    window.addEventListener("resize", (e) => {
        // window.location.reload();

    })

    const getData = () => {
        fetch(urls)
            .then(res => res.json())
            .then(res => {
                const xData = [];
                const yData = [];
                if (res.Desc === "SUCCESS") {
                    setspinning(false)
                    res.Result.map((item) => {
                        xData.push(item);
                        yData.push(item);
                    })
                    myChart(xData, yData)
                } else {
                    message.error(res.Desc)
                }
            }).catch(err => {
                console.log(err)
            })
    }
    return <Spin spinning={spinning}><div id="main"></div></Spin>
}

export default ApiTime
赞(0)
未经允许不得转载:飞天狒狒 » react中引入echarts,源码

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址