一.echarts的介绍

1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。
3.echarts的下载
（1）从 npm 获取
npm install echarts --save
（2）从 CDN 获取
（3）从 GitHub 获取

二.echarts语法

一.echarts常见术语

二.图表常见类型

1. bar 柱状图
2. line折线图
   (1)曲线图
   加上smooth:true;就会变成曲线图
   (2)面积图
   加上areaStyle:{fill:“#f70”} 会变成面积图
3. pie 饼形图
   （1）加上radius:[80,50] 会变成环形图

三.echarts 中的样式简介

1. 颜色主题
   （1）主题可以通过切换深色模式，直接看到采用主题的效果

• 通过light 、dark切换
• 定制主题，具体可以参考官网，需要导入下载的js文件

// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"） var chart = echarts.init(dom, 'vintage'); // ... 

（2）color调色盘
在 option 中设置。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。
全局调色盘option.color

option.color：color: ["pink", "#ff0", "#f0f", "#0ff"] 

局部调色盘series.item.color

series: [     {       type: 'bar',       // 此系列自己的调色盘。       color: [         '#dd6b66',         '#759aa0',         '#e69d87',         '#8dc1a9',         '#ea7e53',         '#eedd78',         '#73a373',         '#73b9bc',         '#7289ab',         '#91ca8c',         '#f49f42'       ]           }, 

（3）itemStyle项的颜色

• itemStyle:{color:“#00f” }
• 高亮的样式emphasis

itemStyle:{ normal:{color:"#93da6c"}, emphasis:{color:"#bcff57"} } 

2. 特殊样式
   渐变色
   （1）定义渐变

// 定义渐变 	var linear = { 	  type: 'linear', 	  x: 0, 	  y: 0, 	  x2: 0, 	  y2:1, 	  colorStops: [{ 		  offset: 0, color: '#02bcff' // 0% 处的颜色 	  }, { 		  offset: 1, color: '#5555ff' // 100% 处的颜色 	  }], 	  global: false // 缺省为 false 	} 

（2）使用渐变

itemStyle:{ 	color:linear, 	borderRadius:[30,30,0,0] 		} 

3. label标签

• show：true是否显示
• position：”insideRight“位置
• formatter格式
  formatter: “{a}\n{c}分”
  {a}系列名
  {b}数据名
  {c}数值
  {d}百分百
• rich富文本

series:[				 {type:"pie",radius:[200,110],data:[ {name:"百度",value:1200, label:{show:true, position:"center", // {d}百分比 {big|内容} 使用样式 formatter:"{big|{d}}{small|%}\n{b}", // 定义样式（富文本） rich:{ 	big:{ 		color:"#f70", 		fontSize:"48px", 		fontWeight:900, 		}, 	small:{											color:"#f70" 		} 		} 		}}, {name:"其他",value:360, // 样式灰色 itemStyle:{color:"#ccc"}, // 标签不显示 label:{show:false}, // 提示不显示 tooltip:{show:false}} 					]} 				] 				  			} 

四.动态显示局部

1. 定义option
2. 修改option值
3. echart.setOption(option);更新数据和视图

五.缓动动画

动画延迟animationDelay 动画时长animationDuration, 动画缓动函数animationEasing 

animationDelay: function(idx) { 					// 越往后的数据延迟越大 					return idx * 200; 				}, 				animationDuration: function(idx) { 					// 每小格动画的时候 					return idx * 200; 				}, 				// 弹性的方式出现动画 				animationEasing: "bounceInOut" 			} 

六.事件

1. 事件的监听
   echart.on（”事件名“，处理函数）
2. 发送事件
   dispatchAction

echart.dispatchAction({ 	type: 'showTip', // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。 	seriesIndex: 0, // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项 	dataIndex: ind, // 可选，数据项名称，在有 dataIndex 的时候忽略				  	position:"top", 				}) 

三.echarts应用

实践出真知，学过前面的语法，快来创建属于自己的图表吧。练习完案例，就掌握了80%的echarts。宝子们快动手练习吧。

1. 案例1
   

2. 案例2
   

3. 案例3
   

4. 案例4
   

5. 案例5
   

6. 案例6
   

7. 案例7
   

8. 案例8
   

9. 案例9
   

10. 案例10
    

终于到底啦，你是最棒的哟👏👏👏