【可视化大屏开发】8. 可视化大屏配置之静态图折线图1定制

已于 2023-07-02 14:31:45 修改
阅读量678 收藏 2
点赞数
分类专栏： 可视化大屏 文章标签： echarts 前端 javascript
于 2023-06-27 12:14:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pblh123/article/details/131414311
版权

【可视化大屏开发】8. 可视化大屏配置之静态图折线图1定制

折线图1引入html

一、需求

引入就业行情折线图到html中

二、代码实现

  • 官网找到类似实例， 适当分析，并且引入到HTML页面中
  • 根据需求定制图表

到官方网站上去找合适的实例

Examples - Apache ECharts

在这里插入图片描述

去掉不需要的
在这里插入图片描述

index.js中添加立即执行函数

// 折线图1模块制作

(function() {

// 1. 实例化对象

  

// 2.指定配置

  

// 3. 把配置给实例对象

})();

index.html

<selection class="mainbox">  
    <div class="column">  
        <div class="panel bar">  
            <h2>柱形图-职位需求-关键词搜索</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>        <div class="panel line">  
            <h2>折线图-就业行业</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>        <div class="panel pie">  
            <h2>饼图-就业行业</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>    </div>

修改折线图代码

// 折线图1模块制作  
(function() {  
// 1. 实例化对象  
    var myChart = echarts.init(document.querySelector(".line .chart"));  
  
// 2.指定配置  
    var option = {  
        tooltip: {  
            trigger: 'axis'  
        },  
        legend: {  
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']  
        },  
        grid: {  
            left: '3%',  
            right: '4%',  
            bottom: '3%',  
            containLabel: true  
        },  
        toolbox: {  
            feature: {  
                saveAsImage: {}  
            }  
        },  
        xAxis: {  
            type: 'category',  
            boundaryGap: false,  
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  
        },  
        yAxis: {  
            type: 'value'  
        },  
        series: [  
            {  
                name: 'Email',  
                type: 'line',  
                stack: 'Total',  
                data: [120, 132, 101, 134, 90, 230, 210]  
            },  
            {  
                name: 'Union Ads',  
                type: 'line',  
                stack: 'Total',  
                data: [220, 182, 191, 234, 290, 330, 310]  
            },  
            {  
                name: 'Video Ads',  
                type: 'line',  
                stack: 'Total',  
                data: [150, 232, 201, 154, 190, 330, 410]  
            },  
            {  
                name: 'Direct',  
                type: 'line',  
                stack: 'Total',  
                data: [320, 332, 301, 334, 390, 330, 320]  
            },  
            {  
                name: 'Search Engine',  
                type: 'line',  
                stack: 'Total',  
                data: [820, 932, 901, 934, 1290, 1330, 1320]  
            }  
        ]  
    };  
  
// 3. 把配置给实例对象  
    myChart.setOption(option);  
  
  
})();

在这里插入图片描述

线条过多，留下两个，剩下的删除

series: [  
    {  
        name: 'Email',  
        type: 'line',  
        stack: 'Total',  
        data: [120, 132, 101, 134, 90, 230, 210]  
    },  
    {  
        name: 'Search Engine',  
        type: 'line',  
        stack: 'Total',  
        data: [820, 932, 901, 934, 1290, 1330, 1320]  
    }  
]

效果
在这里插入图片描述

保存图标不需要，在option里删除部分代码后

// 2.指定配置  
    var option = {  
        tooltip: {  
            trigger: 'axis'  
        },  
        legend: {  
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']  
        },  
        grid: {  
            left: '3%',  
            right: '4%',  
            bottom: '3%',  
            containLabel: true  
        },  
        xAxis: {  
            type: 'category',  
            boundaryGap: false,  
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  
        },  
        yAxis: {  
            type: 'value'  
        },  
        series: [  
            {  
                name: 'Email',  
                type: 'line',  
                stack: 'Total',  
                data: [120, 132, 101, 134, 90, 230, 210]  
            },  
            {  
                name: 'Search Engine',  
                type: 'line',  
                stack: 'Total',  
                data: [820, 932, 901, 934, 1290, 1330, 1320]  
            }  
        ]  
    };

