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

白日梦想家☜

已于 2023-05-20 12:43:38 修改

阅读量362

点赞数

分类专栏： HTML 文章标签： js echarts 前端

于 2023-05-18 22:25:05 首次发布

本文链接：https://blog.csdn.net/m0_63471474/article/details/130756469

版权

HTML 专栏收录该内容

40 篇文章 13 订阅

订阅专栏

该文章展示了一个使用Echarts.js库创建的HTML页面，用于显示未来一周最高和最低气温的变化情况。页面包含一个图表，具有提示框、图例、工具箱等功能，数据以线形图的形式呈现，并标注了最大值、最小值和平均值。

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

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>