轻松五步快速上手ECharts

最新推荐文章于 2022-08-20 20:25:45 发布

粽子师兄

最新推荐文章于 2022-08-20 20:25:45 发布

阅读量506

点赞数

分类专栏： echarts 文章标签： echarts javascript 前端数据可视化

本文链接：https://blog.csdn.net/qq_45268602/article/details/122842462

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

前期准备
准备echarts所需的js，可从这里下载提取码rvk9

步骤1：引入echarts.js文件

<script src="../js/echarts.min.js"></script>

步骤2：准备一个呈现图表的盒子

<div id="myEcharts" style="width: 600px; height: 400px"></div>

步骤3：初始化echarts实例对象

var mEcharts = echarts.init(document.getElementById("myEcharts"));

步骤4：准备配置项

var 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",
    },
  ],
};

步骤5：将配置项设置给echarts实例对象

mEcharts.setOption(option);

在这里插入图片描述
完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>create echarts</title>
    <!-- 步骤1：引入echarts.js文件 -->
    <script src="../js/echarts.min.js"></script>
  </head>
  <body>
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div id="myEcharts" style="width: 600px; height: 400px"></div>
    <script>
      // 步骤3：初始化echarts实例对象
      var mEcharts = echarts.init(document.getElementById("myEcharts"));
      // 步骤4：准备配置项
      var 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",
          },
        ],
      };
      // 步骤5：将配置项设置给echarts实例对象
      mEcharts.setOption(option);
    </script>
  </body>
</html>

粽子师兄

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
轻松五步快速上手ECharts

步骤1：引入echarts.js文件步骤2：准备一个呈现图表的盒子步骤3：初始化echarts实例对象步骤4：准备配置项步骤5：将配置项设置给echarts实例对象前期准备准备echarts所需的js，可从这里下载提取码rvk9步骤1：引入echarts.js文件<script src="../js/echarts.min.js"></script>步骤2：准备一个呈现图表的盒子<div id="myEcharts" style="w..
复制链接

扫一扫