Echarts前端可视化库使用教程

这篇具有很好参考价值的文章主要介绍了Echarts前端可视化库使用教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Echarts介绍

ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
官网:https://echarts.apache.org/zh/index.html

快速上手

  1. 引入 Apache ECharts
    在刚才保存 echarts.js 的目录新建一个 index.html 文件,内容如下:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>
  1. 绘制一个简单的图表
    在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 之后,添加:
<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

这样你的第一个图表就诞生了!
Echarts前端可视化库使用教程
同时Echarts官网给除了很多示例供大家选择使用,如图
Echarts前端可视化库使用教程

主要配置(常用的)

需要了解的主要配置:series xAxis yAxis grid tooltip title legend color

series
– 系列列表。每个系列通过 type 决定自己的图表类型
– 通俗的理解:图标数据,指定什么类型的图标,可以多个图表重叠。

xAxis:直角坐标系 grid 中的 x 轴

– boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

yAxis:直角坐标系 grid 中的 y 轴

grid:直角坐标系内绘图网格。

title:标题组件

tooltip:提示框组件

legend:图例组件

color:调色盘颜色列表

stack:数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

还有很多怕配置项,具体可参考配置链接文章来源地址https://www.toymoban.com/news/detail-498774.html

到了这里,关于Echarts前端可视化库使用教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ECharts的三维可视化及在微信小程序中简单使用笔记

    目录 在微信小程序中使用 ECharts 三维可视化 ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由

    2024年02月16日
    浏览(42)
  • 在vue项目使用数据可视化 echarts ,柱状图、折线图、饼状图使用示例详解及属性详解

      npm install echarts --save 页面导入:   import * as echarts from \\\'echarts\\\' 全局导入:  main.js 中,导入并注册到全局   import echarts from \\\'echarts\\\'   Vue.prototype.$echarts = echarts

    2024年02月13日
    浏览(39)
  • Echarts数据可视化 第4章 Echarts可视化图 4.10 热力图

    Echarts数据可视化 Echarts数据可视化:入门、实战与进阶 第4章 Echarts可视化图 4.10 热力图 热力图是一种密度图,使用不同颜色和不同颜色深浅程度来表示数据量的区别。 举个栗子 渲染效果 解释一下这个图 其中横轴代表小时,纵轴表示星期几,图中不同颜色的区块代表了数据

    2024年02月14日
    浏览(45)
  • ECharts数据可视化

    目录 第一章 什么是ECharts 第二章 搭建环境  2.1 Echarts的下载 2.2 Visual Studio Code下载 第三章 一个简单的可视化展示 第四章 Echarts组件 4.1 标题 4.2 提示框 4.3 工具栏 4.4 图例 4.5 时间轴 4.6 数据区域缩放 4.6.1 滑动条型数据区域缩放 4.6.2 内置型数据区域缩放    4.6.3 框选型数据

    2024年02月10日
    浏览(41)
  • Echarts实现可视化大屏

    手把手带你做出一个可视化大屏,轻松完成期末大作业。 关注公众号” Python爬虫与数据分析 “回复“ 可视化大屏 ”获取代码及数据 涉及到的技术:Echarts、HTML、css、JavaScript Echarts官网: https://echarts.apache.org/handbook/zh/concepts/axis/ 目录 1、echarts同时展示多幅图 2、使用css优化

    2024年02月09日
    浏览(96)
  • 数据可视化一、ECharts

    1、数据可视化 (1)数据可视化 数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。 (2)数据可视化的场景 目前互联网公司通常有这么几大类的可视化需求: (3)常见

    2024年02月05日
    浏览(44)
  • ECharts数据可视化--常用图表类型

    目录 一.柱状图 1.基本柱状图  1.1最简单的柱状图 ​编辑   1.2多系列柱状图   1.3柱状图的样式          (1)柱条样式                  (2)柱条的宽度和高度         (3)柱条间距         (4)为柱条添加背景颜色 ​编辑 2.堆叠柱状图 3.动态排序柱状图 4.阶梯

    2024年02月05日
    浏览(51)
  • 构建数据可视化(基于Echarts,python)

    本文目录: 一、写在前面的题外话 二、数据可视化概念 三、用Python matplotlib库绘制数据可视化图 四、基于Echarts构建大数据可视化 4.1、安装echarts.js 4.2、数据可视化折线图制作 4.2.1、基础折线图 4.2.2、改善折线图 4.2.3、平滑折线图 4.2.4、虚线折线图 4.2.5、阶梯折线图 4.2.6、面

    2024年02月11日
    浏览(57)
  • 可视化 | 【echarts】渐变条形+折线复合图

    html:在这主要是用于整合,将html、css、js连接在一块,虽然单个模板代码量不大,但还是先分开,之后模板运用更自如。 css:这里的css主要实现了以下几个效果: ①加了一个浅浅的背景色 ②将图标框水平垂直居中 ③以视口大小为准作60%缩放 使用 echarts.init 方法初始化了一

    2024年01月20日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包