echarts总结（一）

对echarts的定义

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

核心概念

• instance 实例

• series 系列 （是你所制图标数据，类型书写的地方）

• tooltip 提示

• legend 图例

• xAxis X轴（横板排列）

• yAxis Y轴 （竖版排列）

• toolbox 工具箱 （非常实用）

• dataZoom 缩放

• vitualMap 虚拟映射

• 图标的常用类型

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

颜色的修改

• 主题：自定义主题 light,dark 浅色与深色
• 自定义主题
• color：调色盘
• color系列调色盘
• 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:颜色

多图表

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

工具箱

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