HTML & ECharts 可视化迎新数据大屏展示

<div id='studentLocation' style='width: 800px; height: 400px;'></div>
<div id='studentCollege' style='width: 800px; height: 400px;'></div>
<div id='studentGender' style='width: 800px; height: 400px;'></div>
<div id='studentEthnicity' style='width: 800px; height: 400px;'></div>
<script type='text/javascript'>
  // 报到地区折线图
  var locationChart = echarts.init(document.getElementById('studentLocation'));
  var locationOption = {
    title: {
      text: '学生报道地区',
      subtext: '2021年度'
    },
    tooltip: {},
    legend: {
      data: ['学生数量']
    },
    xAxis: {
      data: ['地区A', '地区B', '地区C', '地区D', '地区E']
    },
    yAxis: {},
    series: [{
      name: '学生数量',
      type: 'line',
      data: [120, 200, 150, 80, 70]
    }]
  };
  locationChart.setOption(locationOption);

  // 报到学院柱形图
  var collegeChart = echarts.init(document.getElementById('studentCollege'));
  var collegeOption = {
    title: {
      text: '学生报到学院',
      subtext: '2021年度'
    },
    tooltip: {},
    legend: {
      data: ['学生数量']
    },
    xAxis: {
      data: ['学院A', '学院B', '学院C', '学院D', '学院E']
    },
    yAxis: {},
    series: [{
      name: '学生数量',
      type: 'bar',
      data: [150, 100, 120, 90, 80]
    }]
  };
  collegeChart.setOption(collegeOption);

  // 学生男女比例饼图
  var genderChart = echarts.init(document.getElementById('studentGender'));
  var genderOption = {
    title: {
      text: '学生男女比例',
      subtext: '2021年度'
    },
    tooltip: {},
    legend: {
      data: ['男', '女']
    },
    series: [{
      name: '学生性别',
      type: 'pie',
      radius: '50%',
      data: [
        {value: 60, name: '男'},
        {value: 40, name: '女'}
      ]
    }]
  };
  genderChart.setOption(genderOption);

  // 学生民族飞机航线图
  var ethnicityChart = echarts.init(document.getElementById('studentEthnicity'));
  var ethnicityOption = {
    title: {
      text: '学生民族',
      subtext: '2021年度'
    },
    legend: {
      data: ['学生数量']
    },
    geo: {
      map: 'china',
      roam: true
    },
    series: [{
      name: '学生数量',
      type: 'lines',
      coordinateSystem: 'geo',
      data: [
        {fromName: '北京', toName: '新疆', value: 50},
        {fromName: '上海', toName: '新疆', value: 30},
        {fromName: '广州', toName: '新疆', value: 20},
        {fromName: '深圳', toName: '新疆', value: 10},
        {fromName: '成都', toName: '新疆', value: 5}
      ]
    }]
  };
  ethnicityChart.setOption(ethnicityOption);
</script>
<p>本示例使用ECharts库创建折线图、柱形图、饼图和飞机航线图，通过HTML布局放置这些图表。每个图表都有独立的<code>div</code>元素容纳，并使用<code>echarts.init</code>方法初始化图表对象，通过<code>setOption</code>方法设置配置项和数据。</p>
<p>每个图表都包含标题和副标题，图例用于显示图表中不同系列的标识，工具栏可以通过ECharts配置项启用。</p>