下载echarts文件 1)在echarts官网,点击顶部菜单【下载】,在下拉菜单中点击【下载】 2)在下载界面可以看到4个版本,通常来说选择【常用】就够用了,点击即可下载js文件 3)对于某些对js大小要求极高,且图形比较单一的系统,可以选择【在线定制】按钮,勾选需要的功能下载
配置项查找方式 1)在echarts官网,点击顶部菜单【文档】,在下拉菜单中点击【配置项手册】 2)在“配置项手册”页面,有各种图形的详细配置项与使用方式介绍 3)当需要使用某种图形,又不知道有哪些属性可以使用时,可以在此页面找到使用方式
官方实例使用方式 1)在echarts官网,点击顶部菜单的【实例】,在下拉菜单中点击【官方实例】 2)在左侧菜单是echarts支持的各种类型的图表,例如:折线图、柱状图、饼图、散点图、地图、K线图等等 3)点击左侧菜单的类型,如柱状图,在右侧会显示各种柱状图实例,按照实际需要,点击对应图形即可进入明细页 4)在具体图形的明细页,左侧是echarts图形的js配置项,右侧是运行效果展示,可以修改左侧配置,点击【运行】即可实时看到效果
创建如下结构的测试页面(以柱状图为例演示) 1)在上面第一步中选择,下载【常用】的echarts文件 2)在电脑中任何地方创建如下结构的测试文件 -- Content -- echarts.common.min.js -- EchartsBar.html
在EchartsBar文件中添加柱状图的占位dom,并将Content文件夹下的echarts文件引入页面
渲染echarts柱状图 1)将上面第3步中的柱状图的“坐标轴刻度与标签对齐”详细界面左侧的js代码复制到EchartsBar页面 2)将复制的js与当前页面关联 3)为了在一个图中显示完整,此处调整了js的格式,因此看起来格式稍微与复制的有一点不一样 4)实际项目中:按照上面第2步中的各个配置项修改为实际项目需要的样子即可
echarts默认柱状图运行效果如下(直接使用浏览器打开EchartsBar文件即可运行)