对echarts的定义

1. javascrit的图表库
2. 百度捐给apache基金会（代表着免费，开源）
3. 比较符合中国人的制表习惯
4. HeightCharts，D3是echarts的同行，但是队友国人来说echarts更符合审美
5. （官方文档有各种教程）

核心概念

instance 实例 series 系列 （是你所制图标数据，类型书写的地方） tooltip 提示 legend 图例 xAxis X轴（横板排列） yAxis Y轴 （竖版排列） toolbox 工具箱 （非常实用） dataZoom 缩放 vitualMap 虚拟映射

图标的常用类型

bar 柱状   pie 饼形  line 线性
radius:[“60%”,“40%”]
areaStyle 面
smooth:true 平滑

颜色的修改

1. 主题：自定义主题 light,dark 浅色与深色
2. 自定义主题
3. color：调色盘
4. color系列调色盘
5. itemStyle normal默认 emphasis强调状态

特别样式

1. 渐变

var linear={
          
   
	type:linear,
	x:0,
	y:0,
	x2:0,
	y2:1,
	colorStops:[{
          
   
		offset:0,
		color:#0bdcf3
		//0%处的颜色
	},{
          
   
		offset:1,color:#0093dd
		//100%处的颜色
	}],
	global:false//缺省为false
}

2. 线的样式 lineStyle

lineStyle:{
          
   
	width:12,
	cap:"round",
	opacity:0.7,
}

3. 面的样式

areaStyle:{
          
   
	color:linear2,
}

数据的堆叠

stack:true

label 标签

1. show true 是否显示 formatter:"{a}{b}{c}"格式化 a代表数据名 b系列名 c数字
2. position：位置
3. inisideRigt内部右侧
4. top/left/right/bottom/inside
5. color:颜色

多图表

1. grid 网络布局 top/left/right/botton height width
2. xAxis,yAxis 轴线指定 gridIndex:0, gridIndex:1
3. series 数据指定轴线 xAxisIndex:0 yAxisIndex:0

工具箱

toolbox:{
          
   
	show:true,//显示工具箱
	feature:{
          
   
	//缩放
		dataZoom:{
          
   
			yAxisIndex:none
		},
	//数据视图
		dataView:{
          
   readOnly:false},
	//魔法类型
		magicType:{
          
   type:[line,bar,pie]},
	//重置
		restore:{
          
   },
	//保存图片
	 	saveAsImage:{
          
   }
	}
}