Echarts相当于一款JS插件,可以制作出绚丽多彩的图表,其支持制作的图表类型和可以使用的样式都非常丰富。本文以Echarts制作散点图为例,向大家展示该工具的实用性。
Echarts的使用门槛非常简单,但使用条件必须符合规则,在官网(http://echarts.baidu.com/)上下载开发包之后,自己准备一个项目主文件夹,在该文件夹新建一个js文件夹(名称自选),将开发包下的build文件夹下的dist文件夹拷贝到js文件夹下,便可以开始使用了。
Echarts的使用方式可以分为AMD模块化导入和单文件导入方式,本文介绍一种简单的单文件导入方式,首先准备好一个html文件,导入echarts.js文件即可。当然你还需要准备一个div控件用于安放图表位置,也可以认为是要为Echarts实例化的Dom对象,这里JavaScript代码也放在body标签下。
html>
Echarts of scatter至此,echarts文件已完成导入,在使用之前,还需要进行路径配置:
html>
Echarts of scatter//配置路径
require.config({
paths:{
echarts:'./js/dist'
}
})
路径配置好后,可以进行使用,首先需要指定要制作的图表,进行模块导入,可以根据需要导入多个图表模块:
//配置路径
require.config({
paths:{
echar