在这里插入图片描述

折线图1定制-grid网格

一、需求

对比设计稿，折线图需要修改成无边框的。
![[Image 6.png]]

二、代码实现

折线图需要修改成无边框的,需要修改grid代码
index.js

// 设置网格样式  
grid: {  
    top: '20%',  
    left: '3%',  
    right: '4%',  
    bottom: '3%',  
    show: true,// 显示边框  
    borderColor: '#012f4a',// 边框颜色  
    containLabel: true // 包含刻度文字在内  
},

在这里插入图片描述

再次参看效果：看不清楚，先把边框的颜色改成红色，试试

// 设置网格样式  
grid: {  
    top: '20%',  
    left: '3%',  
    right: '4%',  
    bottom: '3%',  
    show: true,// 显示边框  
    borderColor: 'red',// 边框颜色  
    containLabel: true // 包含刻度文字在内  
},

再次参看效果：

在这里插入图片描述

修改图例组件中的文字颜色 #4c9bfd， 距离右侧 right 为 10%

查看说明
Documentation - Apache ECharts

在这里插入图片描述

代码实现：
在 legend 内增加以下代码，注意：保留原来的data数据：

// 2.指定配置  
    var option = {  
        tooltip: {  
            trigger: 'axis'  
        },  
        legend: {  
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],  
            textStyle: {  
                color: '#4c9bfd' // 图例文字颜色  
            },  
            // 这个10% 必须加引号  
            right: '10%' // 距离右边10%  
        },

在这里插入图片描述

已靠右

折线图1定制-X轴与Y轴相关配置

一、需求

  1. x轴相关配置
    1. 刻度去除
    2. x轴刻度标签字体颜色：#4c9bfd
    3. 剔除x坐标轴线颜色（将来使用Y轴分割线)
    4. 轴两端是不需要内间距 boundaryGap
  2. y轴的定制
    1. 刻度去除
    2. 字体颜色：#4c9bfd
    3. 分割线颜色：#012f4a

二、代码实现

需求1：刻度去除
在xAxis 内，增加代码：

xAxis: {  
    type: 'category',  
    boundaryGap: false,  
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  
    axisTick: {  
        show: false // 去除刻度线  
    },  
},

在这里插入图片描述

需求2：x轴刻度标签字体颜色：#4c9bfd

xAxis: {  
    type: 'category',  
    boundaryGap: false,  
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  
    axisTick: {  
        show: false // 去除刻度线  
    },  
    axisLabel: {  
        color: '#4c9bfd' // 文本颜色  
    },  
},

在这里插入图片描述

需求3：剔除x坐标轴线颜色（将来使用Y轴分割线)

xAxis: {  
    type: 'category',  
    boundaryGap: false,  
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  
    axisTick: {  
        show: false // 去除刻度线  
    },  
    axisLabel: {  
        color: '#4c9bfd' // 文本颜色  
    },  
    axisLine: {  
        show: false // 去除轴线  
    },  
},

在这里插入图片描述

需求4：轴两端是不需要内间距 boundaryGap
继续在xAxis 内，更改代码：
boundaryGap: false,
如果原来已经是false,无需更改

y轴的定制

需求5：刻度去除
需求7：分割线颜色：#012f4a

yAxis: {  
    type: 'value',  
    axisTick: {  
        show: false // 去除刻度  
    },  
    splitLine: {  
        lineStyle: {  
            color: '#012f4a' // 分割线颜色  
        }  
    },  
    axisLabel: {  
        color: '#4c9bfd' // 文本颜色  
    },  
},

在这里插入图片描述

折线图1定制-折线样式定制

一、需求

对比原设计稿，设计两条线形图定制

  1. 颜色分别：#00f2f1 #ed3f35
  2. 把折线修饰为圆滑

