前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

JavaScript/前端
475
0
0
2022-05-07
标签   JavaScript库
ECharts是一个由国内BAT公司之一的百度维护开发的一个开源图表库,ECharts提供了折线图、饼图、柱状图、散点图、K线图、热力图、地图、线图、关系图、漏斗、仪表盘等多种图表类型,图表直观、简单、灵活、流畅,兼容所有现代浏览器及IE8以上,并且可以根据需求下载需要的图表。ECharts基于Canvas类库ZRender,对处理大数据和3D绘图比较有优势。

1、下载及初始化

http://echarts.baidu.com/download.html

可以根据自己的需求选择需要的图表打包下载,下载后放到项目任意位置并在页面引入echartsjs文件即可。

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

然后在body中创建一个有高宽的DOM容器。


最后运行如下脚本,一个简单的图表就绘制完成了。


前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)


前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

以上就是一个简单的demo,通过echarts内置方法init初始化一个实例,在通过实例的setOption方法设置参数即可。

npm安装命令:npm install echarts --save

2、基础图表演示

以上例子是柱形图,下面就不展示柱形图了。

①折线图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

②饼图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

3、常用图表的演示

由于代码较多我就挑选几个稍微少一点的

①漏斗图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

②仪表盘

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

③雷达图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

4、其他

其他由于代码量太大,我就直接截取效果图了,有兴趣的可以上官网看看,有很多在线演示,还可以改动代码运行看效果。

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

散点图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

K线图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

箱线图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

热力图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

地图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

关系图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

矩形树图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

平行坐标

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

桑基图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

象形柱图

前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

日历图

官方网站:

http://echarts.baidu.com/index.html

由于放假现在电脑中没有相关环境和项目,我就直接在官网截图了,望大家见谅、轻喷,谢谢!echarts还有很多类型的图表,可以满足我们对可视化数据的需求,并且在大数据展示上也有很好的效果,图表美观丰富,还能适应移动端。