1. Echarts概述

ECharts是百度开源的纯 Javascript 图表库,目前开源可以与highcharts相匹敌的一个图表库.支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。

2. Echarts特性介绍

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。

3.学习echarts需要的技能

1.JavaScript(70%)、HTML(20%)、CSS(10%)

2.学习网站:w3school,打通关之后前端应该没什么问题

3.高中统计(高中+、能使用Excel做出基本图标)

4.正常人范畴内的设计美学

4.设备要求

Mac/Windows PC

Online

Chrome

Sublime/Notepad++/Emacs/TextMate/Vim

若是需要加载地图:MAMP(Mac)/EasyPHP(Windows)/IIS/Apache/Nginx

5. Echarts3.x与Echarts2.x的区别

echarts是百度推出的一个简单实用的图表控件,就个人看来,echarts2的大部分图表代码的可用性和美观性更好,相对而言,echarts3也有很多改进的地方,例如模块导入等和图标选项优化等,本人近期主要在用echarts做地图开发,就一些个人心得总结如下:

1、js文件:

 首先是dis文件,echarts3做了很大的优化,在echarts2中,对各种控件的类库管理的较为详细,有专门的目录结构来存放相关的js文件及相关资源,但是在引入文件的时候往往会很不方便,可能会一不小心就漏掉一个文件,而echarts3可以根据需要在下载项下直接根据所需的功能构架类库,使用时只要导入一个echarts.min.js文件就可以。

2、文件导入:

在echarts2中,require是作为模块化加载的入口,在使用过程中关于路径配置经常会出现问题,特别是制作地图的时候,而在echarts3中只需要在开头加一句 <script src="js/echarts.js"></script>, 接下去只要调用接口就可以了。

3、离线地图:

echarts2中离线地图的精确度存在很大的问题,特别是下钻到区县一级,边界线存在模糊、交叉、空白等问题,并且经常出现飞地,与实际地图出入较大,个人认为基本没什么用,在echarts3中对此做了很大的改进,基本解决了以上问题,市与市之间、区县与区县之间基本上不存在衔接问题。

         另外,在echarts3中可以根据需要自主构建地图,这个服务给实际使用提供了很大的便利。

4、工具栏:

在echarts3的toolbox里面把辅助线功能取消掉了,图标变小了,总体上感觉echarts3里面的toolbox更丑了。

5、地图漫游工具:

在echarts3里面把地图漫游工具取消掉了,说实话,echarts2里面的地图漫游工具看着还是挺不错的,虽然并没有什么用。

6、坐标系:

echarts3中,数据结构进行了统一化抽象,最常用的数据结构有:线性表、树、图。 echarts3中另一个重要的数据结构抽象是独立出了“坐标系”概念。事实上在 ECharts 2 中已经有grid、polar配置项存在,但是并不是按一个“坐标系”的理解去实现的。echarts3中,支持了直角坐标系(catesian,兼容 echarts2中的grid)、极坐标系(polar)、地理坐标系(geo)。

7、Option变动:

         1)组件位置想x、y等变成了left、top,可以使用像素和百分比,适应性更强。

         2)为了让结构更合理,echarts3中label被移出来和itemStyle平级。

Echarts概述的更多相关文章

  1. Hadoop相关笔记

    一.            Zookeeper( 分布式协调服务框架 ) 1.    Zookeeper概述和集群搭建: (1)       Zookeeper概述: Zookeeper 是一个分布式 ...

  2. 基于Echarts的股票K线图展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...

  3. 基于Echarts的中国地图数据展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...

  4. GIS历史概述与WebGis应用开发技术浅解

    声明:本篇在李晓晖的<杂谈WebGIS>,补充更多的资料说明.基于地图二次开发一直断断续续在做,这里算是补充一下基本功把.其实对于前端,WebGis开发都是api,抄demo,改.GIS深 ...

  5. Angular7如何动态刷新Echarts图表

    1 概述 echarts是百度的开源图表插件 Angular中引入echarts网上教程很多 Angular引入echarts,并使用动态刷新 2 安装 请参考大神的博客:https://blog.c ...

  6. Echarts 里面获取纵坐标刻度的间距

    概述 今天 PM 说,需要把 echarts 图表的纵坐标调成这样:如果全是 4 位数就用 K 为单位.冷静分析,就是说如果纵坐标刻度的间距是四位数,就用 K 为单位.那要如何获取纵坐标刻度的间距呢? ...

  7. VUE ECharts人际关系图

    1. 概述 1.1 说明 项目中需要对某个人的人际关系进行展示,故使用echarts中的关系图进行处理此需求. 2. 代码 2.1 代码示例 <template> <div clas ...

  8. 小白学 Python 数据分析(15):数据可视化概述

    人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...

  9. 小白学 Python 数据分析(20):pyecharts 概述

    人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...

随机推荐

  1. Flutte 什么是Widget,RenderObjects和Elements

    原文 Opacity API文档 有没有想过Flutter如何获取这些小部件并将其实际转换为屏幕上的像素? 您可能已经知道如何使用StatelessWidget和StatefulWidget.但是那些 ...

  2. Dart: 编码和解码各种存档和压缩格式

    path archive import 'dart:io'; import 'package:path/path.dart' as p; import 'package:path/path.dart' ...

  3. Error running 'tomcat': Unknown error

    免费分享95套java实战项目,不仅有源码还有对应的开发视频,关注公众号『勾玉技术』回复"95"即可获取 无意中发现了一位清华大佬的算法笔记,需要的加公众号 勾玉技术 回复 清华算 ...

  4. IdentityServer4之持久化很顺手的事

    前言 原计划打算在春节期间多分享几篇技术文章的,但到最后一篇也没出,偷懒了吗?算是吧,过程是这样的:每次拿出电脑,在孩姥姥家的院子总有阳光沐浴,看不清屏幕,回屋又有点冷(在强行找理由),于是又带着娃遛 ...

  5. The last packet successfully received from the server was 49,061,696 millise

    解决连接:https://blog.csdn.net/pandajava/article/details/41946251

  6. TERSUS无代码开发(笔记06)-简单实例手机端页面设计

    手机端的设计 1.页面说明 2.默认页面===>提交请假单(上面页面双击进入,页面主要编辑区) 2.1默认页面===>提交请假单===>头部区(页面部份主要编辑区01) 2.1.1默 ...

  7. 【Notes】现代图形学入门_01

    跟着闫令琪老师的课程学习,总结自己学习到的知识点 课程网址GAMES101 B站课程地址GAMES101 课程资料百度网盘[提取码:0000] 计算机图形学概述 计算机图形学是一门将模型转化到屏幕上图 ...

  8. 微信小程序:app.json中通过使用扩展库userExtendedLib的方式,引入并使用weui

    微信小程序  PK  APP: 1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾:而推⼴app的成本太⾼. 2.微信小程序也可以跨平台(Android和IOS). 一.project. ...

  9. 关于 HTTP 后端人员需要了解的 20+ 图片!

    前言 当您网上冲浪时,HTTP 协议无处不在.当您浏览网页.获取一张图片.一段视频时,HTTP 协议就正在发生. 本篇将尽可能用简短的例子和必要的说明来让您了解基础的 HTTP 知识. 目录: 什么是 ...

  10. Java数组之选择排序

    选择排序 package com.kangkang.array; import java.util.Arrays; public class demo04 { public static void m ...