由于缺少具体的API接口信息和数据格式,以下代码仅提供一个基本的框架和示例数据,需要根据实际情况进行修改。

HTML代码:

<div id="chart" style="width: 800px;height:400px;"></div>

JS代码:

// 示例数据
var data = [
    {"time": "0:00", "temperature": 15},
    {"time": "1:00", "temperature": 14},
    {"time": "2:00", "temperature": 14},
    {"time": "3:00", "temperature": 13},
    {"time": "4:00", "temperature": 13},
    {"time": "5:00", "temperature": 12},
    {"time": "6:00", "temperature": 11},
    {"time": "7:00", "temperature": 12},
    {"time": "8:00", "temperature": 13},
    {"time": "9:00", "temperature": 14},
    {"time": "10:00", "temperature": 15},
    {"time": "11:00", "temperature": 16},
    {"time": "12:00", "temperature": 17},
    {"time": "13:00", "temperature": 18},
    {"time": "14:00", "temperature": 20},
    {"time": "15:00", "temperature": 21},
    {"time": "16:00", "temperature": 22},
    {"time": "17:00", "temperature": 22},
    {"time": "18:00", "temperature": 20},
    {"time": "19:00", "temperature": 18},
    {"time": "20:00", "temperature": 17},
    {"time": "21:00", "temperature": 16},
    {"time": "22:00", "temperature": 15},
    {"time": "23:00", "temperature": 14}
];

// 初始化echarts图表
var myChart = echarts.init(document.getElementById('chart'));

// 配置项
var option = {
    title: {
        text: '24小时气温变化',
        subtext: '示例数据'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['气温']
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.map(function(item) { return item.time; })
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [{
        name: '气温',
        type: 'line',
        data: data.map(function(item) { return item.temperature; }),
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        },
        markLine: {
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
    }]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
``

原文地址: https://www.cveoy.top/t/topic/dhkX 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录