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

已于 2023-07-02 14:32:04 修改
阅读量333 收藏
点赞数
分类专栏： 可视化大屏 文章标签： javascript 开发语言 ecmascript
于 2023-07-01 16:12:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pblh123/article/details/131491608
版权

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

折线图2引入html页面

一、需求

在右边的框架中填入新的折线图

设计稿
在这里插入图片描述

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

二、代码实现

（1）官网找到类似实例
在这里插入图片描述

（2）删掉不需要的内容：
在这里插入图片描述

（3）找到第三列，第二个图标
（4）将panel line 修改为panel line2
index.html

    <div class="column">  
        <div class="panel bar2">  
            <h2>柱形图-就业行情</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>        <div class="panel line2">  
            <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></selection>

（5）新建一个立即执行函数
index.js

// 折线图2 模块制作
(function() {

// 1. 实例化对象

  

// 2.指定配置

  

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

  

})();

（6）实例化对象

// 折线图2 模块制作  
(function() {  
// 1. 实例化对象  
    var myChart = echarts.init(document.querySelector(".line2 .chart"));  
// 2.指定配置

（7）指定配置（从官网实例中拷贝option）到代码中

// 折线图2 模块制作  
(function() {  
// 1. 实例化对象  
    var myChart = echarts.init(document.querySelector(".line2 .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  
        },  
        xAxis: [  
            {  
                type: 'category',  
                boundaryGap: false,  
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  
            }  
        ],  
        yAxis: [  
            {  
                type: 'value'  
            }  
        ],  
        series: [  
            {  
                name: 'Email',  
                type: 'line',  
                stack: 'Total',  
                areaStyle: {},  
                emphasis: {  
                    focus: 'series'  
                },  
                data: [120, 132, 101, 134, 90, 230, 210]  
            },  
            {  
                name: 'Union Ads',  
                type: 'line',  
                stack: 'Total',  
                areaStyle: {},  
                emphasis: {  
                    focus: 'series'  
                },  
                data: [220, 182, 191, 234, 290, 330, 310]  
            }  
        ]  
    };  
// 3. 把配置给实例对象

（8）把配置给实例对象

myChart.setOption(option);

效果
在这里插入图片描述

折线图2定制1-x,y轴及legend配置

一、需求

  1. 更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12
  2. 修改图表大小
  3. 修改x轴相关配置： 修改文本颜色为rgba(255,255,255,.6) 文字大小为 12
  4. x轴线的颜色为 rgba(255,255,255,.2)
  5. 修改y轴的相关配置

二、代码实现

需求1： 更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12
（1）在option中找到 legend，增加以下代码
index.js

// 2.指定配置  
    var option = {  
        tooltip: {  
            trigger: 'axis',  
        },  
        legend: {  
            top: "0%",  
            data: ['Email', 'Union Ads'],  
            textStyle: {  
                color: "rgba(255,255,255,.5)",  
                fontSize: "12"  
            },  
        },  
        grid: {  
            left: '3%',  
            right: '4%',  
            bottom: '3%',  
            containLabel: true  
        },

在这里插入图片描述

需求2： 修改图表大小

// 2.指定配置  
    var option = {  
        tooltip: {  
            trigger: 'axis',  
        },  
        legend: {  
            top: "0%",  
            data: ['Email', 'Union Ads'],  
            textStyle: {  
                color: "rgba(255,255,255,.5)",  
                fontSize: "12"  
            },  
        },  
        grid: {  
            left: "5",  
            top: "30",  
            right: "10",  
            bottom: "10",  
            containLabel: true  
        },

效果
在这里插入图片描述

需求3： 修改x轴相关配置： 修改文本颜色为rgba(255,255,255,.6) 文字大小为 12

grid: {  
    left: "5",  
    top: "30",  
    right: "10",  
    bottom: "10",  
    containLabel: true  
},  
xAxis: [  
    {  
        type: 'category',  
        boundaryGap: false,  
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  
        // 文本颜色为rgba(255,255,255,.6) 文字大小为 12        axisLabel: {  
            textStyle: {  
                color: "rgba(255,255,255,.6)",  
                fontSize: 12  
            }  
        },  
    }  
],

在这里插入图片描述

需求4： x轴线的颜色为 rgba(255,255,255,.2)

grid: {  
    left: "5",  
    top: "30",  
    right: "10",  
    bottom: "10",  
    containLabel: true  
},  
xAxis: [  
    {  
        type: 'category',  
        boundaryGap: false,  
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  
        // 文本颜色为rgba(255,255,255,.6) 文字大小为 12        axisLabel: {  
            textStyle: {  
                color: "rgba(255,255,255,.6)",  
                fontSize: 12  
            }  
        },  
        // x轴线的颜色为 rgba(255,255,255,.2)        axisLine: {  
            lineStyle: {  
                color: "rgba(255,255,255,.6)"  
            }  
        }  
    }  
],

效果
在这里插入图片描述

需求5： 修改y轴的相关配置

yAxis: [  
    {  
        type: 'value',  
        //不显示刻度标签  
        axisTick: { show: false },  
        axisLine: {  
            lineStyle: {  
                color: "rgba(255,255,255,.1)"  
            }  
        },  
        axisLabel: {  
            textStyle: {  
                color: "rgba(255,255,255,.6)",  
                fontSize: 12  
            }  
        },  
        // 修改分割线的颜色  
        splitLine: {  
            lineStyle: {  
                color: "rgba(255,255,255,.1)"  
            }  
        }  
    }  
],

效果
在这里插入图片描述

折线图2定制2-填充渐变区域

一、需求

  1. 修改两个线模块配置(注意在series 里面定制)

二、代码实现

需求1： 修改两个线模块配置(注意在series 里面定制)

（1）找到series，删除掉 stack: ‘Total’,

series: [  
    {  
        name: 'Email',  
        type: 'line',  
        areaStyle: {},  
        emphasis: {  
            focus: 'series'  
        },  
        data: [120, 132, 101, 134, 90, 230, 210]  
    },  
    {  
        name: 'Union Ads',  
        type: 'line',  
        areaStyle: {},  
        emphasis: {  
            focus: 'series'  
        },  
        data: [220, 182, 191, 234, 290, 330, 310]  
    }  
]

效果
在这里插入图片描述

（2）让线条变圆滑
smooth: true,

series: [  
    {  
        name: 'Email',  
        type: 'line',  
        areaStyle: {},  
        emphasis: {  
            focus: 'series'  
        },  
        data: [120, 132, 101, 134, 90, 230, 210],  
        smooth: true,  
    },  
    {  
        name: 'Union Ads',  
        type: 'line',  
        areaStyle: {},  
        emphasis: {  
            focus: 'series'  
        },  
        data: [220, 182, 191, 234, 290, 330, 310],  
        smooth: true,  
    }  
]

在这里插入图片描述

（3）单独修改线的样式

series: [  
    {  
        name: 'Email',  
        type: 'line',  
        areaStyle: {},  
        emphasis: {  
            focus: 'series'  
        },  
        data: [120, 132, 101, 134, 90, 230, 210],  
        smooth: true,  
        // 单独修改线的样式  
        lineStyle: {  
            color: "#0184d5",  
            width: 2  
        },  
    },  
    {  
        name: 'Union Ads',  
        type: 'line',  
        areaStyle: {},  
        emphasis: {  
            focus: 'series'  
        },  
        data: [220, 182, 191, 234, 290, 330, 310],  
        smooth: true,  
    }  
]

在这里插入图片描述

（4）到官网示例中，查看相关的配置

Documentation - Apache ECharts

在这里插入图片描述

（5）修改填充区域为渐变色

series: [  
    {  
        name: 'Email',  
        type: 'line',  
        areaStyle: {},  
        emphasis: {  
            focus: 'series'  
        },  
        // 填充区为渐变色  
        areaStyle: {  
            color: 'pink',  
        },  
        data: [120, 132, 101, 134, 90, 230, 210],  
        smooth: true,  
        // 单独修改线的样式  
        lineStyle: {  
            color: "#0184d5",  
            width: 2  
        },  
    },

在这里插入图片描述

（6）增加影子颜色

series: [  
    {  
        name: 'Email',  
        type: 'line',  
        emphasis: {  
            focus: 'series'  
        },  
        // 填充区为渐变色  
        areaStyle: {  
            // color: 'pink',  
            // 渐变色，只需要复制即可  
            color: new echarts.graphic.LinearGradient(  
                0, 0, 0, 1,  
                [  
                    {  
                        offset: 0,  
                        color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色  
                    },  
                    {  
                        offset: 0.8,  
                        color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色  
                    }  
                ],  
                false            ),  
            //影子颜色  
            shadowColor: "rgba(0, 0, 0, 0.1)"  
        },  
        data: [120, 132, 101, 134, 90, 230, 210],  
        smooth: true,  
        // 单独修改线的样式  
        lineStyle: {  
            color: "#0184d5",  
            width: 2  
        },  
    },

在这里插入图片描述

折线图2定制3-拐点定制

一、需求

设计稿

在这里插入图片描述

二、代码实现

（1）查阅官方示例
Documentation - Apache ECharts

在这里插入图片描述

（2）设置拐点为小圆点
（3）设置拐点大小为8

    // 单独修改线的样式  
    lineStyle: {  
        color: "#0184d5",  
        width: 2  
    },  
    // 设置拐点 小圆点  
    symbol: "circle",  
    // 拐点大小  
    symbolSize: 8,  
},

效果
在这里插入图片描述

// 设置拐点 小圆点  
symbol: "circle",  
// 点大小  
symbolSize: 18,

在这里插入图片描述

切换为8
（4）开始不显示拐点， 鼠标经过显示

    // 单独修改线的样式  
    lineStyle: {  
        color: "#0184d5",  
        width: 2  
    },  
    // 设置拐点 小圆点  
    symbol: "circle",  
    // 点大小  
    symbolSize: 8,  
    // 开始不显示拐点， 鼠标经过显示  
    showSymbol: false,  
},

在这里插入图片描述

（5）设置拐点颜色以及边框

Documentation - Apache ECharts
在这里插入图片描述

    // 单独修改线的样式  
    lineStyle: {  
        color: "#0184d5",  
        width: 2  
    },  
    // 设置拐点 小圆点  
    symbol: "circle",  
    // 点大小  
    symbolSize: 8,  
    // 开始不显示拐点， 鼠标经过显示  
    showSymbol: false,  
    // 设置拐点颜色以及边框  
    itemStyle: {  
        color: "#0184d5",  
        borderColor: "rgba(221, 220, 107, .1)",  
        borderWidth: 12  
    },  
},

在这里插入图片描述

折线图2定制4-数据更换

一、需求

  1. 需求1：设置第二条线的拐点
  2. 需求2： 更换数据

二、代码实现

需求1：设置第二条线的拐点
找到 series: 的第二个对象，在第二个对象里面设置
（1）设置第二条线为圆滑
（2）设置第二条线的样式
（3）渐变色填充

{  
    name: 'Union Ads',  
    type: 'line',  
    emphasis: {  
        focus: 'series'  
    },  
    data: [220, 182, 191, 234, 290, 330, 310],  
    //第二条 线是圆滑  
    smooth: true,  
    lineStyle: {  
        normal: {  
            color: "#00d887",  
            width: 2  
        }  
    },  
    //填充区域  
    areaStyle: {  
        normal: {  
            color: new echarts.graphic.LinearGradient(  
                0, 0, 0, 1,  
                [  
                    {  
                        offset: 0,  
                        color: "rgba(0, 216, 135, 0.4)"  
                    },  
                    {  
                        offset: 0.8,  
                        color: "rgba(0, 216, 135, 0.1)"  
                    }  
                ],  
                false            ),  
            shadowColor: "rgba(0, 0, 0, 0.1)"  
        }  
    },  
},

在这里插入图片描述

（4）设置拐点 小圆点
（5）设置拐点大小为5
（6）设置拐点颜色以及边框
（7）开始不显示拐点， 鼠标经过显示

{  
    name: 'Union Ads',  
    type: 'line',  
    emphasis: {  
        focus: 'series'  
    },  
    data: [220, 182, 191, 234, 290, 330, 310],  
    //第二条 线是圆滑  
    smooth: true,  
    lineStyle: {  
        normal: {  
            color: "#00d887",  
            width: 2  
        }  
    },  
    //填充区域  
    areaStyle: {  
        normal: {  
            color: new echarts.graphic.LinearGradient(  
                0, 0, 0, 1,  
                [  
                    {  
                        offset: 0,  
                        color: "rgba(0, 216, 135, 0.4)"  
                    },  
                    {  
                        offset: 0.8,  
                        color: "rgba(0, 216, 135, 0.1)"  
                    }  
                ],  
                false            ),  
            shadowColor: "rgba(0, 0, 0, 0.1)"  
        }  
    },  
    // 设置拐点 小圆点  
    symbol: "circle",  
    // 设置拐点大小为8  
    symbolSize: 8,  
    // 设置拐点颜色以及边框  
    itemStyle: {  
        color: "#00d887",  
        borderColor: "rgba(221, 220, 107, .1)",  
        borderWidth: 12  
    },  
    // 开始不显示拐点， 鼠标经过显示  
    showSymbol: false,  
},

在这里插入图片描述

需求2： 更换数据

（1）更换x轴更换数据
（2）更换series 第一个对象data数据
（3）更换series 第二个对象data数据

xAxis: [  
    {  
        type: 'category',  
        boundaryGap: false,  
        // x轴更换数据  
        data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],  
        // 文本颜色为rgba(255,255,255,.6) 文字大小为 12        axisLabel: {  
            textStyle: {  
                color: "rgba(255,255,255,.6)",  
                fontSize: 12  
            }  
        },  
        // x轴线的颜色为 rgba(255,255,255,.2)        axisLine: {  
            lineStyle: {  
                color: "rgba(255,255,255,.6)"  
            }  
        }  
    }  
],  
yAxis: [  
    {  
        type: 'value',  
        //不显示刻度标签  
        axisTick: { show: false },  
        axisLine: {  
            lineStyle: {  
                color: "rgba(255,255,255,.1)"  
            }  
        },  
        axisLabel: {  
            textStyle: {  
                color: "rgba(255,255,255,.6)",  
                fontSize: 12  
            }  
        },  
        // 修改分割线的颜色  
        splitLine: {  
            lineStyle: {  
                color: "rgba(255,255,255,.1)"  
            }  
        }  
    }  
],  
series: [  
    {  
        name: 'Email',  
        type: 'line',  
        emphasis: {  
            focus: 'series'  
        },  
        // 填充区为渐变色  
        areaStyle: {  
            // color: 'pink',  
            // 渐变色，只需要复制即可  
            color: new echarts.graphic.LinearGradient(  
                0, 0, 0, 1,  
                [  
                    {  
                        offset: 0,  
                        color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色  
                    },  
                    {  
                        offset: 0.8,  
                        color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色  
                    }  
                ],  
                false            ),  
            //影子颜色  
            shadowColor: "rgba(0, 0, 0, 0.1)"  
        },  
        data: [ "16","17","18","19","20","06","07","08","09","10","16","17","18","19","20","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],  
        smooth: true,  
        // 单独修改线的样式  
        lineStyle: {  
            color: "#0184d5",  
            width: 2  
        },  
        // 设置拐点 小圆点  
        symbol: "circle",  
        // 点大小  
        symbolSize: 8,  
        // 开始不显示拐点， 鼠标经过显示  
        showSymbol: false,  
        // 设置拐点颜色以及边框  
        itemStyle: {  
            color: "#0184d5",  
            borderColor: "rgba(221, 220, 107, .1)",  
            borderWidth: 12  
        },  
    },  
    {  
        name: 'Union Ads',  
        type: 'line',  
        emphasis: {  
            focus: 'series'  
        },  
        data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],  
        //第二条 线是圆滑  
        smooth: true,  
        lineStyle: {  
            normal: {  
                color: "#00d887",  
                width: 2  
            }  
        },  
        //填充区域  
        areaStyle: {  
            normal: {  
                color: new echarts.graphic.LinearGradient(  
                    0, 0, 0, 1,  
                    [  
                        {  
                            offset: 0,  
                            color: "rgba(0, 216, 135, 0.4)"  
                        },  
                        {  
                            offset: 0.8,  
                            color: "rgba(0, 216, 135, 0.1)"  
                        }  
                    ],  
                    false                ),  
                shadowColor: "rgba(0, 0, 0, 0.1)"  
            }  
        },  
        // 设置拐点 小圆点  
        symbol: "circle",  
        // 设置拐点大小为8  
        symbolSize: 8,  
        // 设置拐点颜色以及边框  
        itemStyle: {  
            color: "#00d887",  
            borderColor: "rgba(221, 220, 107, .1)",  
            borderWidth: 12  
        },  
        // 开始不显示拐点， 鼠标经过显示  
        showSymbol: false,  
    },  
  
  
]

