引语：echarts.js是百度团队推出的一款用于图表可视化的插件，用于以图表的形式展现数据，功能强大，上手简单

1、从官方网站中下载所需的echarts.js文件，该文件因功能广泛，包体较大，可自行决定按需打包下载。

2、从前端页面引入echarts.js，后即可使用

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

3、请看如下使用案例：

　　 大致就是引入js

　　选一个图表容器（DIV）

　　初始化echarts对象并绑定到该容器上

　　给绑定的echarts容器配置图表参数来展示数据

　　根据业务结合官网API的属性和方法对图表进行自由控制

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>echarts入门</title>
  6.     </head>
  7.  
  8.     <script src="js/jquery-2.2.4.js"></script>
  9.     <script src="js/echarts.min.js"></script>
  10.     <style>
  11.  
  12.         .box{
  13.             width:900px;
  14.             height: 900px;
  15.             border:4px double seagreen;
  16.             margin: auto;
  17.             float: left;
  18.         }
  19.  
  20.     </style>
  21.  
  22.     <body>
  23.  
  24.                 <div class="box"></div>
  25.                 <div class="box"></div>
  26.                 <div class="box"></div>
  27.                 <div class="box"></div>
  28.                 <div class="box"></div>
  29.                 <div class="box"></div>
  30.                 <div class="box"></div>
  31.                 <div class="box"></div>
  32.  
  33.     </body>
  34.  
  35.     <script>
  36.  
  37.         var myChart1 = echarts.init(document.getElementsByClassName('box')[0]);
  38.  
  39.         var myChart2 = echarts.init(document.getElementsByClassName('box')[1]);
  40.  
  41.         var myChart3 = echarts.init(document.getElementsByClassName('box')[2]);
  42.  
  43.         var myChart4 = echarts.init(document.getElementsByClassName('box')[3]);
  44.  
  45.         var myChart5 = echarts.init(document.getElementsByClassName('box')[4]);
  46.  
  47.         //指定图表的配置项和数据
  48.         var option1 =  {
  49.             title: {text:'商户营业状态'},
  50.  
  51.             tooltip : {
  52.                 trigger: 'item',
  53.                 formatter: "{a} <br/>{b} : {c} ({d}%)"
  54.             },
  55.             legend: {
  56.                 orient : 'vertical',
  57.                 x : 'right',
  58.                 y:'bottom',
  59.                 data:['营业中','未营业']
  60.             },
  61.             calculable : true,
  62.             series : [
  63.                 {
  64.                     name:'访问来源',
  65.                     type:'pie',
  66.                     radius : ['30%', '40%'],
  67.                     itemStyle : {
  68.                         normal : {
  69.                             label : {
  70.                                 show : false
  71.                             },
  72.                             labelLine : {
  73.                                 show : false
  74.                             }
  75.                         },
  76.                         emphasis : {
  77.                             label : {
  78.                                 show : true,
  79.                                 position : 'center',
  80.                                 textStyle : {
  81.                                     fontSize : '20',
  82.                                     fontWeight : 'bold'
  83.                                 }
  84.                             }
  85.                         }
  86.                     },
  87.                     data:[
  88.                         {value:635, name:'营业中'},
  89.                         {value:310, name:'未营业'},
  90.                     ]
  91.                 }
  92.             ]
  93.         };
  94.  
  95.         var option2 =  {
  96.             title:{
  97.                 text:'服装店销售统计'
  98.             },
  99.             //提示框组件
  100.             tooltip:{
  101.                 //坐标轴触发，主要用于柱状图，折线图等
  102.                 trigger:'axis'
  103.             },
  104.             //图例
  105.             legend:{
  106.                 data:['销量'],
  107.                 x:'right'
  108.             },
  109.             //横轴
  110.             yAxis:{
  111.                 data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  112.             },
  113.             //纵轴
  114.             xAxis:{},
  115.             //系列列表。每个系列通过type决定自己的图表类型
  116.             series:[{
  117.                 name:'销量',
  118.                 //折线图
  119.                 type:'bar',
  120.                 data:[5, 20, 36, 10, 10, 20]
  121.             }]
  122.         };
  123.  
  124.         myChart1.setOption(option1);
  125.  
  126.         myChart2.setOption(option2);
  127.  
  128.     </script>
  129.  
  130. </html>

4、上图创有六个DIV，其中两个配置了Echarts显示参数，运行如下图：

可以看到，前两个DIV已经有图表展示，剩下的四个DIV都是没有数据的，各位可以拷贝运行下，别忘了先下载echarts.js。

接下来，就是真正入门教程了，提供一波网站快速学习：

echartsAPI参考

echarts案例参考

百度echarts教程

从各大教程网站的案例中直接练习，结合API调整样式，能在最快的时间上手！

祝大家学习愉快~

