echarts的学习（一）快速上手,很快创建一个echarts的项目

一写代码就开心

发布于 2021-01-05 12:29:41

1K0

发布于 2021-01-05 12:29:41

  步骤1：引入echarts.js文件
  步骤2：准备一个呈现图表的盒子
  步骤3：初始化echarts实例对象
  步骤4：准备配置项
  步骤5：将配置项设置给echarts实例对象

第一步

网上下载echarts的js文件，因为我们要用人家的东西，所以要下载人家的东西，最后根据人家的规范进行写代码。

以上的这个就是我下载的js文件。

第二步

创建一个html文件，里面将这个echarts的js文件导入

  <!-- 步骤1：引入echarts.js文件 -->
  <script src="lib/echarts.min.js"></script>

第三步

创建一个div，也就是最后的图形要放到哪里，我们就自己创建一个div，之后的图形我们就创建到这个div里面

  <!-- 步骤2：准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 400px"></div>

第四步

如何告诉echarts，我们创建的图形要放到这个div里面，这个时候就要创建echarts的对象，利用这个对象将div和图形关联起来。

因为我们要用echarts 的东西，所以我们要创建人间的对象，现在就是要创建echarts的对象

因为是js代码，所以要放到script里面

    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'));

以上代码的意思就是我创建了echarts的对象，并且这个对象和div这个区域已经绑定了，以后用echarts创建的图形，就会放到这个div里面。

第五步

我们要创建什么图形呢？这个时候就需要配置项了，在这个配置项里面进行配置写代码，也就是用代码画图，写出我们需要展示的什么图形。

 // 步骤4：准备配置项
    var option = {     //这个是创建一个配置对象，里面的参数就是我们要画的图形
      xAxis: {   //这个是设置x轴
        type: 'category',
        data: ['小明', '小红', '小王']   //设置X轴的值
      },
      yAxis: { //这个是设置Y轴
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',  //设置我们要画的图形，这个是柱状图
          data: [70, 92, 87]  //设置Y轴的值
        }
      ]
    }

第六步

已经用代码画出东西了，也就是完成了配置项，那么如何将这个图形放到div里面了？

之后已经创建了echarts的对象，并且这个对象和div关联，所以我们使用这个对象就可以将配置放到div里面了

    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option)

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 步骤1：引入echarts.js文件 -->
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <!-- 步骤2：准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'));
    // 步骤4：准备配置项
    var option = {
      xAxis: {
        type: 'category',
        data: ['小明', '小红', '小王']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: [70, 92, 87]
        }
      ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option)
  </script>
</body>

</html>

最后展示的图形就是