chartBar_industry: function (docm) {
let myColor = ["#008ce3", "#06d7de"];
let option = {
color: myColor,
legend: {
data: ["2019营收额", "2020营收额"],
textStyle: {
color: "#fff"
},
bottom: "20"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
top: "30",
left: "10",
right: "10",
bottom: "50",
containLabel: true
},
xAxis: {
type: "value",
axisLabel: {
textStyle: {
color: "#ccc",
fontSize: "10"
}
},
axisLine: {
show: true,
lineStyle: {
color: "#023643"
}
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#023643"
}
}
},
yAxis: {
type: "category",
name: "单位(亿元)",
nameLocation: "end",
nameTextStyle: {
color: "#fff",
fontSize: 10,
align: "left",
padding: [0, 0, -8, -60]
},
// inverse: true, // 是否是反向坐标轴
data: ["金融保险业", "教育", "制造业", "租赁和商务服务业", "住宿餐饮业", "建筑业", "房地产业", "信息传输、计算机服务和软件业", "批发和零售业", "交通运输、仓储业和邮政业"],
axisTick: {
alignWithLabel: true
},
axisLabel: {
textStyle: {
color: "#fff",
fontSize: "10"
},
// align: "right",
// lineHeight: 14,
padding: 0,
margin: 2,
showMinLabel: true,
showMaxLabel: true,
formatter: function(value) {
let ret = "";
let maxLength = 4;
let valLength = value.length;
let rowN = Math.ceil(valLength / maxLength);
// 如果类目项的文字大于5
if (rowN > 1) {
for (let i = 0; i < rowN; i++) {
let temp = ""; // 每次截取的字符串
let start = i * maxLength; // 开始截取的位置
let end = start + maxLength; // 结束截取的位置
// 这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; // 凭借最终的字符串
}
console.log(ret);
return ret;
}else {
console.log(value);
return value;
}
}
}
},
series: [{
name: "2019营收额",
type: "bar",
data: [10, 52, 200, 334, 390, 330, 220, 390, 330, 220],
label: {
normal: {
show: true,
position: "right"
}
},
barWidth: 10,
itemStyle: {
normal: {
color: function (params) {
return myColor[0];
}
}
}
}, {
name: "2020营收额",
type: "bar",
data: [10, 52, 200, 334, 390, 330, 220, 390, 330, 220],
label: {
normal: {
show: true,
position: "right",
color: "#a29008"
}
},
barWidth: 10,
itemStyle: {
normal: {
color: function (params) {
return myColor[1];
}
}
}
}]
};
let myChart = this.$echarts.init(docm);
myChart.setOption(option);
},
Echart-条状图bar
最新推荐文章于 2023-12-27 09:37:31 发布