实验报告-Echarts数据可视化

课程：数据可视化 实验室名称： 指导老师： 实训日期： 年 月 日 实训题目：Echarts数据可视化 实训目的： 一、软件Hbuilder 的安装与基本使用 二、创建项目：HTML文件、JS文件、CSS文件基本使用 三、新建项目、Web可视化项目 输入项目名称后继续 四、Echarts资源下载 五、Echarts官方网站运行10个官方案例 六、在Echarts官方网站查看快速入门文档 七、自行编写数据源 实现案例 折线图 柱状图 饼状图 实训内容：

DOCTYPE html>

  
    
    ECharts
    
    
  
  
    
    
    
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

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


option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

页面效果：