echarts饼图自定义formatter

1.实现效果

2.实现原理

echarts官网：
https://echarts.apache.org/zh/index.html

3.完整代码

https://gitee.com/susuhhhhhh/responsive-web-page

4.主要代码

var myChart = echarts.init(document.getElementById('main3'));
var option = { 
		
		title: {
			text: '这是一个echarts图表'
		},
		tooltip: {
			trigger: 'item',
			position: function (point, params, dom, rect, size) {
			
			  let x = 0; // x坐标位置
			  let y = 0; // y坐标位置
			
			  let pointX = point[0];
			  let pointY = point[1];
			  let boxWidth = size.contentSize[0];
			  let boxHeight = size.contentSize[1];
			  if (boxWidth > pointX) {
				x = 5;
			  } else {
				x = pointX - boxWidth;
			  }
			  if (boxHeight > pointY) {
				y = 5;
			  } else {
				y = pointY - boxHeight;
			  }
			  return [x, y];
			}
		},
		legend: {
			x : '70%',
			y : '25%',
			orient: 'vertical',
			align: 'right',
			// top: '5%',
			// left: 'center'
			formatter: function(name){
		　　　　return name.length>5?name.substr(0,5)+"...":name;
		　　},
			tooltip:{
				show:true
			}
		},
		series: [
			{
				name: '访问来源',
				type: 'pie',
				center : ['35%', '50%'],
				radius: ['10%', '70%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#ff5500',
					borderWidth: 2,
					// normal: {
					// 	show: true,
					// 	formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
					// }
					normal: {
					  label: {
						show: true,
						position: 'inner',
						formatter: "{d}%"
					  },
					  labelLine: {
						show: true
					  }
					},
					 emphasis: {
					  shadowBlur: 20,
					  shadowOffsetX: 0,
					  shadowColor: 'rgba(30, 144, 255，0.5)',
					  label: {
							show: true,
							fontSize: '20',
							fontWeight: 'bold'
						}
					}
					
				},
				labelLine: {
					show: false
				},
				data: [
					{value: 1048, name: '搜索引擎搜索引擎搜索引擎搜索引擎'},
					{value: 735, name: '直接访问直接访问直接访问直接访问'},
					{value: 580, name: '邮件营销邮件营销邮件营销邮件营销'},
					{value: 484, name: '联盟广告联盟广告联盟广告联盟广告'},
					{value: 300, name: '视频广告视频广告视频广告'}
				]
			}
		]
	};
		
myChart.setOption(option);
window.addEventListener('resize', function () {
   myChart.resize()
 })