在这里插入图片描述

需求3：让图表跟随屏幕自动的去适应

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

可视化大屏项目参考链接

【可视化大屏开发】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
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Vue2的响应式大屏数据可视化项目源码.zip
08-10
【资源说明】 基于Vue2的响应式大屏数据可视化项目源码.zip 基于Vue2的响应式大屏数据可视化项目源码.zip 基于Vue2的响应式大屏数据可视化项目源码.zip 1、该资源内项目代码都是经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能。
大屏数据可视化案例
热门推荐
般若
06-25 9万+
数据可视化：把相对复杂的、抽象的数据通过可视的、交互的方式进行展示，从而形象直观地表达数据蕴含的信息和规律。 数据可视化是数据空间到图形空间的映射，是抽象数据的具象表达。 数据可视化交互的基本原则：总览为先，缩放过滤按需查看细节。 大屏数据可视化是当前可视化领域的一项热门应用，通常可以分为信息展示类、数据分析类及监控预警类。 大屏数据可视化应用的难点并不在于图表类型的多样化，而在于如何能在...
【大数据可视化大屏源码】数据可视化大屏展示系统.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码
【数据可视化】智慧交通 可视化大屏前端源码.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源大数据可视化大屏前端源码码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码
基于ECharts地图数据可视化可视化大屏源码.rar
08-15
基于ECharts地图数据可视化可视化大屏源码
ECharts可视化大屏学习笔记【4】（折线图）
Enchanted to meet U
07-10 909
本章节记录折线图写法 一、折线图1 1.学习点 grid配置（网格样式） legend配置（图例） x轴、y轴的定制：刻度+坐标轴线+轴标签+轴内间距+分割线 两条线修饰为圆滑（series 中添加 smooth 为 true） 数据交互（模拟了json数据） 2.详细步骤 找一个模板（后面一个也是基于这个修改的）： 需求1： 修改折线图大小，显示边框设置颜色：#012f4a，并且显示刻度标签。 // 设置网格样式 grid: { top: '20%', .
使用Vue实现数据可视化大屏功能(三)-使用Echarts构建折线图功能
初学者
03-08 790
在之前的文章中我们介绍了Vue中引入Echarts图表的组件，下面我们就来介绍一下如何使用这些组件构建一些基础的组件方便后续使用中的直接引用。
【可视化大屏开发】8. 可视化大屏配置之静态图折线图1定制
pblh123的专栏
06-27 678
Echarts,折线图，点击切换数据，IDEA
【可视化大屏开发】11. 可视化大屏配置之静态图饼图2定制
pblh123的专栏
07-01 401
Echarts，南丁格尔玫瑰图
基于Echarts的可视化大屏散点图.rar
04-03
基于Echarts的可视化大屏散点图，包含html+css+js+image
【数据可视化】智慧图书 可视化大屏前端源码.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源大数据可视化大屏前端源码码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码
数据可视化大屏Echarts，这里就是你想要的数据可视化大屏
04-29
数据可视化大屏+Echarts+HTML+vscode开发环境，数据可视化大屏Echarts，柱状图、折线图、饼图、中国地图怎么使用。
【数据可视化】大数据可视化平台 可视化大屏前端源码.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源大数据可视...
【数据可视化】GIS大屏 可视化大屏前端源码.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源大数据可视...
【可视化大屏开发】7.可视化大屏配置之静态图条形图定制
pblh123的专栏
06-27 987
Echarts,条形图定制，idea
【可视化大屏开发】6.可视化大屏配置之静态图柱形图1定制
pblh123的专栏
06-13 1387
ECharts,柱形图定制，Spring Boot，X轴标签不显示修复
【可视化大屏开发】10. 可视化大屏配置之静态图饼图1定制
pblh123的专栏
07-01 300
Echarts, 饼图，自适应缩放
【数据可视化】智慧城市 可视化大屏前端源码.zip
05-19
大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源大数据可视...
大屏可视化echarts折线图实时监控
最新发布
10-12
可以使用WebSocket实现前端与后端的实时通信，后端将实时监控数据推送给前端，前端使用echarts绘制折线图并实时更新。 具体实现步骤如下： 1. 前端使用WebSocket与后端建立连接。 2. 后端定时获取监控数据，并将数据推送给前端。 3. 前端接收到数据后，使用echarts绘制折线图并实时更新。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值