如何用Highcharts制作柱形图

工具/材料

SublimeText

打卡SublimeText，新建HTML5页面，然后在页面中插入jquery和highcharts的脚本文件，如下图所示

然后在body元素中定义放置柱形图的div容器，如下图所示，注意给div设置宽和高

接下来在script中订单柱状图的标题，副标题，X，Y坐标轴的配置信息，如下图所示

然后就是准备柱状图的数据了，如下图所示，数据要和上面定义的X坐标轴进行匹配

接下来就是将所有准备好的数据和参数配置都放在json中，如下图所示，highcharts只接受json的传参方式

一切准备好之后，下面你就可以调用highcharts方法，并且传入所准备的json串来生成柱状图，如下图所示

最后，运行页面程序以后，你就可以看到自己定义的柱状图了，如下图所示

实现按年龄段统计柱状图的方法：

前端页面设计：在前端页面中使用ECharts来绘制柱状图，需要先引入ECharts库，并在页面中创建一个DOM元素作为图表容器。

<!-- 引入 ECharts 库 --><script src=";

后端数据处理：在后端根据年龄段对数据进行处理，返回给前端需要的数据格式。可以使用各种后端语言（如PHP、Python、Java等）来编写后端代码。

例如，使用PHP编写一个简单的接口，接收前端传来的年龄段参数，根据参数查询数据库中对应的数据，并将数据按照ECharts要求的格式进行处理，最后返回给前端。

<php// 获取前端传来的年龄段参数$ageGroup = $_GET['ageGroup'];// 根据年龄段查询数据库中对应的数据// //

1无数据时展示方式

2数据加载中展示方式

3折线图图表

4显示当前效果

5支持4中显示效果及具体某个点数据显示 同时支持

6图例-底部居中

7多条折线-循环series
8双x轴-xAxis[{},{}]

2在页面中使用方式 （可在官网示例里自行根据配置文档进行配置[示例地址]（这里设置option由于echarts配置太多网上提供的model bean是基于20版本的所以就直接在示例里将图表配置配置好直接copy字符串用来设置option了）( >在上一篇文章我们讲到构建项目，这篇文章，我们就来讲解一下，在vue项目中使用echarts制作3d柱状图。

还请看我娓娓写来。

1、第一步当然还是进入你所在项目的文件夹。

2、第二步使用npm安装你所需要用到的组件，

》使用以下命令安装echarts组件

npm install echarts

》安装好echarts后，还需要安装echarts3d图形所需的组件，echarts-gl。使用以下命令安装即可。假设你不需要制作3D的图表，则不需要安装。

npm install echarts-gl

安装好了之后，你就可以在你的node_modules文件夹内找到echarts和echart-gl文件夹了。
而且在你的packagejson文件里面也可以找到这个配置
那么echarts和我们需要的echarts-gl就安装好了，现在开始写demo啦

3我们需要在页面的script中引用
4写一个div装echarts实例吧。
5、给这个实例设置一个css样式，给它设置宽高，这一步很重要
6、实例出一个柱状图吧。
你可以写一个方法调用，你这个实例的方法，然后就可以看到效果了。具体的设置建议看echarts官网的这个GL的属性说明。
贴上最后的效果图：
好了，今天的文章就告一段落，如果您有好的建议，请在下方留言。欢迎订阅我们哦~

---