methods: {
chartInit() {
var chartDom = document.getElementById("chartBar");
this.chart = echarts.init(chartDom);
let option = {
color: ["#339a94", "#70c1b3", "#ff9f41", "#ffa54d"],
tooltip: {
trigger: "axis",
showContent: true,
formatter: function (params) {
for (let i = 0; i < params.length; i++) {
var relVal = params[i].name;
}
for (let i = 0; i < params.length; i++) {
let unit = "个";
if (params[i].seriesName == "同比变化") {
unit = "%";
}
relVal +=
"
" +
params[i].marker +
params[i].seriesName +
":" +
params[i].data +
unit;
}
return relVal;
},
},
grid: {
left: "3%",
right: "3%",
containLabel: true,
bottom: "3%",
},
legend: {
data: this.chartData.legend,
left: "right",
padding: [0, 50, 0, 0],
itemGap: 30,
},
xAxis: [
{
type: "category",
data: this.chartData.xData,
axisPointer: {
type: "shadow",
},
axisLabel: {
formatter: function (value) {
if (value.length <= 3) {
return value.split("").join("\n");
} else {
return value;
}
},
},
},
],
yAxis: [
{
type: "value",
name: "单位（个）",
// min: 0,
// max: 100,
// interval: 20,
axisLine: { show: false },
axisTick: { show: false },
// axisLabel: {
// formatter: '{value} 个'
// }
},
{
type: "value",
name: "单位(%)",
// min: 0,
// max: 100,
// interval: 20,
axisLine: { show: false },
axisTick: { show: false },
splitLine: {
show: false, // 不显示网格线
},
// axisLabel: {
// formatter: '{value} %'
// }
},
],
series: [
{
name: this.chartData.legend[0],
type: "bar",
barWidth: 15,
stack: "AA",
// yAxisIndex: 1,
emphasis: {
focus: "series",
},
data: this.chartData.dataBar1,
},
{
name: this.chartData.legend[1],
type: "bar",
stack: "AA",
emphasis: {
focus: "series",
},
data: this.chartData.dataBar2,
},
{
name: this.chartData.legend[2],
type: "bar",
stack: "AA",
emphasis: {
focus: "series",
},
data: this.chartData.dataBar3,
},
{
name: this.chartData.legend[3],
type: "line",
yAxisIndex: 1,
stack: "AC",
data: this.chartData.dataLine1,
},
],
};
option && this.chart.setOption(option, true);
window.addEventListener("resize", () => {
this.chart.resize();
});
},
},
