ECharts 学习笔记01, 柱状图

目标

使用 ECharts 绘制简单的柱状图, 示例如下

搭建环境

• 新建文件夹 note01, 并新建 index.html, index.css, index.css 文件
• 获取 echarts
  下载源代码版本, 保存为 ./note01/echarts.js

• 至此, note01 的目录结构应该是这样的

  ./note01/
   |---index.html
   |---index.js
   |---index.css
   |---echarts.js

编写 index.html

• 编写一个普通的 html5 文件即可, 然后引入我们的 js, css 文件

编写 css 文件

• 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

  main{
      width: 600px;
      height: 400px;
  }

编写 js 文件

• 我们需要通过 echarts.init(domElement) 方法初始化一个 echarts 实例, 然后通过 setOption() 方法绘图。

  'use strict';
  // 初始化 echarts 实例
  var myEChart = echarts.init(document.getElementsByTagName('main')[0]);
  
  // 设定图表的配置项和数据
  var option = {
      title:{
          text: '柱状图'
      },
      tooltip:{
  
      },
      legend:{
          data:['销量']
      },
      xAxis:{
          data:['衬衫', '裤子', '袜子']
      },
      yAxis:{
  
      },
      series:[{
          name: '销量',
          type: 'bar',
          data: [5, 36, 20]
      }],
  };
  
  // 显示图表
  myEChart.setOption(option);

小结

以上就是使用 ECharts 进行绘图的第一个例子。休息一下，马上开始下一次学习~