js图表库——ECharts带你入门

最新推荐文章于 2023-10-16 14:26:06 发布
最新推荐文章于 2023-10-16 14:26:06 发布
阅读量774 收藏
点赞数
分类专栏： EChars图形化技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hdchenyue/article/details/51134125
版权
这个开源的图标库来自百度EFE数据可视化团队。Highcharts 与之比起来简直不能看啊，人家做一个图表都开始往大数据方面思考了，你还在做功能，这产品差距就不是一个数量级的。 这里就不多废话：


　　Echarts 首页：http://echarts.baidu.com/index.html


　　特性：http://echarts.baidu.com/doc/feature.html


　　不贴地址了，想要了解的看一下特性就好了，想要入门的继续往下看。


　　ECharts 底层依赖于 Html5 的轻量级的Canvas类库ZRender ，这也是它的效果这么绚丽的原因。它与 js charts类似，不依赖其他 js 类库，相比之下 Highcharts还要依赖JQuery等类库。不过，ECharts也不是什么缺点都没有的，在线演示平台、文档，


　　初学者可能会被ECharts那个带你入门的那2个示例弄晕，这里来一个个解释：





　　1、AMD规范的加载器——esl.js，这是什么？


　　答：关于AMD规范可以参考阮一峰的这篇文章Javascript模块化编程（二）：AMD规范 简单来说，AMD规范就是异步方式加载模块的一种方式，避免因为模块加载过慢而导致浏览器“假死”。


　　


　　2、我们先来看一下echart的大概的包：　
•echarts.js : 经过压缩，包含除地图外的全部图表
•echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表
•echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
•echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据


　　看得出，这种分类非常有意义。





　　3、echarts更规范的一点，那就是模块化加载，需要哪个部分就是用哪个部分。


　　关于Echarts的那个入门图表，我想很多新手跟我一样的迷惑，require和require.config这个两个公共方法到底什么来的？


　　答：AMD规范的加载器——esl.js的公共方法。（如有错误，请指正。）


　　


　　4、require.config的作用是什么？


　　答：为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径。一切尽在echarts-2.0.4文件夹下的src文件夹中。





　　5、解释一下require方法？


　　答：require方法有2个参数。


　　第一个参数为一个数组，数组元素是需要加载的echarts模块，需要哪个就加载哪个。（经本人测试，这个数组传入一个空数组都是可以的 !- -）莫非，传入不正确，会加载全部文件到内存，传入正确就加载部分模块到内存？求大神解答！


　　第二个参数为一个带一个参数的方法：function (ec){}, 这个ec对象就是echarts对象了。





　　OK，基本解释完了。可能初学者看了Eharts入门实例还是不太理解那Echarts3种导入方式的用法。（入门示例只有2种——标签式单文件引入和模块化单文件引入）


　　因为入门实例里，js文件指向的是百度服务器上的资源，而我们一般开发，js资源都是放在本地的。


　　


　　6、来看一下，本地创建3种Echarts导入的例子，下面是那3个示例文件的源码（官网Demo粗略修改而成）：


　　（1）、标签式单文件引入.html：　　
  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5. </head>
  6. <body>
  7.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8.     <div id="main" style="height:400px"></div>
  9.     <!-- ECharts单文件引入 -->
  10.     <script src="js/echarts.js"></script>
  11.     <script type="text/javascript">
  12.         // 基于准备好的dom，初始化echarts图表
  13.         var myChart = echarts.init(document.getElementById('main')); 
  14.         
  15.         var option = {
  16.             tooltip: {
  17.                 show: true
  18.             },
  19.             legend: {
  20.                 data:['销量']
  21.             },
  22.             xAxis : [
  23.                 {
  24.                     type : 'category',
  25.                     data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  26.                 }
  27.             ],
  28.             yAxis : [
  29.                 {
  30.                     type : 'value'
  31.                 }
  32.             ],
  33.             series : [
  34.                 {
  35.                     "name":"销量",
  36.                     "type":"bar",
  37.                     "data":[5, 20, 40, 10, 10, 20]
  38.                 }
  39.             ]
  40.         };

  42.         // 为echarts对象加载数据 
  43.         myChart.setOption(option); 
  44.     </script>
  45. </body>
复制代码


