我为什么选择ECharts ?

1、容易使用，好上手，官网文档优雅清晰，案例简明美观，学习时间短。

2、开源免费，压根不要什么成本，适合我这种穷屌啊。所以，在比较了MetricGraphics.js后选择了使用ECharts.js。

ECharts 的特性

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。官网文档写出主要特性：

1，丰富的可视化类型（基本需要的数据统计图都有，甚至是中国地图，这点不得的不为百度团队点赞啊）。

2，多种数据格式无需转化直接使用。（这一点需要注意，省去大量的数据转换的步骤，我没注意到这一点，前期花费了两个小时用去转换数据了，踩坑。）

3，千万数据的前端展现，增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量，（简单来说就是支持是的数据量很ok，但是我使用的是4.0 以下的版本，一对比就发现数据量过多时会出现部分卡顿的现象，换成4.0明显问题消除）。

4，移动端优化，（自适应，以及滑块效果很流畅）。

5，多渲染方案，跨平台使用，（pc端移动端还有4.0 甚至支持小程序，以及对其他语言的扩展，牛逼，为其点赞）。

6，深度的交互式数据探索。（暂时还没体验，所以不做评价）。

7，多维数据的支持以及丰富的视觉编码手段（ECharts 3 开始加强了对多维数据的支持，效果也越来越美观了）。

8，动态数据，（主要配合timeline组件使用，可以描述时间维度）。

9，绚丽的特效，通过 GL 实现更多更强大绚丽的三维可视化，无障碍访问（4.0+）等，我在本次的课设中并没有使用到，所以就不赘述了。

ECharts 的运用实例

官网实用教程配代码实例5分钟上手Echarts

官网链接直接上，我差不多花了3个小时，就把官网关于我所需的ECharts 的教程看完了。看完情不自禁的感慨，这个教程写的太妙了，简洁明了，行云流水，实例也清晰到爆炸。强行安利直接点击上方超链接，去官网学习，没有更好的学习EChart方式了。

总结一条在官网学习ECharts的路线：

step1:初步了解ECharts的特性。

step2:查看教程，务必先完成五分钟上手一个实例，清楚知道其中的获取EChart、引入 EChart,绘制一个简单的图标。推荐在线定制。

step3:查看教程中的自定义构建 ECharts，根据自己需求构建一个可以直接src的Echart，这一步很简单，但是必须要好好整一下，合适的EChar.js在大小和使用需求方面可以恰到好处，不冗余也非常有利于了解EChart的各个部件功能。

step4：完成以上三步，就可以任意根据你想要运用的效果，选择性的点击学习不同模块。

ps:如果只是需求不大的想做个简单特效的，那直接复制粘贴官网实例，简单修改一下数值即可。

简单展示时间序列数据的可视化曲线效果

这个是我根据官网模板进行编辑修改。

我的X轴坐标有三条线，每个线250个值，进行12次重复，每条线3k个值，3条线一共9k个值，验证了官网所描述的‘’千万数据的前端展现‘’这一特性，以及在展示的过程中，发现之前使用的EChart在展示时候出现了卡顿现象，随即重新下载版本4.2.1的EChart.js，引入后发现该问题消失。

关于EChart的主题

本颜狗真的很看重美观这一点。

索性EChart连主题配色都可以定制：定制主题。个人认为下载的展示主题模板也很ok了几个基本款主题。

下载后，主题使用示例：

<script src="echarts.js"></script>
<!-- 引入 vintage 主题 -->
<script src="theme/vintage.js"></script>
<script>
// 第二个参数可以指定前面引入的主题
var chart = echarts.init(document.getElementById('main'), 'vintage');
chart.setOption({...
});
</script>

简单展示一下温暖的vintage主题：

简单展示一下dark主题：

本次使用总结：

EChart使用简洁，对酸菜鱼还是很友好，可视化界面也很美观,随着不断更新，在图片数据处理展示这方面性能也逐步优化，适合平台多，自适应屏幕状态好，私以为还是相当值得前端攻城狮们看看使用一下的。

在大致了解框架后，结合官网的文档学习效率会高出不少，推荐主要还是实践。出于忙碌，以及其他比赛的ddl要到，我没有投入过多的时间，但是如果涉及到开发的话，务必还是要把API好好地梳理一遍，深层了解学习。这样才能更好的使用。

前端数据可视化ECharts使用指南——制作时间序列数据的可视化曲线相关推荐

数据可视化Echarts学习指南
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. 01-使用技术完成该项目 ...
Python数据可视化 - 使用Dash库制作杭州数据分析师岗位招聘情况可交互网页报告(附代码下载)
dash dash不同于flask或者Django,具备少量的前端知识即可制作可视化网页,下图为本人制作的数据分析师岗位招聘情况可视化网页. 文末附网盘下载经过清洗后的数据与可视化网页的代码. 交互 ...
可视化 | Echarts基础异步加载数据交互组件数据集
目录 1. ECharts 简介 2. ECharts 安装 3. ECharts 配置语法 4. ECharts 图饼 5. ECharts 样式设置 6. ECharts 异步加载数据 7. EC ...
keras时间序列数据预测_使用Keras的时间序列数据中的异常检测
keras时间序列数据预测 Anomaly Detection in time series data provides e-commerce companies, finances the insi ...
计算机考试excel统计图怎么做,excel表格取数据做统计图-Excel如何制作统计数据...
如何用一个excel表格上的数据做曲线图. 方法一个连续区域,通过"框"输入地选中单元格,如选中A列的A3:A8区域,在名称框中输入"A3:A8"后回车,即可选 ...
可视化-echarts流向图制作及recharts
前段时间用echarts做了流程图,在此记录下制作步骤. 一.Echarts是什么 Echarts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个 ...
给echarts添加筛选时间控件时，控件不显示，并设置数据库无数据时echarts模块显示暂无数据
给echarts模块添加时间控件时,控件无效,经检查发现,控件被画布遮盖了,需要用一个form标签包括时间控件,否则时间控件不生效.另外,如果echarts从后台获取到的数据为空,需要提示暂无信息.这 ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
数据可视化（全彩）（大数据丛书，首次全面细致地梳理了可视化理论，方法、工具与应用案例。马匡六教授、石教英教授鼎力推荐，十二五国家重点图书出版规划项目）...
大数据丛书数据可视化(全彩)(大数据丛书,首次全面细致地梳理了可视化理论,方法.工具与应用案例.马匡六教授.石教英教授鼎力推荐,十二五国家重点图书出版规划项目) 陈为沈则潜等编著 ISBN 97 ...

前端数据可视化ECharts使用指南——制作时间序列数据的可视化曲线

我为什么选择ECharts ?

ECharts 的特性

ECharts 的运用实例

总结一条在官网学习ECharts的路线：

简单展示时间序列数据的可视化曲线效果

关于EChart的主题

简单展示一下温暖的vintage主题：

简单展示一下dark主题：

本次使用总结：

前端数据可视化ECharts使用指南——制作时间序列数据的可视化曲线相关推荐

最新文章

热门文章