绘制图表

                                       绘制图表

开发工具与关键技术：Visual Studio 2015
作者：李德新
撰写时间：2019年6月26日

如今，在网络技术越来越发达的今天我们总是有很多的时间花费在网上，我们在网上浏览网页的时候，总是能看到各种各样的不同的图表，办事您有没有想过我们看到的这些图表到底是如何制作出来的呢？如果我们想做出来又要如何才可以把这些图表制作出来？那么我们现在就来看看这些静美的图表是如何用代码制作出来的。
首先，我们可以利用一下网上别人封装的一些制作图表的插件，有了这些插件我们做起图表也要简单了许多，而且我们依然可以去在自定义这些图表所需要的各种不同的样式，如此我们制作页面上的图表就简单的多了。那么我们就要先引入我们所需要的插件。

第一以及第二这两个插件是用来为我们在页面布局上提供帮助的，有了这两个插件我们可以少些许许多多的多余的代码，而最后一个插件才是我们今天的主角。Echarts.min.js是网上别人封装的一个专门制作图表的一款插件。
我们在引入插件之后，我们就是要如何在页面上去布置好存放数据表格的

容器，只有先设置好容器存放图表，我们才可以继续下面的操作。

如图中所示，我们可以看到我创建了三个存放图表的地方，并且为他们每一个容器都声明了一个ID方便我们后面获取内容，以及存放我们制作的图表。那么我们接下来就可以去获取到我们要的id然后把它们存放到页面上的

容器之中。

如图中所示，获取到了我们需要的这几个ID之后我们就可以去设计我们需要的图表了。那么我们就要先设计图表的标题以及其他的各种不同的样式。但是在设计我们需要的样式之前，我们需要按照Echarts.min.js插件的设计的格式去写才可以使用。


如此，我们就可以自定义我们需要的标题、配置、以及各种不同的数据。而且我们还可以为这些图表设计弹出的提示框，但是我们现在这样还是不够的，我们还需要为这些容器设计一下高度让他们不被挤压而变形。

如此我们只要再次，为这些存放图表的容器设置高度即可，如此我们设计的图表才可以完美的显示出来。