　　（2）、模块化包引入.html，这个就需要用到2个src文件。
  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5.     <!--从当前页面，引入模块加载器esl.js-->
  6.     <script src="js/esl.js"></script>
  7. </head>
  8. <body>
  9.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  10.     <div id="main" style="height:400px"></div>
  11.     <script type="text/javascript">
  12.         // 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
  13.         require.config({
  14.             packages: [
  15.                 {
  16.                     name: 'echarts',
  17.                     location: 'js/src',      
  18.                     main: 'echarts'
  19.                 },
  20.                 {
  21.                     name: 'zrender',
  22.                     location: 'js/zrender/src', 
  23.                     main: 'zrender'
  24.                 }
  25.             ]
  26.         });
  27.         
  28.         // 使用
  29.         require(
  30.             [
  31.             ],
  32.             function (ec) {
  33.                 // 基于准备好的dom，初始化echarts图表
  34.                 var myChart = ec.init(document.getElementById('main')); 
  35.                 
  36.                 var option = {
  37.                     tooltip: {
  38.                         show: true
  39.                     },
  40.                     legend: {
  41.                         data:['销量']
  42.                     },
  43.                     xAxis : [
  44.                         {
  45.                             type : 'category',
  46.                             data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  47.                         }
  48.                     ],
  49.                     yAxis : [
  50.                         {
  51.                             type : 'value'
  52.                         }
  53.                     ],
  54.                     series : [
  55.                         {
  56.                             "name":"销量",
  57.                             "type":"bar",
  58.                             "data":[5, 20, 40, 10, 10, 20]
  59.                         }
  60.                     ]
  61.                 };
  62.         
  63.                 // 为echarts对象加载数据 
  64.                 myChart.setOption(option); 
  65.             }
  66.         );
  67.     </script>
  68. </body>
复制代码


　　（3）、模块化单文件引入.html


  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5.     <!--从当前页面，引入模块加载器esl.js-->
  6.     <script src="js/esl.js"></script>
  7. </head>
  8. <body>
  9.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  10.     <div id="main" style="height:400px"></div>
  11.     <script type="text/javascript">
  12.         // 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
  13.         require.config({
  14.             paths:{ 
  15.                 'echarts' : './js/echarts',
  16.                 'echarts/chart/bar' : './js/echarts'
  17.             }
  18.         });
  19.         
  20.         // 使用
  21.         require(
  22.             [
  23.                 'echarts',
  24.                 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
  25.             ],
  26.             function (ec) {
  27.                 // 基于准备好的dom，初始化echarts图表
  28.                 var myChart = ec.init(document.getElementById('main')); 
  29.                 
  30.                 var option = {
  31.                     tooltip: {
  32.                         show: true
  33.                     },
  34.                     legend: {
  35.                         data:['销量']
  36.                     },
  37.                     xAxis : [
  38.                         {
  39.                             type : 'category',
  40.                             data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  41.                         }
  42.                     ],
  43.                     yAxis : [
  44.                         {
  45.                             type : 'value'
  46.                         }
  47.                     ],
  48.                     series : [
  49.                         {
  50.                             "name":"销量",
  51.                             "type":"bar",
  52.                             "data":[5, 20, 40, 10, 10, 20]
  53.                         }
  54.                     ]
  55.                 };
  56.         
  57.                 // 为echarts对象加载数据 
  58.                 myChart.setOption(option); 
  59.             }
  60.         );
  61.     </script>
  62. </body>
复制代码




　　2、如果上面的还有不明白的，参考一下我的本地目录：






　　js中有如下的文件：






