教育领域数据可视化方案：Apache ECharts 动态渲染实战指南

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js">script>

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

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

function updateData() {
  // 模拟从服务器获取数据，实际项目中这里是 Ajax 请求
  var newData = getLatestOnlineData(); 
  myChart.setOption({
    series: [{
      data: newData
    }]
  });
}
setInterval(updateData, ); // 每隔 5 秒更新一次

myChart.on('click', function(params) {
  // params 里包含点击的图表元素信息
  var classId = params.data.classId; 
  // 根据班级 ID 获取该班级的详细数据
  var detailData = getClassDetailData(classId); 
  myChart.setOption({
    series: [{
      data: detailData
    }]
  });
});

myChart.setOption(option, true); // 第二个参数为 true 时开启动画

option = {
  series: [{
    type: 'bar',
    data: data,
    itemStyle: {
      normal: {
        animationEasing: 'elasticOut', // 弹性动画
        animationDelay: function(index) {
          return index * ; // 每个柱子延迟加载，形成排队进入的效果
        }
      }
    }
  }]
};

option = {
  tooltip: {
    trigger: 'item', // 触发类型，item 表示针对单个数据项
    formatter: function(params) {
      return params.name + '
分数：' + params.value + '
排名：' + params.data.rank;
    }
  }
};

myChart.setOption({
  dataZoom: [
    {
      type: 'slider', // 滑动条缩放
      show: true,
      xAxisIndex:  // 作用于 x 轴
    },
    {
      type: 'inside', // 鼠标滚轮缩放
      xAxisIndex: 
    }
  ]
});

var data = [
  {name: '张三', term: '第一学期', subject: '数学', score: , rank: },
  {name: '李四', term: '第一学期', subject: '数学', score: , rank: },
  // 更多数据...
];

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

// 配置项
var option = {
  title: {
    text: '学生成绩趋势分析'
  },
  xAxis: {
    data: ['第一学期', '第二学期', '第三学期', '第四学期']
  },
  yAxis: {
    name: '分数'
  },
  series: []
};

// 根据学科筛选数据并更新图表
function updateChartBySubject(subject) {
  var filteredData = data.filter(item => item.subject === subject);
  var seriesData = [];
  filteredData.forEach((group, index) => {
    seriesData.push({
      name: group.name,
      type: 'line',
      data: group.scores // 每个学生各学期的分数数组
    });
  });
  option.series = seriesData;
  myChart.setOption(option, true); // 开启动画更新
}

// 给下拉菜单绑定事件
document.getElementById('subjectSelect').addEventListener('change', function() {
  var subject = this.value;
  updateChartBySubject(subject);
});

var myChart1 = echarts.init(document.getElementById('dashboard')); // 仪表盘
var myChart2 = echarts.init(document.getElementById('barChart')); // 柱状图

function updateOnlineData() {
  // 模拟实时数据，实际从服务器获取
  var participation = getParticipationRate(); 
  var messages = getMessageData(); 

  // 更新仪表盘
  myChart1.setOption({
    series: [{
      type: 'gauge',
      data: [{value: participation, name: '参与度'}]
    }]
  }, true);

  // 更新柱状图
  myChart2.setOption({
    xAxis: {
      data: messages.time // 时间点
    },
    series: [{
      data: messages.count // 发言次数
    }]
  }, true);
}

setInterval(updateOnlineData, ); // 每 3 秒更新一次