web数据可视化(Echarts版)3-1网格组件的关键代码(代码仅供参考)

【代码】web数据可视化(Echarts版)3-1网格组件的关键代码(代码仅供参考)

m0_63471474

542人浏览 · 2023-05-18 22:25:05

m0_63471474 · 2023-05-18 22:25:05 发布

echarts.js文件下载地址:Apache ECharts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 1000px;height: 800px"></div>
    <script type="text/javascript">
        var mychat = echarts.init(document.getElementById("main"));
        var option={
            grid:{
                show:true,
                x:15,y:66,
                width:'93%',height:'80%',
                x2:100,y2:100,
                borderWidth:5,
                borderColor:'red',
                backgroundColor:'#千747f7'
            },
            title:{
                text:'未来一周气温变化'
            },
            tooltip:{//配置提示框组件
                trigger:'axis'
            },
            legend:{//配置图例组件
                data:['最高气温','最低气温']
            },
            toolbox:{
                show:true,
                feature:{
                    mark:{ show:true},
                    dataView:{show:true,readOnly: false},
                    magicType:{ show:true,type:['line','bar' ]},
                    restore:{shoW:true },saveAsImage:{show:true}
                }
            },
            calculable:true,
            xAxis:[
                {
                    show:false,smooth: true,type:'category',boundaryGap:false,
                    data:['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis:[
                {
                    show:false,type:'value',
                    axisLabel:{formatter:'{value}℃'}
                }
            ],
            series:[
                {
                    name:'最高气温',smooth:true,
                    type:'line',data:[11,11,15,13,12,13,10],
                    markPoint:{
                        data:[
                            {type:'max',name:'最大值'},
                            {type:'min',name:'最小值'}
                    ]
                },
                markLine:{
                    data:[
                        {type:'average',name:'平均值'}
                    ]
                }
                },
                {
                    name:'最低气温',smooth:true,
                    type:'line',data:[1,-2,2,5,3,2,0],
                    markPoint:{
                        data:[
                            {name:'周最低',value:-2,xAxis:1,yAxis:-1.5}
                        ]
                    },
                    markLine:{
                        data:[
                            {type:'average',name:'平均值'}
                        ]
                    }
                }
            ]
            }
    mychat.setOption(option);
    </script>
</body>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。