Echart笔记

快速记录一些Echarts常用属性。

tooltip

简单属性

const options = {
	tooltip: {
		// 控制显隐。
		show: true, 
		
		// 触发类型。'item'用在饼图等无类目轴的图表，'axis'用于有轴图表，'none'则不触发。
		trigger: 'item', 
		
		// 是否显示内容。除非只需触发事件或定义了axisPointer，一般来说是要开启的。
		showContent: true, 
		
		// 是否将 tooltip 框限制在图表的区域内。在拥挤的区域或移动端，挺有用的。
		confine: false, 
		
		// DOM的类名。（只在 html 模式下生效）。
		className: '', 
		
		// 提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
		transitionDuration: 0.4, 
		
		// 提示框浮层的位置，默认跟随鼠标。
		position: '', 
		// 绝对位置： position: [10, 10] 相对于容器左侧 10px, 上侧 10 px
		// 相位置： position: ['50%', '50%'] 相对于容器正中间
		// 回调函数，如position: function (point, params, dom, rect, size) {
      // 固定在顶部
      // return [point[0], '10%'];})
      
    // 背景颜色。
	  backgroundColor: '', 
	  borderColor: #333,
	  borderWidth: 0,
	  padding: 5,
	  
	  //文本样式。
	  textStyle: { 
		  color: '#fff',
		  fontStyleL: '',  // 'normal', 'italic', 'oblique',
		  // 以及 fontSize, fontWeight, font-family 一系列
	  },
	  
	  // 额外附加到浮层的 css 样式
	  extraCssText:  'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', 
	  
	   // 显示的排序。分别是 序列升/降序'seriesAsc''seriesDesc'，数值升/降序 'valueAsc''valueDesc'
	  order: 'seriesAsc',
		
	},
}

tooltip. formatter

提示框浮层内容格式器，支持字符串模板和回调函数两种形式。 1、字符串模板 相当于写死的模板： 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

2、回调函数 参数有三个

 formatter: function(params, ticket, callback) {}

基本上，第一个参数params里的数据也够用了。（具体看这里]

第二个参数 ticket 是异步回调标识，配合第三个参数 callback 使用。 第三个参数 callback 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。

回调函数可以更灵活地组合数据，例如，为不同的series添加前缀后缀，数据转换等。

自定义饼图圆环label