广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ECharts入门教程
  • 160
分享到

ECharts入门教程

2024-04-02 19:04:59 160人浏览 八月长安
摘要

Echart 官网:https://echarts.apache.org/zh/index.html下载页面:Https://echarts.apache.org/zh/downlo

Echart

  • 官网:https://echarts.apache.org/zh/index.html
  • 下载页面:Https://echarts.apache.org/zh/download.html
  • 演示地址:https://echarts.apache.org/examples/zh/index.html
  • 文档:https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

echarts是国内百度团队的产物。charts 完全免费,代码开源

底层为canvas ,支持图表相对要多一些。

1、canvas特点:

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力,能够以.jpg、.png格式保存结果图像
  • 最适合图像密集型的游戏,一旦其位置发生拜年话,其中的许多对象会被频繁重绘

2、ECharts 特性

ECharts 包含了以下特性:

  • 丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
  • 多种数据格式无需转换直接使用: 内置的 dataset 属性(4.0+)支持直接传入包括二维表,key-value 等多种格式的数据源,此外还支持输入 TypedArray 格式的数据。
  • 千万数据的前端展现: 通过增量渲染技术(4.0+),配合各种细致的优化,ECharts 能够展现千万级的数据量。
  • 移动端优化: 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。
  • 多渲染方案,跨平台使用: 支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。
  • 深度的交互式数据探索: 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
  • 多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等,传入的数据也可以是多个维度的。
  • 动态数据: 数据的改变驱动图表展现的改变。
  • 绚丽的特效: 针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效。
  • 通过 GL 实现更多更强大绚丽的三维可视化: 在 VR,大屏场景里实现三维的可视化效果。
  • 无障碍访问(4.0+): 支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问!

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
     引入 echarts.js 
    <script src="echarts.min.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入门教程的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: ECharts入门教程

