ECharts快速上手

最新推荐文章于 2024-09-21 19:53:56 发布

工程人永远在路上

最新推荐文章于 2024-09-21 19:53:56 发布

阅读量420

点赞数

文章标签： echarts javascript 前端数据可视化大屏

本文链接：https://blog.csdn.net/the_Milky/article/details/122633572

版权

ECharts快速上手

下载echarts.min.js 文件：https://raw.githubusercontent.com/apache/echarts/5.2.2/dist/echarts.min.js
在文章中点击鼠标右键，然后另存为.js.

第一步： mkdir js # 创建 js 文件夹

第二步：cd js # 切换到 js 文件夹

第三步：将下载的.js文件放在js文件下面

新建 index.html 输入以下内容引入 echarts.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ECharts 快速上手</title>
  </head>
  <body></body>
  <script src="./js/echarts.min.js"></script>
</html>

准备一个具备大小的 DOM 容器

修改 index.html 如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ECharts 快速上手</title>
  </head>
  <style>
    * {
      margin: 0;//外边距属性
      padding: 0;//内边距属性
    }
    /* 设置成宽高为 400 像素的粉色盒子 */
    #box {
      margin: 20px;
      width: 400px;
      height: 400px;
      background-color: pink;
    }
  </style>
  <body>
    <!-- 创建一个容器 box -->
    <div id="box"></div>
  </body>
  <script src="./js/echarts.min.js"></script>
</html>

效果：
在这里插入图片描述

初始化 ECharts 实例对象

使用官方文档提供的 echarts.init() 函数初始化实例对象，语法为：

echarts.init(dom);

参数 dom 是实例容器，一般是一个具有高宽的 div 元素。修改 index.html 加入以下内容

<script>
  // 初始化实例对象 echarts.init(dom)容器;
  var myChart = echarts.init(document.querySelector('#box'));
</script>

指定配置项和数据（option）

找一个 ECharts 所给的基础图表的配置项和数据。修改 index.html 加入以下内容：

var option = {
  title: {
    text: 'ECharts 入门示例',
  },
  tooltip: {},
  legend: {
    data: ['销量'],
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

注意：你暂时不需要知道这些配置项是什么意思，后续会进行详细讲解。

将配置项设置给 ECharts 实例对象

修改 index.html 加入以下内容：

myChart.setOption(option);

最终代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ECharts 快速上手</title>
  </head>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #box {
      margin: 20px;
      width: 400px;
      height: 400px;
      background-color: pink;
    }
  </style>
  <body>
    <div id="box"></div>
  </body>
  <script src="./js/echarts.min.js"></script>
  <script>
    // 初始化实例对象 echarts.init(dom)容器;
    var myChart = echarts.init(document.querySelector('#box'));
    // 指定配置项和数据
    var option = {
      title: {
        text: 'ECharts 入门示例',
      },
      tooltip: {},
      legend: {
        data: ['销量'],
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    // 将配置项设置给 echarts 实例对象。
    myChart.setOption(option);
  </script>
</html>