echarts大数据可视化学习笔记

写在前面： 相比于冷冰冰的数字，人们更倾向于以图片的形式将数据展示出来，这就需要用到一些可视化工具，本章记录本人的echarts使用经历。

1.安装webstorm

工欲善其事，必先利其器。我用的是webstrom编译工具，官网下载即可，附链接：https://www.jetbrains.com/webstorm/
按照提示下载即可,这里需要勾选两个地方，其他的都可以疯狂下一步

打开ws后我们新建一个项目，创建一个以js命名的文件夹用于存放js文件，然后我们新建一个html文件：

2.下载echarts.js文件

进入echarts官网https://echarts.apache.org/zh/index.html，网上有很多下载echarts的方法，但是我都没有下成功过，哈哈。
记录一下常见的方法：在GitHub上下载。由于我下载的时候echarts文件不可用，所以在这里我就不再对这种下载方法过多说明。

我们选择在线定制，这样我们就能下载想要的echarts文件了：

然后可以选择我们想要的一些图表和组件，我在下载的时候一口气勾选了所有图标和组件，就出现了问题，或许是我本身浏览器的问题，又或者是官网的bug，在下载”旭日图“的时候就报错了，这样就导致整个echarts都无法下载。解决办法就是不勾选它就可以了，反正也不一定能用的到，哈哈。如果是开发环境，建议不要勾选代码压缩

下载好后大概会生成一个2M左右的文件，那么恭喜你下载成功，接下来我们把echarts.js文件复制粘贴到我们刚才创建的js文件夹中即可。

编译工具的好处就是有代码提示，可以在IDE中打开浏览器进行测试。

这是做好之后的效果：

这是我在B站跟pink老师做的，视频下方也有相应的图片和源码。

3.直接使用官网实例

我有幸参加了全国大学生大数据技能竞赛，比赛的要求是将hive分析结果用echarts可视化展现出来，为了检测可视化结果的正确与否，我们只需将echarts结果转换为json文件即可。
我们可以另外添加一些标题，修改一些数据等等：
*转为json文件：
复制左边的源代码

在浏览器中按F12或者右击选择检查，打开控制台粘贴源代码，按下回车，输入JSON.stringify(option)即可转换为json文件

下面红色这一坨就是我们需要的json文件：