本文链接: https://www.lsjlt.com/news/150665.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • ECharts入门教程
    Echart 官网:https://echarts.apache.org/zh/index.html下载页面:https://echarts.apache.org/zh/downlo...
    99+
    2022-11-13
  • ECMAScript6入门教程
    目录你的浏览器支持ES吗?ES 6 新特性汇总(一图全览)1. let、const 和 block 作用域2. 箭头函数(Arrow Functions)3. 函数参数默认值4. S...
    99+
    2022-11-13
  • maven3 入门教程
    Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ Maven常用命令:  1. 创建Maven的普通java项目:  ...
    99+
    2023-01-31
    入门教程
  • Flask 入门教程
    Flask 入门教程 一、Flask简单使用 1、准备环境 硬件:Windows 7+python 3.6+安装软件:pycharm安装(社区版)、python环境安装 2、简单的Flask应用 本地...
    99+
    2023-10-07
    flask python 后端
  • Navicat入门教程
    本篇内容主要讲解“Navicat入门教程”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Navicat入门教程”吧!一、 连接使用 1.1 连接数据库打...
    99+
    2022-10-18
  • node.js入门教程
    Node是个啥?   写个东西还是尽量面面俱到吧,所以有关基本概念的东西我也从网上选择性的拿了些下来,有些地方针对自己的理解有所改动,对这些概念性的东西有过了解的可选择跳过这段。   1.Node 是一个服...
    99+
    2022-06-04
    入门教程 node js
  • Jmeter入门教程
    目录一、下载二、安装三、运行四、一个简单的压测实例五、如何查看系统负载何性能瓶颈jemter简介 jmeter是apache公司基于java开发的一款开源压力测试工具,体积小,功能全...
    99+
    2022-11-12
  • HTML5 入门教程
    本篇内容主要讲解“HTML5 入门教程”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5 入门教程”吧!JavaScript作为一种弱类型语言,最大的特点就是动态类型。也就是说不用提前声明...
    99+
    2023-06-09
  • IPv6入门教程
    本篇文章主要从基础概念、IPv6的相关网络工具、关于移动应用在IPv6和IPv4网络环境中自动降级机制的研究等三个方面介绍了IPv6的入门教程。前言众所周知,32位的IPv4地址已经基本耗尽(这里的耗尽只是说的分配完了,实际上有相当一部分并...
    99+
    2023-06-03
  • Lighttpd入门教程
    Lighttpd入门教程 概述入门教程安装配置静态文件服务动态文件服务 虚拟主机SSL启动服务器日志模块总结lighthttpd使用场景和原理使用场景原理 概述 Lightt...
    99+
    2023-09-04
    服务器 linux ubuntu
  • Python入门教程(二)
      今天讲编程思维。  可能这对初次接触编程的人有用——我不是不想切入正题,我只是想强调根本没什么正题,我可能在其他文章里提过这一点。“编程语言就是语法糖”,可能你不知道什么是语法糖,但是知道的人也未必认同我。我不保证你们能听懂……pyth...
    99+
    2023-01-31
    入门教程 Python
  • python入门教程(零)
    (本文针对Windows)   Python是什么?是一种编程语言。编程语言是什么?就是和机器说话的方式。编译器和解释器好比翻译,把你的话翻成机器听得懂的。但是这些翻译不怎么智能(虽然也有高下),你必须说一套很机械的官腔,他们才帮你翻译——...
    99+
    2023-01-31
    入门教程 python
  • linux入门教程(3)
    (文:flynng)  3.4 进程管理  Linux是一个多用户多任务的操作系统。多用户是指多个用户可以在同一时间使用计算机系统;多任务是指Linux可以同时执行几个任务,它可以在还未执行完一个任务时又执行另一项任务。  在Linux系统...
    99+
    2023-01-31
    入门教程 linux
  • Android RecylerView入门教程
    今年Google I/0大会,Google开放了两个全新的视图:RecyclerView和CardView。这篇文章会提供关于RecylerView的简介。 RecylerVi...
    99+
    2022-06-06
    教程 Android
  • pgpool-II 入门教程
    欢迎阅读 pgpool-II 入门教程。从本教程中,你将学会如何安装,设置 pgpool-II 以及使用 pgpool-II 运行并行查询和复制。我们假设你已经知道PostgreSQL的基础操作,所以如果...
    99+
    2016-11-03
    pgpool-II 入门教程
  • python pygame入门教程
    目录一、安装二、第一个代码实例三、绘制一个矩形框四、绘制矩形框的进阶版本五、绘制一条直线六、绘制一条弧线一、安装 在 cmd 命令中输入: pip install pygame 即可安装成功了 二、第一个代码实例 代...
    99+
    2022-06-02
    python pygame pygame入门教程
  • python jupyter入门教程
    目录1.jupyter2.jupyter基础操作2.1windows更新pip库2.2jupyter安装2.3初次启动jupyter2.4设置密码进入jupyter3.创建一个jupyter文本4.jupyter文本...
    99+
    2022-06-02
    python jupyter入门 python jupyter
  • nodejs教程之入门
    前言 再不学nodeJs,我们就老了......在HTML5大浪袭来的时候,很多先辈就开始了NodeJs之旅,而那时我还在做服务器端的程序 后来转成前端,和梯队的距离已经很大了,因为我会服务器端语言,还干了...
    99+
    2022-06-04
    入门 教程 nodejs
  • python入门教程(一)
      我们依然不讲代码,而是先说命令行。   为什么命令行如此重要?之前说到,命令行是你和电脑对话的地方。你可以用句子的方式把信息发给电脑,电脑再以句子的方式给你回应。在编程领域,有些消息只能用命令行告诉电脑——或许是编程人员早就习惯了,或许...
    99+
    2023-01-31
    入门教程 python
  • C++BoostSpirit入门教程
    目录一、Boost.Spirit库介绍二、boost::spirit::qi::parse()解析格式三、解析器一、Boost.Spirit库介绍 本章介绍库 Boost.Spiri...
    99+
    2022-11-16
    C++ Boost Spirit C++ Spirit
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作