Echarts进阶版一个页面多个表每个表多个折线

最新推荐文章于 2022-07-10 17:37:27 发布

昵称全重复

最新推荐文章于 2022-07-10 17:37:27 发布

阅读量564

点赞数 1

分类专栏： JS Demo

本文链接：https://blog.csdn.net/liuzishang/article/details/93745469

版权

本文介绍如何在Echarts中实现一个页面包含多个表格，每个表格展示多个折线图。重点强调了从后台获取数据时的注意事项，包括判断折线名是否为空，设置ajax参数traditional: true确保数据正确传递，以及处理后台返回的折线图数据以生成新的折线点。通过这些步骤，可以成功创建动态且丰富的数据可视化界面。

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

引用

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/incubator-echarts-master/dist/echarts.min.js"></script>

页面

<style>
    .main {
        width: 50%;
        height: 500px;
        float: left;
    }
</style>
<div style="width:100%;">
    <div id="analog" class="main"></div>
    <div id="switch" class="main"></div>
</div>

<script>
        $(function () {
            var legendanalog = [];
            var legendswitch = [];
            var seriesanalog = [];
            var seriesswitch = [];
            $.ajax({
                url: '@Url.Action("GetRealTimeAnalogSensorFullNos")',
                type: 'get',
                data: {},
                async: false,
                success: function (data) {
                    if (data != null && data != [] && data.length != 0) {
                        legendanalog = data;
                        $.each(data, function (index, element) {
                            seriesanalog.push({ name: element, type: 'line', data: [] })
                        })
                        setInterval(function() {
                             $.ajax({
                     url: '@Url.Action("GetRealTimeAnalogData")',
                    data: { sensorFullNos: legendanalog },
                    dataType: "json",
                    type: "get",
                    traditional: true,
                    success: function (data) {
                        var date = new Date();
                        $.each(data, function (index, element) {
                            var series = option.series.filter(a => a.name == eleme

最低0.47元/天解锁文章

昵称全重复

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Echarts进阶版一个页面多个表每个表多个折线

引用<script src="~/Scripts/jquery-3.3.1.min.js"></script><script src="~/incubator-echarts-master/dist/echarts.min.js"></script>页面<style> .main { width:...
复制链接

扫一扫