二、代码实现

两条线形图定制
需求1：颜色分别：#00f2f1 #ed3f35
代码实现：找到option，在option里的最前面，增加代码：

// 2.指定配置  
    var option = {  
        // 通过这个color修改两条线的颜色  
        color: ["#00f2f1", "#ed3f35"],  
        tooltip: {  
            trigger: 'axis'  
        },

在这里插入图片描述

需求2：把折线修饰为圆滑

Documentation - Apache ECharts

在这里插入图片描述

index.js修改，线条更顺滑

series: [  
    {  
        name: 'Email',  
        type: 'line',  
        stack: 'Total',  
        data: [120, 132, 101, 134, 90, 230, 210],  
        // true 可以让我们的折线显示带有弧度  
        smooth: true,  
    },  
    {  
        name: 'Search Engine',  
        type: 'line',  
        stack: 'Total',  
        data: [820, 932, 901, 934, 1290, 1330, 1320],  
        // true 可以让我们的折线显示带有弧度  
        smooth: true,  
    }  
]

在这里插入图片描述

需求3：把数据叠加删掉

stack: 'Total',  // 删掉

在这里插入图片描述

折线图1定制-数据更改

一、需求

  1. 配置x轴的数据（更换成月）
  2. 配置图标数据
  3. 图表跟随屏幕自动的去适应

二、代码实现

需求1： 配置x轴的数据
在这里插入图片描述

index.js

xAxis: {  
    type: 'category',  
    boundaryGap: false,  
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],  
    axisTick: {  
        show: false // 去除刻度线  
    },

在这里插入图片描述

需求2： 配置图标数据
需求实现：找到 series:
更换第一组数据：data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120]
将name改成“新增粉丝”

更换第二组数据：
name:‘新增游客’,
data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]

index.js

series: [  
    {  
        name: '国内需求数',  
        type: 'line',  
        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],                // true 可以让我们的折线显示带有弧度  
        smooth: true,  
    },  
    {  
        name: '国外需求数',  
        type: 'line',  
        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],  
        // true 可以让我们的折线显示带有弧度  
        smooth: true,  
    }  
]

效果
在这里插入图片描述

图形效果出来了，但发现了新的BUG——legend消失
在这里插入图片描述

修改legend代码即可

legend: {  
    // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],  
    textStyle: {  
        color: '#4c9bfd' // 图例文字颜色  
    },  
    // 这个10% 必须加引号  
    right: '25%' // 距离右边25%  
}

在这里插入图片描述

在上图位置增加以下代码，实现让图标跟随屏幕自动去适应

  
// 3. 把配置给实例对象  
    myChart.setOption(option);  
    //让图标跟随屏幕去自动适应  
    window.addEventListener("resize",function(){  
        myChart.resize();  
    });

在这里插入图片描述

折线图1定制-tab栏切换

一、需求

  1. 新增需求 点击 2020年 2021年 数据发生变化

原设计稿

在这里插入图片描述

二、代码实现

需求1： 新增需求 点击 2020年 2021年 数据发生变化

（1）在index.html文件中，找到panel line（需要定制的折线图）增加两个a

<a href="javascript:;">2022</a>
<a href="javascript:;">2023</a>

<selection class="mainbox">  
    <div class="column">  
        <div class="panel bar">  
            <h2>柱形图-职位需求-关键词搜索</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>        <div class="panel line">  
            <h2>折线图-国内外需求分析  
                <a href="javascript:;">2022</a>  
                <a href="javascript:;">2023</a>  
            </h2>            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>        <div class="panel pie">  
            <h2>饼图-就业行业</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>    </div>

效果
在这里插入图片描述

（2）到less文件，找到panel盒子中的 h2
在这里插入图片描述