Echarts入门教程精简实用系列的更多相关文章

  1. gitbook 入门教程之实用插件(新增3个插件)

    插件没有什么逻辑顺序,大家可以按照目录大纲直接定位到感兴趣的插件部分阅读即可. 更多插件正在陆续更新中,敬请期待... 最新更新插件 tbfed-pagefooter 版权页脚插件 gitalk 评论 ...

  2. gitbook 入门教程之小白都能看懂的 Gitbook 插件开发全流程

    什么是插件 Gitbook 插件是扩展 GitBook 功能(电子书和网站)的最佳方式. 只要是 Gitbook 默认没有提供的功能,基于插件机制都可以自行扩展,是插件让 Gitbook 变得更加强大 ...

  3. ABP(现代ASP.NET样板开发框架)系列之2、ABP入门教程

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  4. WPF入门教程系列二十三——DataGrid示例(三)

    DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...

  5. WPF入门教程系列三——Application介绍(续)

    接上文WPF入门教程系列二——Application介绍,我们继续来学习Application 三.WPF应用程序的关闭 WPF应用程序的关闭只有在应用程序的 Shutdown 方法被调用时,应用程序 ...

  6. WPF入门教程系列二——Application介绍

    一.Application介绍 WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只 ...

  7. 2016 版 Laravel 系列入门教程（五）【最适合中国人的 Laravel 教程】

    本教程示例代码见: https://github.com/johnlui/Learn-Laravel-5 在任何地方卡住,最快的办法就是去看示例代码. 本文是本系列教程的完结篇,我们将一起给 Arti ...

  8. Laravel 5 系列入门教程（一）【最适合中国人的 Laravel 教程】

    Laravel 5 系列入门教程(一)[最适合中国人的 Laravel 教程] 分享⋅ johnlui⋅ 于 2年前 ⋅ 最后回复由 skys215于 11个月前 ⋅ 17543 阅读   原文发表在 ...

  9. Laravel 4 系列入门教程（一）

    默认条件 本文默认你已经有配置完善的PHP+MySQL运行环境,懂得PHP网站运行的基础知识.跟随本教程走完一遍,你将会得到一个基础的包含登录的简单blog系统,并将学会如何使用一些强大的Larave ...

随机推荐

  1. Python_异常处理、调试

    1.try except 机制 # 错误处理 # 一般程序都要用到错误捕获,当没有加且有错误的时候Python解释器会执行错误捕获,且是一层层向上捕获[所以问题点会在最下面] try: print(' ...

  2. mysql之多表查询的其他查询

    1,临时表查询 (1)需求:查询高于本部门平均工资的人员 select * from person as p, (select dept_id, avg(salary) as '平均工资' from ...

  3. 算法：矩阵连乘(Java)动态规划

    Description 给你2个矩阵A.B,我们使用标准的矩阵相乘定义C=AB如下: A数组中栏(column)的数目一定要等于B数组中列(row)的数目才可以做此2数组的相乘.若我们以rows(A) ...

  4. HTML5大纲算法

    什么是HTML大纲算法? 大纲算法允许用户代理(user agent)从一个web页面生成一个信息结构目录,让用户对页面有一个快速的概览.类似书籍.PDF.帮助文档等,都有一个清晰的目录结构,用户能方 ...

  5. On Starting My Blogging On CNBlogs

    About Myself I am a would-be Master of Engineering, on the last year of my student life, I'm ambitou ...

  6. Mac下载工具folx如何下载常用的软件

    最近,多档综艺节目都开展得如火如荼,比如<中国新说唱>.<这就是街舞>等深受年轻人喜欢的综艺节目.虽然手机端也可观看,但可以的话,当然是使用电脑屏幕观看节目比较过瘾. 接下来, ...

  7. Vegas常见问题解答，如何处理预览卡顿

    制作视频并不是简单的拼拼凑凑,很多时候我们都需要给视频加上一些视频特效或转场等效果,如果只是图片素材的话,还不会出现卡顿的现象,但是当你给视频添加了效果后,在预览窗口看到的就是非常卡顿了.除了本身计算 ...

  8. ThreadLocal以及强软弱虚引用

    1.ThreadLocal ThreadLocal即线程本地,可以实现每个线程存入取出TreadLocal值互不影响.因为TheadLocal底层是用了一个Map结构存放数据,而这个Map是从当前这个 ...

  9. 【Updating】汇编语言学习记录02

    换码指令.字符的输出 前置知识: XLAT 指令:将BX指定的缓冲区中.AL指定的位移处的一个字节数据取出赋给AL,实际相当于(AL) = (DS:(BX+AL)).注意,不是单纯地赋予AL+BX,而 ...

  10. VM15 Ubuntu18.04下固定IP

    输入su 进入root用户 为下面修改文件内容提供权限 1.查看自己网卡名称:输入命令: ifconfig -a 或者 ip link 或者 ip addr 所以我的网卡名称是:ens33 2. 然后 ...