一、获取 ECharts

你可以通过以下几种方式获取 ECharts。

  1. 从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。

  2. 在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。

  3. 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

  4. cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

二、获取 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <!-- 引入 ECharts 文件 -->

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

 </head>

 </html>

三、绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

 <body>

 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

 <div id="main" style="width: 800px;height:400px;"></div>

 </body>

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

 <!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>

这样你的第一个图表就诞生了！

四、进阶

在一个canvas根据传入的配置参数不同，绘制不同的图表。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>echarts_ajax</title>

     <!-- 引入 ECharts 文件 -->

     <script src="http://www.daipianpian.com/common/js/echarts.min.js"></script>

     <link href="http://www.daipianpian.com/common/css/resetcsspc.css" rel="stylesheet">

     <style>

         .demobox{width: 800px;height: auto;margin: 100px auto 0px;overflow: hidden;}

         .tabnav{width: 100%;height: 40px;margin: 0 auto 50px;}

         .tabnav ul{width: 49%;height: 100%;margin: 0 auto;overflow: hidden;zoom: 1;}

         .tabnav li{float: left;width: 88px;height: 38px;line-height: 38px; margin-right: 8.6px;text-align: center;color: #333;font-size: 16px; background-color: #AADBCE;border: 1px solid #CEE8E0; border-radius: 4px;}

         .tabnav li.active{color: #000; border: 1px solid #a4604d;background-color: #fff;}

         .tabnav li:hover{cursor: pointer;}

         .tabnav li:last-child{margin-right: 0px;}

         .main{width: 800px;height:400px;}

     </style>

 </head>

 <body>

     <div class="demobox">

         <div class="tabnav">

             <ul id="tab">

                 <li class="active">按天</li>

                 <li>按月</li>

                 <li>按年</li>

                 <li>折线</li>

             </ul>

         </div>

         <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

         <div id="main" class="main"></div>

     </div>

     <script type="text/javascript">

         // 基于准备好的dom，初始化echarts实例

         var myChart = echarts.init(document.getElementById('main'));

         var host = 'https://www.easy-mock.com/mock/5b06d6f072643c7a5c4edcb6/echarts';

         //创建异步对象

         var xhr = new XMLHttpRequest();

         function ajaxPost(url){

             xhr.open('post',host+url,true);

             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

             xhr.send('');

             xhr.onreadystatechange = function(){

                 if( xhr.readyState==4 && xhr.status==200){

                     var responseText = eval("("+xhr.responseText+")");

                     //拿到数据后更新页面

                     var option = responseText.data;

                     console.log(option);

                     myChart.clear(); // 清空画布

                     myChart.setOption(option); // 使用指定的配置项和数据显示图表

                 }

             }

         }

         ajaxPost('/day');

         // 为每个li标签循环绑定click事件

         var oli=document.getElementById('tab').getElementsByTagName('li');//获取tab列表

         for(var i=0 ; i<oli.length ; i++){

             oli[i].index = i;//定义index变量，以便让tab按钮和tab内容相互对应

             oli[i].onclick = function(){//移除全部tab样式和tab内容

                 var index = parseInt(this.index);

                 switch(index)

                 {

                     case 0:

                         ajaxPost('/day');

                     break;

                     case 1:

                         ajaxPost('/month');

                     break;

                     case 2:

                         ajaxPost('/year');

                     break;

                     case 3:

                         ajaxPost('/brokenLine');

                     break;

                 }

                 for(var i =0; i < oli.length; i++){

                     oli[i].className = '';

                 }

                 this.className = 'active';//为当前tab添加样式

             }

         }

     </script>

 </body>

 </html>

效果如下图：

ECharts 上手的更多相关文章

  1. ECharts上手例子

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器 (IE8/9/10/11,Chrome,Firefox,Safari等 ...

  2. vue学习【一】vue引用封装echarts并展示多个echarts图表

    大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...

  3. Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路

    封装一个ECharts组件的一点思路 有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system ...

  4. ECharts数据图表系统？ 5分钟上手！

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  5. ECharts模块化使用5分钟上手

    什么是EChats? 一句话: 一个数据可视化(图表)Javascript框架,详细?移步这里,类似(推荐)的有 HighCharts,其他? 嗯,先看看吧-- 快速上手: 模块化单文件引入(推荐). ...

  6. 快速上手 Echarts

    最近使用到了 百度的 Echarts 数据可视化工具,这里简单介绍如何快速上手. 一.下载 这里选择目前最新版本,4.2.1 地址:https://github.com/apache/incubato ...

  7. 5 分钟上手 ECharts

    获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...

  8. 5分钟上手写ECharts的第一个图表

    网址:http://echarts.baidu.com/doc/start.html 架构特性 http://echarts.baidu.com/doc/feature.html | 架构 提供商业产 ...

  9. echarts入门，5分钟上手写ECharts的第一个图表

    1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...

随机推荐

  1. gcc 4.8.5安装

    在利用张乐博士的最大熵模型工具包(Maximum Entropy Modeling Toolkit for Python and C++)和条件随机场的经典工具包CRF++(CRF++: Yet An ...

  2. Failed to install xxxx.apk on device 'emulator-5554!

    异常信息:[HelloAndroid] Performing com.example.helloandroid.HelloAndroid activity launch[HelloAndroid] U ...

  3. freeMarker（二）——模板开发指南之入门

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 模板开发指南-入门  1.模板+数据模型=输出 假设在一个在线商店的应 ...

  4. 基于v4l2 ffmpeg x264的视频远程监控(附上编译好的库文件)

    说明:主要是基于ghostyu网友整理的< arm mini2440 基于v4l2 ffmpeg x264的视频远程监控>.自己做了一遍,遇到不少问题,就整理记录下来. 1.平台 硬件:a ...

  5. bzoj2654tree

    给定一个n个点m条边的图,每条边有黑白两色,求出恰好含need条白边的最小生成树 最小生成树...仿佛并没有什么dp的做法 大概还是个kruskal的板子再加点什么东西 考虑到“恰好含need条白边” ...

  6. bzoj 2001: City 城市建设 cdq

    题目 PS国是一个拥有诸多城市的大国,国王Louis为城市的交通建设可谓绞尽脑汁.Louis可以在某些城市之间修建道路,在不同的城市之间修建道路需要不同的花费.Louis希望建造最少的道路使得国内所有 ...

  7. 第k大区间(平均数)--LH

    老师自己出的题,由于没有评测的地方, 我就只说做法啦.(其实是懒得写)(逃ヽ(ﾟ∀ﾟ*)ﾉ━━━ｩ♪ 以下是个人的见解,如果错了告诉我哦⊙0⊙? 最近特别喜欢用画图写字,,☆⌒(*^-゜)v!

  8. Access中创建子数据表/主子数据表

    摘 要:我们为什么要使用Access,而不用Excel,因为数据库可以大幅度地消除冗余数据,其方法就是将数据拆分到不同的表中,再通过“关系”建立表间的联系.那么如何确定表间的关系呢.表之间的关系是通过 ...

  9. C#添加修改控件css样式

    一.添加属性 MyStyleSheet.Attributes.Add("href","/css/flostyle.css") 二.改变css样式 if (use ...

  10. Java enum（枚举）使用详解之二

    enum 对象的常用方法介绍 int compareTo(E o)            比较此枚举与指定对象的顺序. Class<E> getDeclaringClass()       ...