echarts小技巧

一、tooltip 悬浮框自定义

tooltip: {
	trigger: "item",
	position: "right",
	borderRadius: 4,
	borderColor: "rgba(75,171,230,0.24)",
	borderWidth: 1,
	padding: [5, 10],
	backgroundColor: "#fff",
	formatter: (data) => {
		return `
        <span style="width: 6px;height: 6px;background: #4A92FB;display:inline-block;"></span>
        <span style="color:#333333;font-size:12px;">${data.name}  ${data.value}人</span><br>
        <span style="color:#4A92FB;font-size:12px;">${data.percent}%
        `;
	},
},

二、legend 图例

legend: {
	top: 'center',
	right: '15%',
	orient: 'vertical',//垂直
	itemWidth: 8,
	itemHeight: 8,
	formatter: function (name) {
		let i = piedata.findIndex(r => r.name == name)
		return name + '  ' + piedata[i]?.value || 0
	},
},

三、x轴，y轴单位显示

1第一种方法.自带的轴线name（需要适配的，优选第一种）

yAxis: {
	name: '(次)       ',
	nameGap: 15,//距离轴线距离
	nameTextStyle: {
		color: "#999999",
	},
}

2.第二种方法：title

title: {
	subtext: '(次)',
	subtextStyle: {
		color: "#999999",
	},
    left: 15,//删除
},

四、饼图

1.取消高亮（写在series里）

avoidLabelOverlap: false

2.颜色自定义（写在series里）

itemStyle: {
	normal: {
		color: (list) => {
			var colorList = ["#37D9B9", "#4A92FB"];
			let color = colorList[list.dataIndex];
			return color;
		},
	},
},

五、柱状图x轴显示不全

xAxis: {
	axisLabel: {
		color: "#999999",
		interval: 0,
	}
}

六、x轴数据过多显示不小，需要滚动条

// 滚动条配置，放在外面
const zoom = {
	show: dbbardata.length > 7,
	showLen: Math.floor(7 / dbbardata.length * 100),
};
//放在option里面
dataZoom: [
	{
		type: 'slider',
		show: zoom.show,
		height: 5,
		xAxisIndex: [0],
		start: 0,
		end: zoom.showLen,
		left: 'center',
		bottom: 0,
		fillerColor: '#0C90FF',
		backgroundColor: '#F3FAFF',
		// borderColor: 'rgba(21, 146, 255, 0.8)',
		handleSize: 0, // 左右2个滑动条大小
		zoomLock: true, // 禁止缩放
		brushSelect: false, // 拖动条
		showDataShadow: false, // 是否显示数据阴影
		showDetail: false, // 拖拽时候是否显示详细数值信息
	},
	{
		type: 'inside',
		show: true,
		xAxisIndex: [0],
		zoomLock: true, // 禁止缩放
		zoomOnMouseWheel: false, // 滚轮是否触发缩放
		moveOnMouseMove: true, // 鼠标滚轮触发滚动
		moveOnMouseWheel: true,
	}
],