Echarts相当于一款JS插件,可以制作出绚丽多彩的图表,其支持制作的图表类型和可以使用的样式都非常丰富。本文以Echarts制作散点图为例,向大家展示该工具的实用性。
Echarts的使用门槛非常简单,但使用条件必须符合规则,在官网(http://echarts.baidu.com/)上下载开发包之后,自己准备一个项目主文件夹,在该文件夹新建一个js文件夹(名称自选),将开发包下的build文件夹下的dist文件夹拷贝到js文件夹下,便可以开始使用了。
Echarts的使用方式可以分为AMD模块化导入和单文件导入方式,本文介绍一种简单的单文件导入方式,首先准备好一个html文件,导入echarts.js文件即可。当然你还需要准备一个div控件用于安放图表位置,也可以认为是要为Echarts实例化的Dom对象,这里JavaScript代码也放在body标签下。
- <!DOCTYPE html>
- <head>
- <meta charset="GBK">
- <title>Echarts of scatter</title>
- </head>
- <body>
- <!--为Echarts准备一个大小为600*400的div-->
- <div id="main" style="width:600px;height:400px"></div>
- <!--Echarts单文件导入-->
- <script type="text/javascript" src="./js/dist/echarts.js"></script>
- </body>
至此,echarts文件已完成导入,在使用之前&