今天我们一起来看一下ECharts:

ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。兼容大多数浏览器,包括IE6/7/8/9+, Chrome, Firefox, Safari 以及 Opera。

混搭

混搭的图表会更具表现力也更有趣味,ECharts提供的图表(共9类14种)支持任意混搭:

折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、 饼图(环形图)、雷达图、地图、和弦图、力导布局图。

混搭情况下一个标准图表:包含唯一图例、工具箱、数据区域缩放、值域漫游模块,一个直角坐标系(可包含一条或多条类目轴线,一条或多条值轴线,最多上下左右四条)

拖拽重计算

拖拽重计算特性(专利)带来了数据统计图表从未有过的用户体验,允许用户对统计数据进行有效的提取、整合,甚至在多个图表间交换数据,赋予了用户对数据进行挖掘、整合的能力。

数据视图

如果你所呈现的数据足够让用户所关心,那么他们将不满足于查看可视化的图表,要去逐一迎合他们下载保存,数据分享,加工整合已有数据等等需求?

或许你只要给予一个“,”分隔的数据文本他们就懂了,这就是ECharts的数据视图!当然,你可以重载数据视图的输出方法,用你独特的方式去呈现数据。

如果你的用户足够的高端,你甚至可以打开数据视图的编辑功能,跟拖拽重计算相比,这可是批量的数据修改!

动态类型切换

很多图表类型本身所表现的能力是相似的,但由于数据差异、表现需求和个人喜好的不同导致最终图表所呈现的张力又大不一样,比如折线图和柱状图的选择,系列数据是堆叠还是平铺总是让人头疼。

ECharts提供了动态类型切换,让用户随心所欲的切换到他所需要的图表类型和堆叠状态。

图例开关

多系列数据的同时展现呈现出丰富内容,但如何让用户切换到他所关心的个别系列上?

ECharts提供了方便快捷的多维度图例开关,可以随时切换到你所关心的数据系列。

数据区域选择

数据可以是无限的,但显示空间总是有限的,数据区域选择组件提供了大数据量中漫游的能力,让用户选择并呈现他所关心的数据区域。

配合随动的均值(极值)标线,标注展现强大的数据剖析能力。

多图联动

多系列数据在同一个直角系内同时展现有时候会产生混乱,但他们又存在极强的关联意义不可分离?

ECharts提供了多图联动的能力(connect),能做的可不仅仅是鼠标划过的详情显示,连接的多个图表会共享组件事件并且实现了保存图片时的自动拼接。

值域漫游

基于坐标的图表(如地图、散点图)通过色彩变化表现数值的大小能直观形象的展示数据分布。

但如何聚焦到我所关心的数值上?我们创造了称为值域漫游的功能,让你可以轻松进行数值筛选。

炫光特效

我们知道,很多时候我们需要一些吸引眼球的能力。

ECharts支持标注标线的炫光特效,特别用在地图上轻松实现百度迁徙数据可视化特效

大规模散点图

如何展现成千上百万的离散数据从而找出他们的分布和聚类?貌似除了用专业的统计工具(如MATLAB)外别无选择?

不,ECharts发明了基于像素的大规模散点图(专利),一个900 x 400的散点区域就能够毫不重复的呈现36万组数据,这对于常规的应用,用现代浏览器就足以轻松展现百万级的散点数据!

动态数据添加

如果你需要展示有实时变化的数据,相信这个动态接口会对你很有帮助。

标线辅助

趋势线?平均线?未来走势?修正值?有需求用户自然知道用意~

提供标线辅助在K线图中可是必要的功能!是的,K线图我们正在开发中~

多维度堆积

支持多系列,多维度的数据堆积,配合自动伸缩的图形实体和直角坐标系,能呈现出更有内涵的统计图表~

子区域地图模式

地图类型支持world,china及全国34个省市自治区。同时支持子区域模式,通过主地图类型扩展出所包含的子区域地图,轻易输出全球176个国家地区和全国600多个省市区域简图。

GeoJson地图扩展

内置地图由标准GeoJson地理数据并经过高效的压缩算法压缩生成的地图数据(大小仅为标准geoJson的30%左右)驱动而来。如果内置地图类型或数据如果并未满足你的项目需要,可通过简单动态注册产生你所需要的新类型。

个性化定制

500+个可配置选项结合多级控制设计满足高度定制的个性化需求。

事件交互

