怎么使用Echarts实现数据的可视化

这篇文章主要讲解了“怎么使用Echarts实现数据的可视化”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么使用Echarts实现数据的可视化”吧！

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站建设、做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的澄迈网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

数据可视化的方式有很多种，最简单的是用一些轻量级的图表框架，比如echarts等。下面我们讲下如何使用echarts来实现数据的静态可视化。

步骤：

1、下载echarts

2、编写网页代码

1、下载echarts

echarts要实现简单的可视化，其实只需要下载它的js包，登录进官网，点击实例：

我们可以看到，这里有很多实例，各种各样的，我们可以根据自己的需要进行实例的选择。

点击不同的实例，我们可以看到页面分两个部分，一个是实例的核心代码，一个是实例的效果。代码的修改可以实时反馈到效果界面。所以我们可以先在这个界面上进行调试，看图标是否能够满足我们的功能需求。

我们要下载echarts组件，可以直接从官网上下载组件包，包含很多复杂的插件。

当然，简单一点，我们只需要下载echart.js这个javascript文档。这里官网任何一个实例界面都是应用了这个文档了的。所以我们在任何一个实例界面，按F12，切换到浏览器界面调试模式。

上图所示，我们看到本界面使用的是echarts.min.js这个文件 比echarts.js的区别就是，min代表的是压缩过后的，体积会小很多，而且不方便阅读，要想阅读比较规整的代码的，可以找到echarts.js来阅读。

双击上面的src路径，复制这个js的路径，然后复制到浏览器的地址栏。

有些浏览器会直接采用打开这个js文件的方式。如下图所示，如果是这样的话，你把这个浏览器内容的界面全选，复制粘贴到一个新建的js文档里面就可以了。

但是上面复制粘贴的方式会出现一个编码格式错误的问题。建议浏览器有下载功能的，新建一个下载链接，然后把地址复制进去。或者通过IE，IE默认是下载的方式。

这样可以避免在复制粘贴的过程中出现编码格式错误的问题。

保存的时候，保存到一个非中文并且非空格的路径里面，避免系统识别出现问题。

2、程序编码

我们需要在浏览器里面显示echarts组件，有两个必须的要注意的，一个是你要在浏览器里面预先提供有div，这个div是要显示echarts各种组件的。另外一个就是用javascript或jquery来创建一个echarts对象，然后设置数据源，然后将数据源和echarts对象绑定。。

那么我们在web里面新建一个html文档，在文档中写入以下代码：