如何把Echarts用成在线数据可视化工具

image

今天虎哥给大家介绍个新工具，用于数据可视化，它是一个开源的插件，由JavaScript编写并实现的。可以流畅的运行在PC端和移动端，兼容绝大部分浏览器。Echarts具有强大的交互性，官网：

https://www.echartsjs.com/index.html

Echarts的优势在于他是中国人开发的，所以有完善的中文文档，非常方便阅读和使用。

image

这个是Echarts的首页，他的官方文档非常的多而且详细。

Echarts可以绘制的图有37种，每一种里还有不同的风格，基本上你能想到的数据可视化方式都可以通过Echarts实现。下面给出一些官方的案例：

image

官方文档的配置项中把所有的可调节参数都列了出来，以及这些参数如何进行调节都写得非常清楚，也放了示例代码。所以这些都没必要去学习并记住。只需要把它当成一个字典，当你想要调节图中的什么参数时再去其中搜索就行，非常强大且方便。

image

简单介绍完Echarts接下来我们说说今天的重点,怎么能在这个网页上实现在线制图呐~

第一步当然是先思考你想绘制的是哪种类型的图，在官方实例中找到相似的例子点进去，就会有例子完整代码，比如以雷达图为例，点进去后是这样的：

image

完整的代码都在左侧，并且是可以修改的，所以我们要做的就是在线修改，首先读懂它的例子，在读懂后基本就可以确定我们要求改的参数有哪些，将我们的数据填进去，按我们的需求修改一下就好啦~给大家放个源代码和修改后代那的对比，红色箭头指的地方是我们需要修改的地方：

image

一共就7处需要修改，填上我们的数据就可以啦~最后出来的图是这样的：

image

这个属于修改比较小的部分，但其实可以修改调整的参数非常多，给大家放一个我之前通过这种方式将官网的气泡图经过非常大的调整后绘制出的另一种风格的气泡图。

官网的案例这这样的：

image

我修改后的气泡图：

image

只要善于使用配置项文件，想要修改出什么样的图都不成问题~

最后要说的一点是，画完图怎么保存到本地，就在下图右下角红色箭头指着的地方就有个Download。到此在线制图的步骤就彻底结束了。

image

最后虎哥想说最重要的一点！