let res= {
"legendData": ["自有", "外租", "分包自带"],
"data": [{
"name": "一分部",
"value1": 5191,
"value2": 10613,
"value3": 5191
},
{
"name": "二分部",
"value1": 20613,
"value2": 37860,
"value3": 30613
},
{
"name": "三分部",
"value1": 30613,
"value2": 67860,
"value3": 40613
},
{
"name": "四分部",
"value1": 30613,
"value2": 57860,
"value3": 40613
}
]
};
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: '0',
// data: ["Forest", "Steppe", "Desert", "Wetland"],
},
grid: {
left: '0',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
axisLabel: { color: '#b3b5bb' },
data: res.data.map(function (item) {
return item.name;
}),
},
],
yAxis: [
{
type: 'value',
name: '单位（万元）',
nameTextStyle: {
color: '#b3b5bb',
alighn: 'end',
padding: [0, 0, 0, -15],
},
nameGap: 30,
axisTick: { show: true },
axisLine: { show: true },
axisLabel: { color: '#b3b5bb' },
// 修改y轴分割线
splitLine: {
lineStyle: {
color: '#e6e6e6',
type: 'dashed',
},
},
},
],
series: [
{
name: res.legendData[0],
type: 'bar',
barGap: '10%',
emphasis: {
focus: 'series',
},
data: res.data.map(function (item) {
return item.value1;
}),
itemStyle: {
color: '#0091ff',
},
},
{
name: res.legendData[1],
type: 'bar',
barGap: '10%',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#44d7b6',
},
data: res.data.map(function (item) {
return item.value2;
}),
},
{
name: res.legendData[2],
type: 'bar',
barGap: '10%',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#f7b500',
},
data: res.data.map(function (item) {
return item.value3;
}),
},
{
name: res.legendData[3],
type: 'bar',
barGap: '10%',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#fa1f1f',
},
data: res.data.map(function (item) {
return item.value4;
}),
},
]
};