ECharts学习指南

1.了解ECharts 

  ECharts简单说就是互联网开发程序过程中,后台数据库用以实现数据到图形的映射的一个插件。

  具体来说一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在PC和移动端设备上,兼容当前绝大部分浏览器,底层以来轻量级的矢量图库Zrender,提供直观,交互丰富,可以高度个性化定制的数据可视化图标。

第一步:下载echarts.js 

 

https://echarts.baidu.com/

现在在官网下载的文件可能不能使用,有需要echarts.js的可以联系本人为大家提供免费的 echarts.js 文件。联系方式在下方

第二步:

 

 第三步:

ECharts学习指南_第1张图片



	
		
		
		
		
	
	
		
		

  

 配置项:配置项中有很多属性和方法

ECharts学习指南_第2张图片

 

 API:

引入echarts.js文件后 console.log(echarts)得到是一个echarts对象

ECharts学习指南_第3张图片

echarts对象上有一个init() ,通过echarts的init() 得到一个实例叫echartsInstance() 它身上也有很多方法,echartssInstance() 上有一个setOption() 方法 因为我们要做图表,setOption身上有我们需要的属性和方法

init() 初始echarts实例

我们要做的做一个图表里面要有什么,比如:销量、x轴,y轴、人数、这些统一都称为 Option,这些属性方法都在setOption身上

ECharts学习指南_第4张图片

 

 

 ECharts学习指南_第5张图片

 

 ECharts学习指南_第6张图片

 

 setOption() 配置图表的选项

 

 通过echarts对象第一次引进来时,就得到这个对象,这个对象通过init() 得到一个实例对象,实例对象再通过setOption() 配置选项

需要了解 setOption() 里面的属性和方法

 

十大图表:

1. 柱状图 bar

2. 折线图 line

3. 饼图 pic

4. 散点图 scatter

5. 气泡图 bubble

6. 雷达图 radar

7. 地图 map

8. 漏斗图 funnel

9. 词云 word Cloud

10.仪表图 gauge

以下是个小案例:

 



	
		
		
		
		
	
	
		
		

  ECharts学习指南_第7张图片

 

  作者:晋飞翔

  手机(微信同步):17812718961

 

你可能感兴趣的:(ECharts学习指南)