　　其中，src是echarts-2.0.4文件夹下的src文件夹，zrender里面也有一个src文件夹，是zrender-2.0.4文件夹下面的src文件夹
c人生的旅途
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECharts-Javascript的图表库推荐
Wave的专栏
05-02 2万+
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
echarts图表
yangyw2的博客
11-05 597
echarts 官网地址https://echarts.apache.org/zh/index.html 第一件事情就是先下载echarts.js 下载步骤： 拉到最下面选方法三 选自己想要做的图表类型还有个各种特效然后点击下载 网站会在线打包下载一个js,放到项目里面就行了 折线图项目实操： 项目前台代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
echarts.js
10-19
echarts官网下的js,用于方便以后使用数据图，地图等时用。
可视化神器 —— ECharts 基础入门
an_wenhao的博客
06-24 416
什么是数据可视化？ 数据可视化，就是关于数据视觉表现形式的科学技术研究。提到数据可视化这个词，人们头脑里往往对它的印象都是「高大上」、「炫酷」。比如像这样的： ECharts，一个使用JavaScript实现的开源可视化库，提供丰富的可视化类型，包括常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 一、引入 ECha
【高级课程笔记】—— Echarts入门&常用组件
柳柳66的博客
10-19 396
官网 一、浏览器画图方式有两种 canvas ：点阵图，缩放失真，适合图形数量非常大的图表 svg：矢量图，缩放不失真，适合图形数量较少的图表 二、echarts 的绘图步骤 建立dom 容器 引入 ECharts 实例化echarts 建立图表配置项 显示图表 <!DOCTYPE html> <html lang="en"> <head>...
电商后台管理系统商品报表功能——ECharts入门示例
实践求真知
09-13 1156
一点睛 1安装echarts运行依赖 二 代码 1新建 Report.vue <template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-br...
echarts-all.js
02-02
echarts js 较全的一个版本，可以基本实现官网上的所有图表绘制
echarts 完全版 js
05-11
echarts 完全版 js
echarts.js完整版文件
03-04
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
echarts图表离线所需js文件-echarts.js
10-22
echarts图表离线所需js文件-echarts.js 本资源转载自网络，如有侵权，请联系上传者或csdn删除
课程设计项目准备——Echarts自学笔记
weixin_43985267的博客
02-16 244
2.16自学笔记——初时Echarts 本文章仅记录自学进度及笔记，不用于任何商业用途，如有侵权请联系作者，作者将第一时间对相应内容进行删除。 为什么要学Echarts？Echarts有什么用？ 获取Echarts 通过 npm 获取 echarts，npm install echarts --save，在安装后使用时出现问题，查询相关资料后得知新版本不兼容vue，需安装4.9版本。在main.js中进行引入： import echarts from 'echarts' Vue.prototy
echarts python 教程_Echarts入门(零基础小白教程)
weixin_39598308的博客
12-16 1775
前言适合0前端基础的小白，什么配置啊，不会啊，我就想画个图先，没问题，按照步骤做，先来实现第一个图，之后官方教程会教会你更多的。下载echarts小白建议，直接下完整版，先搞清楚怎么画出一张图再说点击这里下载Echarts，进入链接，选择完整版下载，之后会得到一个echarts.min.js的一个js脚本，别管他，先放着。新建一个html文件我这里取名为echartstest.html,然后将下面...
echarts.js学习
瓶起子的博客
07-27 234
分阶段渐变的效果，个人觉得不是很实用 无标题文档 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 引入 ECharts 主模块 option = {
echarts.js 简单入门
热门推荐
mry6的博客
04-30 1万+
echarts.js 简单入门echarts.js简介echarts.js的使用步骤：1.引用echarts.min.js文件2.准备放图表的容器3.设置参数，初始化图表完整页面代码：效果： echarts.js简介 echarts.js是一款基于HTML5的图形库。图形的创建也比较简单，直接引用Javascript即可。 使用这个库的优点： 这个库是百度的项目，而且一直有更新，目前最新的是EC...
JS-ECharts-前端图表 多层级联合饼图、柱状堆叠图、柱/线组合图、趋势图、自定义中线、平均线、气泡备注点
君琴 的博客
09-23 3006
JavaScript编码，使用ECharts绘制前端图表：多层级联合饼图、柱状堆叠图、柱/线组合图、趋势图、自定义中线、平均线、气泡备注点、自定义数据分类占比、批注内容等
JavaScript之ECharts 入门级教程
最新发布
zhong_333的博客
10-16 3383
<title>第一个 ECharts 实例</title>-- 引入 echarts.js -->
JavaScript实战：ECharts图表库详解与入门指南
"本文档是一份关于JavaScript高级图表库ECharts的详细介绍和用法指南。ECharts是一款强大的前端可视化工具，它利用纯JavaScript实现丰富的图表类型，并且底层依赖于轻量级的Canvas类库ZRender，遵循BSD开源协议。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值