Echarts可视化仪表盘的绘制主干道平均车速和拥挤程度

ECharts是一个强大的数据可视化库，用于创建交互式图表。如果你想在ECharts中展示主干道路的平均车速和拥挤程度，你可以按照以下步骤创建一个基本的仪表盘：

1. **引入依赖**:
首先，确保你在HTML文件中包含了ECharts的JavaScript库，并初始化一个图表元素。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

2. **配置图表**:
使用ECharts API创建一个新的图表实例，设置图表的基本配置，包括标题、坐标轴等，并指定数据系列（averageSpeed 和 congestionLevel）。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '主干道路车速及拥挤度监控'
    },
    tooltip: {},
    legend: {
        data: ['平均车速', '拥挤程度']
    },
    xAxis: {
        type: 'category',
        data: ['路段A', '路段B', '路段C'] // 替换为主干道路名称
    },
    yAxis: {
        scale: true, // 表示数值范围可能很大，需要缩放
        splitLine: {show: false} // 可选去掉默认的分割线
    },
    series: [
        {
            name: '平均车速',
            type: 'line',
            data: [120, 80, 150] // 示例数据，替换为实际平均速度值
        },
        {
            name: '拥挤程度',
            type: 'bar', // 或者选择其他适合表示拥挤程度的图形，如堆积图
            data: [30, 70, 50], // 示例数据，范围通常是0-100，越高越拥堵
            stack: '总量' // 如果你想显示堆积图
        }
    ]
};

myChart.setOption(option);

3. **实时更新数据**:
如果数据是动态获取的，你需要定期刷新图表的数据。例如，可以使用`setOption`方法传入新的数据。

// 假设data是一个定时获取的新数据数组
function updateChartData(newData) {
    option.series[0].data = newData.averageSpeed;
    option.series[1].data = newData.congestionLevel;
    myChart.setOption(option);
}

// 每隔一段时间（比如每分钟）更新一次数据
setInterval(updateChartData, 60000);