zhangzhang
1 year ago
6 changed files with 196 additions and 156 deletions
@ -1,130 +1,155 @@ |
|||
|
|||
/* 数据 */ |
|||
let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别
|
|||
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903]; // 人数
|
|||
let nameList = [ |
|||
"1月", |
|||
"2月", |
|||
"3月", |
|||
"4月", |
|||
"5月", |
|||
"6月", |
|||
"7月", |
|||
"8月", |
|||
"9月", |
|||
"10月", |
|||
"11月", |
|||
"12月", |
|||
]; // 类别
|
|||
let valueList = [ |
|||
800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903, |
|||
]; // 人数
|
|||
// var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"]
|
|||
/* 数据整合 */ |
|||
let dataList = []; |
|||
nameList.map((item, index) => { |
|||
if (index === 4) { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#FFB904' // 0% 处的颜色
|
|||
}, { |
|||
offset: 1, color: '#FF6969' // 100% 处的颜色
|
|||
}], |
|||
global: false // 缺省为 false
|
|||
if (index === 4) { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "#FFB904", // 0% 处的颜色
|
|||
}, |
|||
borderRadius: 6 |
|||
}, |
|||
label: { show: false } |
|||
}) |
|||
} else { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
borderRadius: 6 |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
var options = { |
|||
grid: { |
|||
top: '7%',//上边距
|
|||
right: '0',//右边距
|
|||
left: '0',//左边距
|
|||
bottom: "2%",//下边距
|
|||
containLabel: true, |
|||
}, |
|||
tooltip: { |
|||
|
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: nameList, |
|||
axisTick: { |
|||
show: false //隐藏X轴刻度
|
|||
{ |
|||
offset: 1, |
|||
color: "#FF6969", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
global: false, // 缺省为 false
|
|||
}, |
|||
borderRadius: 6, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)" |
|||
} |
|||
label: { show: false }, |
|||
}); |
|||
} else { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
borderRadius: 6, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#B6E6FF', |
|||
fontSize: 8, |
|||
fontFamily: 'Source Han Sans CN-Regular', |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
var options = { |
|||
grid: { |
|||
top: "7%", //上边距
|
|||
right: "0", //右边距
|
|||
left: "0", //左边距
|
|||
bottom: "2%", //下边距
|
|||
containLabel: true, |
|||
}, |
|||
tooltip: {}, |
|||
xAxis: { |
|||
type: "category", |
|||
data: [], |
|||
axisTick: { |
|||
show: false, //隐藏X轴刻度
|
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)", |
|||
}, |
|||
}, |
|||
yAxis: [{ |
|||
type: 'value', |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#fff", |
|||
fontSize: "10px", |
|||
fontFamily: "Source Han Sans CN-Regular", |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "", |
|||
splitNumber: 5, |
|||
nameTextStyle: { |
|||
color: '#B6E6FF', |
|||
fontSize: 13, |
|||
fontFamily: 'Source Han Sans CN-Regular', |
|||
align: "left", |
|||
verticalAlign: "center", |
|||
color: "#B6E6FF", |
|||
fontSize: 10, |
|||
fontFamily: "Source Han Sans CN-Regular", |
|||
align: "left", |
|||
verticalAlign: "center", |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 13, |
|||
color: '#B6E6FF', |
|||
fontFamily: 'HarmonyOS Sans-Regular', |
|||
// formatter:function(value,index){
|
|||
// return yList[index]
|
|||
// }
|
|||
fontSize: "10px", |
|||
color: "#fff", |
|||
fontFamily: "HarmonyOS Sans-Regular", |
|||
// formatter:function(value,index){
|
|||
// return yList[index]
|
|||
// }
|
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: 'rgba(49, 217, 255, 0.5)', |
|||
} |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.5)", |
|||
}, |
|||
}, |
|||
}], |
|||
series: [{ |
|||
type: 'bar', |
|||
data: dataList, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
type: "bar", |
|||
data: [], |
|||
z: 4, |
|||
itemStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#06D7B1' // 0% 处的颜色
|
|||
}, { |
|||
offset: 1, color: '#80F1BB' // 100% 处的颜色
|
|||
}], |
|||
global: false // 缺省为 false
|
|||
}, |
|||
borderRadius: [4, 4, 0, 0] |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "#06D7B1", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#80F1BB", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
global: false, // 缺省为 false
|
|||
}, |
|||
borderRadius: [4, 4, 0, 0], |
|||
}, |
|||
barWidth: 10, |
|||
label: { |
|||
show: false, |
|||
} |
|||
}, |
|||
] |
|||
} |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
|
|||
Loading…
Reference in new issue