贴一下代码怕自己忘了
今天写项目的时候,要求多个柱状图,但是单写option太多了,查了一下可以用grid放在同一个option中,只需要设置gridIndex即可,也可以实现单个控制。
要求的结果图如下:
methods: {
initCharts() {
//初始化图表,并挂载到DOM树中
var Map = echarts.init(document.getElementById("map"));
var option = {
//由grid控制各个图表,x,y为与左上角顶点的距离,控制各个图表的位置及大小
grid: [
{ x: "2%", y: "5%", width: "40%", height: "18%" },
{ x: "50%", y: "5%", width: "40%", height: "18%" },
{ x: "2%", y: "45%", width: "40%", height: "18%" },
{ x: "50%", y: "45%", width: "40%", height: "18%" },
{ x: "2%", y: "75%", width: "40%", height: "18%" }
],
title: [
{ text: "林长总数" },
{ text: "护林员总数", left: "50%" },
{ text: "监督员总数", top: "40%" },
{ text: "技术员总数", left: "50%", top: "40%" },
{ text: "警员总数", top: "70%" }
],
//xAxis控制横坐标
xAxis: [
{
data: this.areaNameList,
//由不同的gridIndex对应x轴,y轴及数据
gridIndex: 0,
//axisTick控制刻度线,alignWithLabel控制标签与刻度线对齐,interval为刻度的间隔,设为0就可以显示所有刻度
axisTick: { alignWithLabel: true, interval: 0 },
//interval控制标签之间的间隔,设0将显示所有标签
axisLabel: {
interval: 0,
//formatter格式化,将原标签纵向展示(split方法为拼接字符串,将每一个字用\n拼接就可以纵向展示
formatter: function(value) {
return value.split("").join("\n");
}
}
},
{
data: this.areaNameList,
gridIndex: 1,
axisTick: { alignWithLabel: true, interval: 0 },
axisLabel: {
interval: 0,
formatter: function(value) {
return value.split("").join("\n");
}
}
},
{
data: this.areaNameList,
gridIndex: 2,
axisTick: { alignWithLabel: true, interval: 0 },
axisLabel: {
interval: 0,
formatter: function(value) {
return value.split("").join("\n");
}
}
},
{
data: this.areaNameList,
gridIndex: 3,
axisTick: { alignWithLabel: true, interval: 0 },
axisLabel: {
interval: 0,
formatter: function(value) {
return value.split("").join("\n");
}
}
},
{
data: this.areaNameList,
gridIndex: 4,
axisTick: { alignWithLabel: true, interval: 0 },
axisLabel: {
interval: 0,
formatter: function(value) {
return value.split("").join("\n");
}
}
}
],
yAxis: [
//minInterval控制最小间隔,不设置的话会有小数,同样由gridIndex绑定各个图表
{ gridIndex: 0, minInterval: 1 },
{ gridIndex: 1, minInterval: 1 },
{ gridIndex: 2, minInterval: 1 },
{ gridIndex: 3, minInterval: 1 },
{ gridIndex: 4, minInterval: 1 }
],
series: [
{
type: "bar",
data: this.lzCountList,
//此处的两个index必须一致,否则会报错
xAxisIndex: 0,
yAxisIndex: 0
},
{
type: "bar",
data: this.forestRangerCountList,
xAxisIndex: 1,
yAxisIndex: 1
},
{
type: "bar",
data: this.supervisorCountList,
xAxisIndex: 2,
yAxisIndex: 2
},
{
type: "bar",
data: this.fuzzCountList,
xAxisIndex: 3,
yAxisIndex: 3
},
{
type: "bar",
data: this.technicianCountList,
xAxisIndex: 4,
yAxisIndex: 4
}
]
};
Map.setOption(option);
},