WELCOME TO BIG DATA VISUALIZATION

新闻中心 

最新的一体化系统新闻资讯 时刻在线 持续服务
CRAFTSMANSHIP TO
CREATE A “SAID” WORKS

Echarts柱状图在JavaScript中的基础使用

发布于 2022年08月20日

随着科技的不断发展,前端页面也在不断的加入新的元素,不再是单一的文字和简单的表格展示,页面的展示也开始多样化丰富化了,出现了许多各式各样的图表,代替了以前枯燥的页面数据布局。其中,Echarts是当前市面上使用的比较多的图表框架。

 

Echarts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。它能够流畅的在PC端(电脑端)和移动端中运行,并且兼容当前绝大多数的浏览器,拥有折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等交互组件。

 

Echarts可以在多个框架中使用,在这里我们介绍的是其在原生JS中的用法。

 

 

在JavaScript中使用Echarts制作图表的具体步骤如下:

 

步骤一:首先在https://www.jsdelivr.com/package/npm/echarts选择 dist/echarts.js,点击并保存为 echarts.js 文件。通过静态引入的方式引入到html文件中。在引入时,有个特别需要注意的地方是,引入一定要在<heard>标签内部引用。引用在线资源可以在上述地址中复制需要的URL地址,比如:<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js"></script>。

 

步骤二:创建一个容器,并且具有宽高,例如div标签。

 

步骤三:用echarts中init方法来实例化一个echarts对象并用一个变量承载。

 

步骤四:配置参数,echarts对象中有一个setOption属性,setOption属性里有多个参数。

 

1、xAxis为X轴配置项,在本例中是类目项。

 

2、yAxis为Y轴配置项,在本例中是数值项。

 

3、series为系列配置项,一个系列至少要包含:一组数值、图表类型(series.type)以及其他的配置参数。

 

4、多系列的柱状图,则只需要在series里面添加多一项。

 

5、柱状图样式配置可以通过series.itemStyle设置,包括柱条颜色(color);柱条的描边颜色(borderColor)、宽度(borderWidth)、样式(borderType);柱条圆角半径(barBorderRadius);柱条透明度(opacity);阴影(shadowBlur、shadowColor、shadowOffsetx、shadowOffsetY)。

 

6、柱条宽高设置barWidth、设置最大宽度barMaxWidth、最小高度barMinHeight

 

7、柱条间距分两种,一种是不同系列在同一类目下的距离barGap,另一种是类目与类目之间的距离barCategoryGap

 

8、柱条添加背景色,showBackground开启,并且可以通过backgroundStyle配置。

 

以上是创建普通柱状图的简单步骤。

 

代码 + 效果展示:

 

1

 

2

数据中心 三维可视化
预约产品DEMO演示
填写即可获得免费服务和资料下载/工作人员基于您的需求远程 演示数字孪生解决方案

姓名



公司名称



工作邮箱



手机号



所在城市



我想要


 数据中心

 数据可视化大屏

 我搭世界

 成为合作伙伴



其他需求