动态获取的JSON数据如何自定义Echarts的x轴并自动切换动态显示

最新推荐文章于 2024-01-18 11:48:18 发布

老炉传说

最新推荐文章于 2024-01-18 11:48:18 发布

阅读量1.2k

点赞数 1

分类专栏：心得 h5 文章标签： echarts 动态切换

本文链接：https://blog.csdn.net/zhuzheqing/article/details/111241196

版权

h5 同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

心得

11 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Echarts动态显示多个图表数据。通过一个JavaScript对象`count`存储不同图表的数据，然后利用Echarts的`setOption`方法结合定时器`setInterval`来实现图表的自动切换。示例代码展示了从`count`对象中提取数据并设置Echarts配置，最终实现在一个图表上轮流展示四个不同的数据集。

摘要由CSDN通过智能技术生成

如何动态显示Ecahrts图表

下面是我们要显示的JSON数据，为了简单起见，省去了Ajax获取JSON数据的步骤，直接定义变量，变量为获取到的JSON数据。

    let count = {"1":[{"num":177,"time":"21:27:5"},{"num":177,"time":"21:27:9"},{"num":189,"time":"21:27:13"},{"num":185,"time":"21:27:17"},{"num":184,"time":"21:27:21"},{"num":101,"time":"21:27:25"},{"num":102,"time":"21:27:29"},{"num":138,"time":"21:27:33"}],"2":[{"num":102,"time":"21:27:6"},{"num":95,"time":"21:27:10"},{"num":92,"time":"21:27:14"},{"num":95,"time":"21:27:18"},{"num":95,"time":"21:27:22"},{"num":104,"time":"21:27:26"},{"num":95,"time":"21:27:30"}],"3":[{"num":38,"time":"21:27:7"},{"num":38,"time":"21:27:11"},{"num":43,"time":"21:27:15"},{"num":47,"time":"21:27:19"},{"num":48,"time":"21:27:23"},{"num":48,"time":"21:27:27"},{"num":52,"time":"21:27:31"}],"4":[{"num":20,"time":"21:27:8"},{"num":19,"time":"21:27:12"},{"num":21,"time":"21:27:16"},{"num":21,"time":"21:27:20"},{"num":14,"time":"21:27:24"},{"num":16,"time":"21:27:28"},{"num":21,"time":"21:27:32"}]};

count对象中1、2、3、4对应四个图表的数据。现在我们希望四个图表数据在一个Echarts图中切换显示。
首先创建Echarts对象：

let ds31 = echarts.init(document.getElementById('ds31'));

我们可以写一个函数传入索引号显示图表：

function setEcharts(index) {
        let data = count[index].map(x => x.num);
        let xdata = count[index].map(x => x.time);
        let ds31 = echarts.init(document.getElementById('ds31'));
        ds31Option = {
            title: {
                text: "人群时序图",
                textStyle: {
                    color: "#FFF",
                },

            },
            lineStyle: {
                color: '#82ee96',
                width: 5
            },
            xAxis: {
                axisLine: {
                    lineStyle: {
                        color: "#ddd"
                    }
                },
                data: xdata
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: "#ddd"
                    }
                },
                splitLine: {
                    show: false
                },
                type: 'value',
            },
            series: [{
                data: data,
                type: 'line',
                smooth: true
            }]
        };
        ds31.setOption(ds31Option);
    }

ES6最新语法map注意关注一下，非常好用。

let data = count["1"].map(x => x.num);

如果传入的是1，这个代码的意思是将count对象里面1号索引中的num里面对应的值放到一个数组中。

轮换图表

定义一个全局变量作为计数，添加计数器：

let total = 0;
 setInterval(function () {
        setEcharts((total%4)+1);
        total++;
    },1000);

完美实现图表自动切换演示。
在这里插入图片描述
下面是完整HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body style="background-color: #2F4056;">

<div id="ds31" style="width: 100%;height:300px;"></div>
<script src="js/echarts.min.js"></script>
<script>
    let count = {"1":[{"num":177,"time":"21:27:5"},{"num":177,"time":"21:27:9"},{"num":189,"time":"21:27:13"},{"num":185,"time":"21:27:17"},{"num":184,"time":"21:27:21"},{"num":101,"time":"21:27:25"},{"num":102,"time":"21:27:29"},{"num":138,"time":"21:27:33"}],"2":[{"num":102,"time":"21:27:6"},{"num":95,"time":"21:27:10"},{"num":92,"time":"21:27:14"},{"num":95,"time":"21:27:18"},{"num":95,"time":"21:27:22"},{"num":104,"time":"21:27:26"},{"num":95,"time":"21:27:30"}],"3":[{"num":38,"time":"21:27:7"},{"num":38,"time":"21:27:11"},{"num":43,"time":"21:27:15"},{"num":47,"time":"21:27:19"},{"num":48,"time":"21:27:23"},{"num":48,"time":"21:27:27"},{"num":52,"time":"21:27:31"}],"4":[{"num":20,"time":"21:27:8"},{"num":19,"time":"21:27:12"},{"num":21,"time":"21:27:16"},{"num":21,"time":"21:27:20"},{"num":14,"time":"21:27:24"},{"num":16,"time":"21:27:28"},{"num":21,"time":"21:27:32"}]};
    let total = 0;
    let ds31 = echarts.init(document.getElementById('ds31'));
    setInterval(function () {
        setEcharts((total%4)+1);
        total++;
    },1000);
    function setEcharts(index) {
        let data = count[index].map(x => x.num);
        let xdata = count[index].map(x => x.time);

        ds31Option = {
            title: {
                text: "人群时序图",
                textStyle: {
                    color: "#FFF",
                },

            },
            lineStyle: {
                color: '#82ee96',
                width: 5
            },
            xAxis: {
                axisLine: {
                    lineStyle: {
                        color: "#ddd"
                    }
                },
                data: xdata
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: "#ddd"
                    }
                },
                splitLine: {
                    show: false
                },
                type: 'value',
            },
            series: [{
                data: data,
                type: 'line',
                smooth: true
            }]
        };
        ds31.setOption(ds31Option);
    }
</script>
</body>
</html>