const posList = [
'left',
'right',
'top',
'bottom',
'inside',
'insideTop',
'insideLeft',
'insideRight',
'insideBottom',
'insideTopLeft',
'insideTopRight',
'insideBottomLeft',
'insideBottomRight'
];
app.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: posList.reduce(function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
const labelOption = {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
};
myChart.setOption({
series: [
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
}
]
});
}
};
const labelOption = {
show: true,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {}
}
};
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['2012', '2013', '2014', '2015', '2016']
}
],
yAxis: [
{
type: 'value',
max: 300,
min:50,
gridIndex: 0,
interval: 25,
axisTick: {
show: false,
},
splitLine: {
//网格线
lineStyle: {
// type: "solid", //设置网格线类型 dotted:虚线 solid:实线
width: 0.7,
color: "rgba(177, 253, 255, 0.1)",
},
}
}
],
series: [
{
name: 'Forest',
type: 'pictorialBar',
symbol: 'rect', //柱子的形状
symbolOffset: [0, 0], //柱子的位置
z:11,
label: labelOption,
barWidth:20,
emphasis: {
focus: 'series'
},
data: [320, 332]
},
{
name: 'Forest',
type: 'pictorialBar',
symbol: 'rect', //柱子的形状
symbolOffset: [-5, 0], //柱子的位置
z:10,
label: labelOption,
color:'red',
barWidth:30,
emphasis: {
focus: 'series'
},
data: [220, 132]
},
{
name: 'Steppe',
type: 'pictorialBar',
symbol: 'rect', //柱子的形状
symbolOffset: [25,0], //柱子的位置
z:11,
barWidth:20,
label: labelOption,
emphasis: {
focus: 'series'
},
data: [220, 182]
},
]
};
可复制到echarts编辑器查看效果,主要是yAxis设置最小值后 (max: 300,min:50),出现越界,理想是不越界。
把min 和max都去掉,换成scale
scale: true,
只在数值轴中(type: 'value')有效。
是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
在设置 min 和 max 之后该配置项无效。
https://echarts.apache.org/zh...