多语言展示
当前在线:1275今日阅读:97今日分享:45

echarts 使用教程

echarts是百度旗下的纯js图形库,鉴于其使用方便、功能强大、跨平台而广受好评。本文就为您介绍如何使用echarts,并以柱状图为例演示从echarts文件下载到图形在页面展示的全过程
方法/步骤
1

下载echarts文件     1)在echarts官网,点击顶部菜单【下载】,在下拉菜单中点击【下载】     2)在下载界面可以看到4个版本,通常来说选择【常用】就够用了,点击即可下载js文件     3)对于某些对js大小要求极高,且图形比较单一的系统,可以选择【在线定制】按钮,勾选需要的功能下载

2

配置项查找方式     1)在echarts官网,点击顶部菜单【文档】,在下拉菜单中点击【配置项手册】     2)在“配置项手册”页面,有各种图形的详细配置项与使用方式介绍     3)当需要使用某种图形,又不知道有哪些属性可以使用时,可以在此页面找到使用方式

3

官方实例使用方式     1)在echarts官网,点击顶部菜单的【实例】,在下拉菜单中点击【官方实例】     2)在左侧菜单是echarts支持的各种类型的图表,例如:折线图、柱状图、饼图、散点图、地图、K线图等等     3)点击左侧菜单的类型,如柱状图,在右侧会显示各种柱状图实例,按照实际需要,点击对应图形即可进入明细页     4)在具体图形的明细页,左侧是echarts图形的js配置项,右侧是运行效果展示,可以修改左侧配置,点击【运行】即可实时看到效果

4

创建如下结构的测试页面(以柱状图为例演示)     1)在上面第一步中选择,下载【常用】的echarts文件     2)在电脑中任何地方创建如下结构的测试文件          -- Content              -- echarts.common.min.js          -- EchartsBar.html

5

在EchartsBar文件中添加柱状图的占位dom,并将Content文件夹下的echarts文件引入页面

6

渲染echarts柱状图     1)将上面第3步中的柱状图的“坐标轴刻度与标签对齐”详细界面左侧的js代码复制到EchartsBar页面     2)将复制的js与当前页面关联     3)为了在一个图中显示完整,此处调整了js的格式,因此看起来格式稍微与复制的有一点不一样     4)实际项目中:按照上面第2步中的各个配置项修改为实际项目需要的样子即可

7

echarts默认柱状图运行效果如下(直接使用浏览器打开EchartsBar文件即可运行)

推荐信息