在h2中添加代码a

    }  
  }  
  h2 {  
    height: 0.6rem;  
    color: #fff;  
    line-height: 0.6rem;  
    text-align: center;  
    font-size: 0.25rem;  
    font-weight: 400;  
    a{  
      color: #fff;  
      text-decoration: none;  
      margin: 0 0.125rem;  
    }  
  }  
  .chart {  
    height: 3rem;  
  }  
}  
//数字模块

效果
在这里插入图片描述

实际使用情况下，数据大多数使用ajax请求
以下是后台送过来数据（ajax请求过来的）

var yearData = [
      {
        year: '2022',  // 年份
        data: [  // 两个数组是因为有两条线
             [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
             [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]
      },
      {
        year: '2023',  // 年份
        data: [  // 两个数组是因为有两条线
             [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
             [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          ]
      }
     ];

需求1：tab栏切换事件
（1）在html文件中，引入jquery.js

<script src="js/flexible.js"></script>  
<script src="js/echarts.min.js"></script>  
<script src="js/jquery.js"></script>  
<script src="js/index.js"></script>  

</body>

（2）在index.js文件中，折线图1模块制作的立即执行函数的最后面，定义点击事件

// 3. 把配置给实例对象  
    myChart.setOption(option);  
    //4.让图标跟随屏幕去自动适应  
    window.addEventListener("resize",function(){  
        myChart.reset();  
    });  
    // 5.点击切换效果  
    $(".line h2").on("click", "a", function() {  
        alert(1);  
    });  
})();

在这里插入图片描述

debug

在这里插入图片描述

折线图1-tab栏切换数据

一、需求

实现点击索引实现数据切换
在这里插入图片描述

二、代码实现

在 点击切换效果 中，增加以下代码进行测试

console.log($(this).index());

测试
在这里插入图片描述

该报错，暂时先忽略，报的是没有网络协议
在折线图1模块的立即执行函数中，增加以下代码：

// 折线图1模块制作  
(function() {  
// 1. 实例化对象  
    var myChart = echarts.init(document.querySelector(".line .chart"));  
    // 指定数据  
    var yearData = [  
        {  
            year: '2022', // 年份  
            data: [ // 两个数组是因为有两条线  
                [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],  
                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]  
            ]  
        },  
        {  
            year: '2023', // 年份  
            data: [ // 两个数组是因为有两条线  
                [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],  
                [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]  
            ]  
        }  
    ];


// 省略部分代码


    // 5.点击切换效果  
    $(".line h2").on("click", "a", function() {  
        // alert(1);  
        console.log(yearData[$(this).index()]);  
    });  
})();

在这里插入图片描述

（4）在点击事件中，增加以下代码

var obj = yearData[$(this).index()];
option.series[0].data = obj.data[0];
option.series[1].data = obj.data[1];
// 需要重新渲染
myChart.setOption(option);

点击2022
在这里插入图片描述

点击2023
在这里插入图片描述

（5）将页面默认显示2022年的数据，
将series:的数据更换成2022年的数据
第一组数据更换成：

data: yearData[0].data[0]

第二组数据更换成：

data: yearData[0].data[1]

index.js 更换默认数据为2022

series: [  
    {  
        name: '国内需求数',  
        type: 'line',  
        data: yearData[0].data[0],  
        smooth: true,  
    },  
    {  
        name: '国外需求数',  
        type: 'line',  
        data: yearData[0].data[1],  
        // true 可以让我们的折线显示带有弧度  
        smooth: true,  
    }  
]

可视化大屏项目参考链接

【可视化大屏开发】1.基础开发环境准备_pblh123的博客-CSDN博客
【可视化大屏开发】2.基础项目配置及大屏布局_pblh123的博客-CSDN博客
【可视化大屏开发】3.大屏配置之数字模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】4.大屏配置之地球模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】5.大屏配置之Echarts入门学习_pblh123的博客-CSDN博客
【可视化大屏开发】6.可视化大屏配置之静态图柱形图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】7.可视化大屏配置之静态图条形图定制_pblh123的博客-CSDN博客
【可视化大屏开发】8. 可视化大屏配置之静态图折线图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】9. 可视化大屏配置之静态图折线图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】10. 可视化大屏配置之静态图饼图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】11. 可视化大屏配置之静态图饼图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】12. 可视化大屏配置之静态图中国地图定制_pblh123的博客-CSDN博客
【可视化大屏开发】13. 可视化大屏配置之打通前后端更新静态图数据_pblh123的博客-CSDN博客
【可视化大屏开发】14. Maven打包可视化大屏项目-发布jar包_pblh123的博客-CSDN博客
【可视化大屏开发】15.可视化大屏项目-网络访问静态数据无法更新问题修复_pblh123的博客-CSDN博客
【可视化大屏开发】16. 可视化大屏项目共性优化问题_pblh123的博客-CSDN博客
17.可视化大屏配置之代码整理资源-CSDN文库
可视化大屏项目动态数据样例资源-CSDN文库

pblh123
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于ECharts图书零售监测数据平台可视化大屏源码.rar
08-15
基于ECharts图书零售监测数据平台可视化大屏源码
【数据可视化】视频监控 可视化大屏前端源码.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源大数据可视化大屏前端源码码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码
基于Echarts的可视化大屏散点图.rar
04-03
基于Echarts的可视化大屏散点图，包含html+css+js+image
【数据可视化】大数据可视化平台 可视化大屏前端源码.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源大数据可视化大屏前端源码码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码
【数据可视化】智慧医疗 可视化大屏前端源码.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源大数据可视化大屏前端源码码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码
echarts折线图（预测图）预测部分为虚线，实际部分为实线（一条线一半虚线一半实线）
weixin_44705979的博客
09-21 1903
【代码】echarts折线图（预测图）预测部分为虚线，实际部分为实线（一条线一半虚线一半实线）
【可视化大屏开发】9. 可视化大屏配置之静态图折线图2定制
pblh123的专栏
07-01 333
Echarts,大屏，折线图，自适应缩放
【可视化大屏开发】6.可视化大屏配置之静态图柱形图1定制
pblh123的专栏
06-13 1387
ECharts,柱形图定制，Spring Boot，X轴标签不显示修复
【可视化大屏开发】7.可视化大屏配置之静态图条形图定制
pblh123的专栏
06-27 987
Echarts,条形图定制，idea
【大数据可视化大屏源码】通用大数据可视化展示平台模板.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码
【数据可视化】Echarts示例 可视化大屏前端源码.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源大数据可视化大屏前端源码码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码
【数据可视化】智慧物流 可视化大屏前端源码.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源大数据可视化大屏前端源码码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码
【数据可视化】智慧设备 可视化大屏前端源码.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源大数据可视化大屏前端源码码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码
【数据可视化】智慧运维 可视化大屏前端源码.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源大数据可视化大屏前端源码码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码
【可视化大屏开发】10. 可视化大屏配置之静态图饼图1定制
pblh123的专栏
07-01 300
Echarts, 饼图，自适应缩放
【可视化大屏开发】11. 可视化大屏配置之静态图饼图2定制
pblh123的专栏
07-01 401
Echarts，南丁格尔玫瑰图
【可视化大屏开发】13. 可视化大屏配置之打通前后端更新静态图数据
pblh123的专栏
07-02 771
Echarts,可视化大屏，前后端交互，Spring Boot,数据更新
【可视化大屏开发】5.大屏配置之Echarts入门学习
pblh123的专栏
06-12 2227
Echarts入门，ECharts初级，学习入门
大屏可视化echarts折线图实时监控
最新发布
10-12
可以使用WebSocket实现前端与后端的实时通信，后端将实时监控数据推送给前端，前端使用echarts绘制折线图并实时更新。 具体实现步骤如下： 1. 前端使用WebSocket与后端建立连接。 2. 后端定时获取监控数据，并将数据推送给前端。 3. 前端接收到数据后，使用echarts绘制折线图并实时更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值