
echarts-legend中如何配置图标和文字的位置(前后位置)、文字颜色、图标形状、图标宽高、图标间距离、图标中文字和图形的间距
·
代码在最下方
一.文字在后图标在前,如下图(默认情况下,当不配置legend中的align属性时)
代码如下 align:"left"或者不配置align
二.文字在前图标在后,如下图
代码如下 align:"right"
代码如下
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
icon: 'rect',//长方形
data: ['计划劳务资源', "实际劳务资源"],
//align: 'left',
right: 10,//legend距离canvas右边的距离
//left: 20,
top:10,//legend距离canvas上面的距离
textStyle: {//文字颜色
fontSize: 12,
color: '#F1F1F3',
padding:[0,3]//文字与图形之间的左右间距
},
itemWidth: 14,//图标宽
itemHeight: 10,//图标高
itemGap: 13,//间距
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['1月','2月','3月', '4月'
],
axisLine: {
show: true,
lineStyle: {
color: "rgba(219,225,255,1)",
width: 0,
type: "solid"
}
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "rgba(219,225,255,1)",
}
},
}],
yAxis: [{
type: 'value',
name:"单位:人",
axisLabel: {
textStyle: {
color: "rgba(219,225,255,1)",
margin: 15
},
// formatter: '{value} %'
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "rgba(219,225,255,1)",
width: 1,
type: "solid"
},
},
splitLine: {
show:false,
lineStyle: {
color: "rgba(219,225,255,1)",
}
}
}],
series: [{
name: '计划劳务资源',
type: 'bar',
data: [38,38,42,48],
barWidth: 10, //柱子宽度
barGap: .5, //柱子之间间距
itemStyle: {
normal: {//vue中this.$echarts jquery用echarts
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 153, 239, 0.8)'
}, {
offset: 1,
color: 'rgba(66, 187, 255, 1)'
}]),
opacity: 1,
}
}
}, {
name: '实际劳务资源',
type: 'bar',
data: [40, 30, 42, 50],
barWidth: 10,
barGap: .5,
itemStyle: {
normal: {//vue中this.$echarts jquery用echarts
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 242, 159, 1)'
}, {
offset: 1,
color: 'rgba(76, 240, 254, 1)'
}]),
opacity: 1,
}
}
}]
};
更多推荐
所有评论(0)