解决vue页面中引入Echarts图表后出现宽度铺不满容器的问题
Options: {
tooltip: {
trigger: "axis",
axisPointer: {
// Use axis to trigger tooltip
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
},
},
legend: {
left: "center",
top: "top",
data: [
{
name: "ww",
textStyle: {
fontSize: 12,
color: "rgb(255, 255, 255)",
},
// icon: "image://" + imgZhiWu + "",
icon: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAhElEQVQokY2RMQ5AQBBFn41WIQqdznU2TqV3E5zFCfRCcACZZMkawv5q5ue/nclslA91CVgg4Vsb0JvAMC5jTWD4gmJlFEAFpK6fgRYYz4BRgPXCuLryAxrIXtbwH3gAv9LA9ALcPA30wOL1Uot3SV9JrtF8rSUT5AdDtQsgI/cAYgW6AwFKFCcXTG1fAAAAAElFTkSuQmCC`,
},
{
name: "dd",
textStyle: {
fontSize: 12,
color: "rgb(255, 255, 255)",
},
// icon: "image://" + imgDongWu + "",
icon: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAfklEQVQokZWRQQ5AQAxFH7GdhdjbuY64iws4Eo5kL8TMnjRBRgnjrdrmv5kmjVjXAigBwzsW6EWoA8IHNv4RFkyiBjlQAeneT0ALDEcgVkLphdnryg9oIXtYw3/gJnyihfFBuMy00AOz10stsxO5Q/N3JblgKE4E+dIFGAvQbYlRGHaIHPgMAAAAAElFTkSuQmCC`
},
{
name: "zz",
textStyle: {
fontSize: 12,
color: "rgb(255, 255, 255)",
},
// icon: "image://" + imgZhenJun + "",
icon: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAgUlEQVQokY2RQQ5AMBBFn8bWQuztXKfp1dwEd3EBeyHYk0lKagj9q5mf/zqTabL3VIAFMr61Ap2JDOMz1kSGLyhVRgk4IPf9BDTAcAaMAmwQxtcuDGigeFkjfOAB/EoD4wtw8zTQAXPQSy3eJX0luUb9tZZMkB+M1SaAjNwiiAVoD+VWFIrODzLdAAAAAElFTkSuQmCC`
},
],
},
grid: {
left: "0",
right: "10%",
bottom: "10%",
top: "17%",
containLabel: true,
},
xAxis: {
name: "%",
nameTextStyle: {
color: "#fff",
},
axisLine: {
show: true,
lineStyle: {
color: "#727ea8",
},
}, // 坐标轴轴线相关设置
max: "10",
type: "value",
axisTick: {
show: false,
}, // 坐标轴刻度相关设置
axisLabel: {
formatter: "{value}",
interval: "0",
color: "#fff",
}, // 刻度标签相关设置
splitLine: {
lineStyle: {
color: "#22446a",
},
}, //分割线相关设置
},
yAxis: {
type: "category",
data: ["一级", "二级", "三级", "四级"],
axisTick: {
show: false,
}, // 坐标轴刻度相关设置
axisLine: {
show: true,
lineStyle: {
color: "#727ea8",
},
}, // 坐标轴轴线相关设置
axisLabel: {
color: "#fff",
}, // 刻度标签相关设置
},
series: [
{
name: "ww",
type: "bar",
stack: "total",
color: "#00ffff",
barWidth: "6",
emphasis: {
focus: "series",
},
data: [2, 4, 3, 3],
},
{
name: "dd",
type: "bar",
stack: "total",
color: "#ffd500",
barWidth: "6",
emphasis: {
focus: "series",
},
data: [3, 4, 5, 6],
},
{
name: "zz",
type: "bar",
stack: "total",
color: "#17d486",
barWidth: "6",
emphasis: {
focus: "series",
},
data: [2, 4, 6, 3],
},
],
},