图表的绘制

图表的绘制

在以往的学习中，大部分人都是以表格数据的形式展现数据的情况，但是其实我们还可以用图表的形式展示数据，这样其实可以更直观和方便的看到数据的具体情况。所以接下来会简单说一下如何将数据以图表的形式展示出来。
首先就是要所需数据查询出来，同样可以先绘制成表格的形式，同时也申明一个全局变量来接收查询到的数据（后面会用到）。如下图所示。

在绘制图表前，需要下载一个echarts插件（可以直接搜索echarts官网进行下载，下载完成后需要进入在你的项目中）。绘制图表时，先需要准备好一个dom元素，也就是存放图表的一个标签，然后再初始化echarts实例。如下图所示。

做好了dom元素初始化之后，现在要设置图表的配置项以及数据，下面配置的是一个饼状图，首先是设置一个标题组件title，可以设置标题的内容、位置、文本样式和字体大小。

接着就是设置提示框组件tooltip，首先是一个数据项图形触发trigger，值可以设置为item ，这代表着是鼠标移到图形触发，再设置提示框提示的内容formatter: “{a} {b}
人数:{c}，比例:{d}%” ，这个值里的{a} 代表系列名称，{b}代表数据项名称，{c}代表数值，{d}代表比例。

接着下面就是图例组件legend ，先是设置图例列表的布局朝向orient:，值可以设置为horizontal，意思是并排的排列方式，然后再设置图例的位置left，值可以设置left，意思是靠左边， 还有top ，值可以设置为px，意思是离头部px。

最后设置系列列表series，先设置系列名称name: ‘这里写图表的名称’，用于tooltip的显示， 然后再是设置图表的类型type：‘pie’，pie代表此图表是饼图，再设置图表饼图的内外半径radius: [, '’]，接着就是设置图表饼图的中心坐标位置center: [’%’, '%’]，最后就是图表的内容data，data里的数据内容就是上面查询出来的数据。所以饼图图图表的绘制大致就是这样了。（注：有些图表样式是可以不用设置的，这里根据个人需求来设置，具体的图表样式可以查询echarts官网）。

下面在完成一个柱状图的图表绘制。其实柱状图的图表绘制跟饼状图的是差不多的，但是不同于饼状图来说就是多了一个x轴和y轴，其实x轴和y轴的设置也就是名称，轴的类型，内容的位置和数值的内容这些。

需要注意的是数据项图形触发trigger这个属性的值，值需要变成axis ，这代表着是鼠标移到柱状图上时触发且会显示这个地方的数据比例等信息。剩下的x轴和y轴的这是里就是类型和一些内容不一样了。（注：这里根据个人需求来设置，具体的图表样式可以查询echarts官网）。