可以捕获的用户交互和数据变化事件实现图表与外界的联动。

转载于:https://blog.51cto.com/xingongfang/1613624

聚焦 ECharts相关推荐

  1. Echarts渲染行政区划,实现聚焦高亮交互

    首先需要准备行政区划的JSON数据,可以在DataV获取省市区的JSON数据. 最终效果图 渲染地图 建立一个地图容器,注意要给宽高 <!-- 地图容器 --> <div id=&q ...

  2. echarts切换折线图变大_这个月,我就和折线图杠上了...

    作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景 折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...

  3. 封装echarts china map geo实现dispatch触发geoSelect事件高亮显示某个省份和城市,并定义复杂样式

    实现如下效果 用echarts geo类型的中国地图封装vue组件,具体的地图信息china.json传送门https://blog.csdn.net/qq_37860634/article/deta ...

  4. 动态更改echarts 高度_EasyShu地图可视化新突破,ECharts图表完美集成

    EasyShu作为一款领军级Excel图表插件,在地图可视化这一领域,必须有所建树,一直在思考如何有所突破. 在一般性的以形状填色为代表的地图可视化,存在一些难以避免的小缺点,交互性存在较大的缺陷,就 ...

  5. html前端 echarts图表使用详解

    有勇气的牛排 官网 www.920vip.net www920z.net echarts 介绍 官网:https://echarts.apache.org/ 菜鸟教程 使用 CDN https://c ...

  6. 基于html5 Canvas图表库 : ECharts

    基于html5 Canvas图表库 : ECharts 分类 编程技术 ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生 ...

  7. echarts柱状图 饼图 折线图

    最近大屏项目里做的   首先看看效果 这几个图 我将其标为七个部分 下方成为echarts1,echarts2往后类推  有需要 可以直接拷贝下方代码 推荐一个朋友最近发我的echarts图形地址  ...

  8. echart图片库_基于html5 Canvas图表库 : ECharts

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

  9. echarts学习笔记1

    可视化面板介绍 ​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. [外链图片转存失败,源站可 ...

  10. 如何使用 Echarts 和 SVG文件写大屏可视化地图 ?

    点击上方蓝字关注趣谈前端 转自: https://juejin.cn/post/7009889635618799630 契机 最近公司要做一个政务大屏项目,由于在员工竞优大会上表(jing)现(chu ...

最新文章

  1. 天问电子少年团DIY作品
  2. 【转载】linux 下 cpu使用情况分析
  3. SQL SERVER中强制类型转换cast和convert的区别
  4. 偷用计算机作文,偷玩电脑作文500字
  5. 优先队列默认是小顶堆吗_一分钟带你读懂什么是堆?
  6. tcp连接测试工具_“国货之光”!国产弱网测试神器 QNET,比主流弱网测试工具强在哪?...
  7. resnet预训练模型_干货 | NLP中的十个预训练模型
  8. 17秋 SDN课程 第一次作业
  9. BatchNormalization 优点
  10. 镇魂街武神躯怎么修改服务器,镇魂街武神躯怎么重置守护灵_守护灵重置方法_3DM手游...
  11. pmp 资料_1年 = 15300订阅 + 超100万次收听 (感恩有您,这些PMP备考资料您值得拥有!)...
  12. Android的启动模式:singleTask与singleTop的使用
  13. o2o模式的优势 o2o模式的劣势
  14. 如何解决克隆虚拟出现的Device eth0 does not seem to be present,delaying initialization错误
  15. PG中XLOG日志结构
  16. 计算机操作系统(四)
  17. 系统架构设计知识梳理--分布式架构
  18. 虚拟机扩大内存的方法
  19. python制作坦克大战
  20. Antd pro中ProFormSelect使用initialValues

热门文章

  1. Qt介绍---QPA(Qt Platform Abstraction)
  2. freeswitch exporter
  3. 【人工智能】180页PPT,讲解人工智能技术与产业发展
  4. 计算机财务管理财务模型实验报告,《计算机财务管理》课程介绍
  5. 周志华 机器学习ppt
  6. 协方差的计算公式例子_协方差公式_协方差的计算公式例子
  7. 希腊字母表(含读音)
  8. 【CV】ShuffleNet:通过 GroupConv 和 ChannelShuffle 实现轻量化 CNN 架构
  9. 在Abaqus中怎么施加初始应力
  10. 原生js 获取屏幕各种宽高的方法