效果
- y轴数据集名称左对齐
- 限制label最多显示10位，超出显示省略号
- label前加icon
关键：
- y轴标题是动态获取的，长度需要动态计算
- 设置echarts–>grid–>left 与yAxis–>axisLabel–>margin相等即可
解释
- echarts–>grid–>left ：grid是直角坐标系内绘图网格，left 是grid组件离容器左侧的距离
- yAxis–>axisLabel–>margin：刻度标签与轴线之间的距离
通过canvas计算y轴文字的宽度
getTextWidth(text, font) {
let canvas = (document.createElement("canvas"));
let context = canvas.getContext("2d");
context.font = font;
let metrics = context.measureText(text);
return metrics.width;
},
// 处理x,y轴数据
handleBarData(list) { // list是接口取到的数据
this.dataX = [];
this.dataY = [];
// 深拷贝数据
let sortCopy = deepClone(list)
// 求出y轴标签最长的项
let maxlengthName = sortCopy.sort((a, b) => {
return b.dataSetName.length - a.dataSetName.length;
})[0].dataSetName;
// 计算最长的名字长度
let maxlength = maxlengthName.length
// 限制label最多显示10位，超出显示省略号
if(maxlength > 11) maxlengthName = maxlengthName.slice(0, 10) + '...'
// 求出list中label最长的长度 设置偏移量
this.yLeft = this.getTextWidth(maxlengthName,'14px Microsoft Yahei') + 30
// 清洗数据 求出x,y轴数据
list.forEach((item) => {
this.dataY.push(item.dataSetName);
this.dataX.push(item.searchNumber);
});
this.init();
},
// 横向柱状图
init() {
let vueThis = this;
var myChart = vueThis.$echarts.init(
document.getElementById('t1201')
);
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
show: false,
},
grid: {
top: '3%',
// left: 80,
left: this.yLeft,
// align:'left ',
right: '3%',
bottom: '3%',
// containLabel:true
},
xAxis: [
{
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
},
axisLabel: {
textStyle: {
color: '#fff',
},
},
type: 'value',
show: true,
minInterval: 1,
},
],
yAxis: {
minInterval:10,
axisLine: {
//y轴
show: true,
},
type: 'category',
triggerEvent: true,
axisTick: {
show: false,
},
inverse: true,
data: this.dataY,
axisLabel: {
color: '#fff',
fontSize: 14,
// margin: 80,
margin: this.yLeft,
// 实现label前面的icon
formatter: function(value, index) {
let icon = '';
switch (index) {
case 0:
icon = 'one';
break;
case 1:
icon = 'two';
break;
case 2:
icon = 'three';
break;
case 3:
icon = 'four';
break;
case 4:
icon = 'five';
break;
}
if (value.length > 11) {
value = value.slice(0, 10) + '...';
}
return '{' + icon + '| }{value| ' + value + '}';
},
textStyle:{
align:'left',
baseline: 'middle'
},
// align: 'left',
rich: {},
},
},
series: [
{
name: this.activeTab,
type: 'bar',
barWidth: 12, // 柱子宽度
itemStyle: {
barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
color: new vueThis.$echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 0,
color: '#68EEFF',
},
{
offset: 1,
color: '#00A1FF',
},
],
false
), // 渐变
},
data: this.dataX,
},
],
};
const richObj = {};
const formatterY = ['one', 'two', 'three', 'four', 'five'];
formatterY.forEach((item) => {
richObj[item] = {
// align: 'right',
backgroundColor: {
image: require(`@/views/visual/images/${item}.png`),
},
height: 20,
};
});
option.yAxis.axisLabel.rich = richObj;
myChart.setOption(option);
// 提示泡
this.extension(myChart);
this.$nextTick(() => {
myChart.resize();
});
},
