最近掘金队对**做了域名保护，导致**无法加载，或者段故障好，实力硬。
数据可视化旨在借助图形手段（**BD）清晰有效地传达信息。我们生活中最常见的是各种统计数据做成图表、K线图、能力雷达图（上面的个人能力分析图表，**数据纯属虚构）; 对于前端开发者来说，就是利用一些神灵开发的可视化组件，在浏览器中直观清晰地呈现从后端传输的数据
d3echartsthree.作为数据可视化的重要一环，jshighchartschartsg2 颜色的应用，相同的数据，相同的图表类型，如果不同的人或不同的公司制作，效果可能会完全不同，而重要的区别可能是颜色的应用。 echarts 中的不同图表提供了一组默认的强调色，因此即使我们没有设置颜色，渲染效果仍然很好。 在 echarts 图表中有很多地方可以设置颜色，包括但不限于下图所示的内容（官方演示）：
echarts的配置手册详细描述了如何设置上图中提到的每个部件，这里是一些在工作中不常用但非常重要的部件。 在实现层面，有两种颜色设置，选项属性设置和css样式设置，至于为什么，可以从上图的DOM结构中得到答案，每个echarts实例大致包含两个元素：canvas和div（框标注），div负责图表工具提示的显示（黄色框被圈出）， Canvas 负责除黄色框之外的所有部分。如果是简单的颜色设置，比如上面所示的注解，选项属性设置颜色就足够了，但是如果想让强调色如下图所示，选项属性设置颜色太拉伸了，混合色应用到标题和工具提示数据显示上，以增强数据的性能：
对于工具提示中的强调色，由于基本上是 DOM 元素的操作，所以制作上图所示的效果非常简单，只需控制 div 元素及其子元素的样式即可，例如：
option = ， *formatter 属性，直接内联 css 样式操作 *formatter： function （val） other settings}对于标题或者图表的其他部分要设置为混合颜色，就没那么简单了，因为它不接受像 Tooltip 这样的 DOM 元素的直接样式操作，但 Echart 还是留下了足够的条目来解决这样的需求：富文本标签（rich），官方解释，比如上面这段的混色标题， 可以通过这种方式实现， **复制到官方演示，可以查看效果，更多使用方法可以在官方示例中看到：
title:', textstyle :,b: ,c:在 echarts 中添加了法线和强调，以及添加了工具提示，通过在悬停和非悬停状态之间切换，使图表更具交互性。 特别是，上面提到的工具提示的自定义样式将演示文稿提升了一个档次。 但是，作为前端可视化，它经常显示在大屏幕上用于访问显示器，因此显示器的访问者不太可能使用鼠标将鼠标一一悬停来查看具体数据，这就需要我们使用自动旋转而不是悬停来触发工具提示。
为此提供了官方的 DispatchAction 方法和官方 demo，也可以参考网上一篇文章提供的想法和源码，封装了一个通用的图表自动旋转工具，我自己也封装了一个，欢迎参考，以下是使用轮播时地图的渲染。 
要使用这个想法（在 Vue 框架中使用），首先添加 AutoShowTip 对象作为 echarts 的方法; 然后，在实例化 echarts 实例后，这个$echarts.autoshowtip 方法，并传入实例对象、选项对象、轮播时间等参数
这里有两点需要提醒：
echarts的dispatchaction方法在常用的图表中不支持雷达图，我知道支持的图表类型有：饼图、条形图、折线图、地图图、散点图; 为了解决雷达图的单轴悬停和自动旋转问题，我写了一个方法，封装到autoshowtip对象中，具体实现可以参考我个人博客上的文章：从0开始，做一个支持单轴轮播的雷达图的最后一部分; 在使用工具提示时，其显示的位置也是非常了解的，如下图左侧所示，它会弄巧成拙，所以控制工具提示的位置也很重要，echarts对此也提供了相应的方法，比如添加以下段落**，就可以达到右图所示的效果：
position: function (pos, params, dom, rect, size) ;y轴，其位置是固定的obj[['left', 'right'][+pos[0] size.viewsize[0] -100)) else return obj; }
另外，自动轮播还可以更好的显示数据，当我们的数据太长，显示空间有限时，我们可以将数据切成两端甚至多段，通过自动轮播切换，让你在有限的空间内展示出最好的效果，下面是我做的一个演示， 源代码和效果图：
mychart = this.$echarts.init(target);let step =0;option.xaxis.data = labeldata.slice(0,length);option.series[0].data = realdata.slice(0,length);option.series[1].data = symboldata.slice(0,length);mychart.setoption(option);this.$echarts.autoshowtip(mychart, option, 3000,, isrefresh: labeldata.length>length })
在制作条形或线，或基于两者的扩展系列时，除了上述内容外，其实设置值轴的比例也是需要注意的事情。 比如下面两个**所以，如果单独看，感觉没什么，但是如果这些条形或曲线在大屏幕上不止一条，有的有三四个间隔，有的**根，有的不均匀分割，这种视觉展示会给人一种散乱的感觉， 根据个人经验，将间隔控制在6以下，体验更好。
除上述外，还有坐标轴范围过大，数值过大，导致难看和可读性差。 比如下面这种简直就是炫耀财富的失败，除了Y轴数字重叠的问题，没有办法一眼就知道自己的总收入是什么水平，只知道很多，就需要专心看数字，才能知道，哦,,,颤抖，57267亿元，抢了他，马上，马上，现在就去：
上面分享了两个不友好的数据显示图表，那么我们如何才能更好地优化它们。 下面我就提供我自己在公司做项目的时候的想法，具体实现可以自己探索，但是如果你家的后台已经为你计算好了单位，处理了前两步，那么你只需要做最后一步就行了。 至于为什么不直接设置yaxis的min、max、spiktline来控制区间线和区间，echarts的官方文档有这样的答案：坐标轴的段数，需要注意的是段数只是一个估计值，最后显示的实际段数会根据坐标刻度显示的可读性进行调整轴拆分后，还有这样关于操作间隔的提醒来控制间隔，因为拆分数是估计值，按照策略计算的刻度可能无法达到预期的效果，所以可以使用带有最小值和最大值的间隔来强制刻度划分，一般不建议使用：
Echarts地图，可以设置为Geo地图引擎或地图引擎，就好像其他地图也支持一样，只要知道坐标系的变换关系即可。 地理地图由于某些数据不符合国家《测绘法》的规定，**服务已暂停，但如果你想找到它，你仍然可以找到它，比如在echarts github账号下。 地图表面上是图表的背景，但实际上它更像是一个坐标系——纬度和经度的坐标系。 关于echarts地理地图的使用，我有一些经验可以分享：
不同版本的JS或者JSON地图数据，效果大相径庭，以至于测试会给你一个bug，比如下面两张图，左边地图中甘孜州的名字已经完全伸手到了雅安，绵阳似乎已经吞并了德阳， 自己对比了一下数据，左边的地图JSON数据是压缩的，右边的地图是解压缩的，但为了合理起见，这两个JSON应该不是同一个版本：
如前所述，geo 的重要作用是充当图表坐标系。 因此，当您的序列具有多个序列并且需要能够在同一坐标系中设置数据时，设置 geo 是非常必要的。 然而，值得注意的是，一旦将全球地理设置为序列中的参考坐标系，即指定地理索引，则序列地图map 属性和 series-map样式配置（如 itemstyle）不再起作用，而是采用 geo 中的相应属性; 另一件需要强调的事情是谨慎使用 roam：true，最好设置缩放范围; 如果您参与的**项目对边界区域敏感，最好的选择是使用 bmap 作为地图坐标系; 那时候很久没有学过echarts了，在画廊里看到一些很酷的例子，也想做一个，但是当我看到echarts的源代码时，我一头雾水，然后我看了看Zrender和Xianzhe先生的水球地图，我感觉自己进了门， 但是在制作酷炫效果之间仍然存在一些差距。直到最近发现的 4版本0介绍了自定义系列，修了很久，我做了一个伪3D填充，2D坐标系的直方图效果（加载动画花了一点时间），有兴趣可以自己研究一下：
我觉得这个经验分享帖子越来越像一个echarts的宣传帖子。 自从我自己做数据可视化以来已经快一年了，但感觉就像我在一扇门里，作为前端的一个分支，像水一样深。 如果你还没有可视化的概念，推荐你看一下蚂蚁金服去年推出的G2，它的作者也是Echarts的前作者，Echarts讲的比较多的是可视化图表的理论，G2可视化基础文档。