echart⎛⎞echarts

echarts是做数据统计。1、 Echarts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11），Chrome，Firefox，Safari等。2、底层依赖轻量级Canva+库 ZRender。

大家好，今天美滋味百科小编关注到一个比较有意思的话题，就是关于echart的问题，于是美滋味百科小编就整理了3个相关介绍echart的解答，让我们一起看看吧。

文章目录：

1. echarts是做什么的?
2. “echart”啥意思?
3. echart树形图实现点击节点完整链路更换颜色

一、echarts是做什么的?

echarts是做数据统计。

1、 Echarts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移闭薯动设备上，兼容当前绝大部分浏览器（IE8/9/10/11），Chrome，Firefox，Safari等。

2、底层依赖轻量级Canva+库 ZRender，提供直观，轿腔者生动，可交互，可高圆备度个性化定制的数据可视化图表。

3、ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

扩展资料

echarts的优点：

1、国人开发，文档全，便于开发和阅读文档。

2、图表丰富，可以适用各种各样的功能。

echarts的缺点:

1、移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定多多少少有些问题吧，或许跟自己水平也有一定的关系。

2、echarts不失为一款比较适合我们这种码农使用的框架。

3、echarts就不贴代码了。毕竟文档很全。

参考资料：

ECharts简单来说是互联网开发程序过程中，后台数据库用以实现数据到图形的映射的一个插件。

具体来说一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

扩展资料：

ECharts（4.0）特性：

1、丰富的可视化类型

提供了常规的图，盒形图，用于地理数据可视化的图，山携用于关系数据可视化的图，多维数据可视化的平行坐标，并且支持图与图之间逗羡伏的混搭。

2、多种数据格式无需转换直接使用

ECharts 内置的 dataset 属性（4.0+）通过简单的设置 encode 属性就可以完成从数据到图形的映射。

3、千万数据的前端展现

ECharts 同时提供了对流加载（4.0+）的支持，可以使用 WebSocket 或者对数据分块后加载，不需要漫长地等待所有数据加载完再进行绘制。

4、移动端优化

例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。

5、多渲染方案，跨平台使用

不同的渲染方式提供了更多选择，使得 ECharts 在各种场景下都有更好的表现。

6、深度的交互式数据探索

提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。

7、多维数据的支持以及丰富的视觉编码手段

ECharts 3 开始加强了对多维数据的支持。除了加入了平行坐标等常见的多维数据可视化工具外，对于传统的散点图等，传入的数据也可以是多个维度的。配合视觉映射组件 visualMap 提供的丰富的视觉编码，能够将不同维度的数据映射到颜色，大小，透明度，明暗度等不同的视觉通道。

8、动态数据

ECharts 由数据驱动，数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单，只需要获取数据，填入数据，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 timeline 组件能够在更高的时间维度上去表现数据的信息。

9、绚丽的特效

ECharts 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。

10、通过 GL 实现更多更强大绚丽的三维可视化

提供了基于 WebGL 的 ECharts GL，你可以跟使用 ECharts 普通组件一样轻松的使用 ECharts GL 绘制出三维的地球，建筑群，人口分布的柱状图，在这基础之上还提供了不同层级的画面配置项派袜，几行配置就能得到艺术化的画面。

11、无障碍访问（4.0+）

支持自动根据图表配置项智能生成描述，使得盲人可 以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。

参考资料来源：

二、“echart”啥意思?

单词是否正确，可能是困颂答E-chart（电子图表;电子航海图）

chart

英 [tʃɑ:t] 美 [tʃɑ:rt]

n.图表;航汪慧海图;排行榜

vt.绘制地图;记录;记述;跟踪（进展或发展）

第三人称单数： charts 复数：樱滑 charts 现在分词： charting 过去式： charted 过去分词： charted

三、echart树形图实现点击节点完整链路更换颜色

在某些需求下需要用到树形图来表达数据结构，我使用的是 echarts ，关于 echart 树形图的基础配置和使用这里就不展开。

直接上图，这是一个蔽虚基础的树形图demo：

当点击非最末节点的时候，echart的默认行为为收缩该节点的子节点，这个行为会与下面实现的效果有关系，效果：

下面进入实现，一开始思考这个需求的时候，以为跟经常做的柱状图点击更换柱子颜色一样，都是去替换配置，当然某种情况下也是可以实现的，先简单说一下树形图的 data 结构，是使用 children 属性层层嵌套的结构：

按上面的思路，只要监听节点的点击事件，然后获取对应链路相关的节点，更改他们的 lineStyle ，然后 echart 实例重新 setOption 就可以，下面看一下大概实现：

看一下点击节点， echart 带的参数

到这里这种点击更换相关节点 linestyle 的方式就实现，但是这种方式有两个问题：

1.上面我们是假设 value 是唯一的，如果实际开发中 value 有实际用途不能让我们生成唯一的值，这种方桥册法就无法实现。但这个还不是致命的。

2.上面说到，非最末节点点击时，会收缩与展开它的子节点，而我们上面实现高亮的时候是重新 setOption ，会将已操作的交互覆盖掉，点击前效果：

实现高亮的核心还是更换节点属性的 linestyle ，但是不能通过重新 setOption 来实现，在翻遍 echart 配置项的时候，最后看到了一个属性和一个方法：

实现：

先在 echart 配置项中添加 emphasis 时的效果：

因为 emphasis 属性默认是鼠标移入节点时的效果，所以我们手动触发高亮会宏消燃和默认行为冲突，需要一个数组保存点击高亮的节点 dataIndex 。

点击时手动触发相关节点的高亮：

还需要覆盖 emphasis 的默认行为，也就是鼠标移入事件：

实现效果：

点击前：

点击后：

实现了。

我是鸭子，祝你幸福。

到此，以上就是美滋味百科小编对于echart的问题就介绍到这了，希望介绍关于echart的3点解答对大家有用。