ECharts

最新推荐文章于 2023-11-21 16:33:51 发布

initial627

最新推荐文章于 2023-11-21 16:33:51 发布

阅读量78

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_56004294/article/details/127561099

版权

1.什么是ECharts?

ECharts是一个使用 JavaScript 实现的"数据可视化"库, 它可以流畅的运行在 PC 和移动设备上

2什么是数据可视化?

也就是可以将数据通过图表的形式展示出来，

3ECharts提供的图表类型：

（1）ECharts4.0之前, 底层是使用canvas标签来实现图表绘制的
（2）ECharts4.0开始, 为了提升移动端性能, 还支持 SVG 渲染
（3）ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing）等

ECharts官网地址：

https://echarts.apache.org/zh/index.html

使用步骤

导入ECharts插件
为ECharts准备一个容器
拿到准备好的容器
创建一个ECharts对象
对ECharts进行一些配置（只有这一步不同，因为不同的图标等里
面配置的内容是不一样的，其余五步都是固定的）
将配置传递给ECharts

 <!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>Document</title>
    <!-- 01 导入 js -->
    <script src="./js/echarts.min.js"></script>
    <style>
      /* 03 设置容器样式 */
      #container {
        width: 800px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <!-- 02 创建个容器 -->
    <div id="container"></div>
  </body>
  <script>
    // 04 实例化 echarts
    // 04.1 创建一个实例
    var echart = echarts.init(document.getElementById("container"));
    // 4.2 定义配置顶
    var option = {
      title: {
        text: "我的第一个图表",
      },
      // 图表得提示
      tooltip: {},
      // 图例
      legend: { data: ["睡眠时长"] },
      // x轴线
      xAxis: { data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] },
      // y轴线
      yAxis: {},
      // 设置数据
      series: [
        {
          // 数据名称
          name: "睡眠时长",
          //类型为柱状图
          type: "bar",
          // 数据data
          data: [8, 7, 6, 5, 9, 5, 10],
        },
        
      ],
    };
    // 4.3 更新配置
    echart.setOption(option);
    // chart图表 ser设置 Option选项 data数据 type 类型 bar条（柱状条） serise系列（数据）
    // Axis轴线 Aaxis水平轴向 legend传奇（图例） tooltip提示 init初始化 document文档
  </script>
</html>