10 changed files with 291 additions and 238 deletions
@ -1,108 +1,107 @@ |
|||
const sxnja = [ |
|||
293.67, 493.44, 694.34, 894.5, 697.82, 895.09, 495.79, 497.49, 393.72, 293.52 |
|||
]; |
|||
const minNumber = 0; |
|||
const minArray = []; |
|||
sxnja.map((value) => { |
|||
minArray.push(parseFloat((value - minNumber).toFixed(2))) |
|||
}) |
|||
console.log(minArray) |
|||
let xaxisData = [ |
|||
]; |
|||
|
|||
var options = { |
|||
title: { |
|||
293.67, 493.44, 694.34, 894.5, 697.82, 895.09, 495.79, 497.49, 393.72, 293.52, |
|||
]; |
|||
const minNumber = 0; |
|||
const minArray = []; |
|||
sxnja.map((value) => { |
|||
minArray.push(parseFloat((value - minNumber).toFixed(2))); |
|||
}); |
|||
console.log(minArray); |
|||
let xaxisData = []; |
|||
|
|||
var options = { |
|||
title: { |
|||
// text: '单位/%',
|
|||
top: '0%', |
|||
left: '0%', |
|||
textStyle: { |
|||
fontSize: '10px', |
|||
fontWeight: 300, |
|||
color: '#B5C5D4', |
|||
opacity: 0.8 |
|||
} |
|||
}, |
|||
tooltip: { |
|||
valueFormatter: function (value) { |
|||
return (value + minNumber).toFixed(2); |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '1%', |
|||
right: '0%', |
|||
top: '16%', |
|||
bottom: '5%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: xaxisData, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
width: 1, |
|||
color: '#545454' |
|||
} |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
color: '#B5C5D4', |
|||
fontSize: '10px', |
|||
interval: 0 |
|||
} |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
// type: 'value',
|
|||
// min: function (value) {
|
|||
// return value.min*0.9;
|
|||
// },
|
|||
type: 'value', |
|||
// max: yAxisMax,
|
|||
axisLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
width: 1, |
|||
color: '#545454' |
|||
} |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: '#B2C2D3', |
|||
opacity: 0.3, |
|||
type: 'dotted' |
|||
} |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
color: '#B5C5D4', |
|||
fontSize: '12px', |
|||
formatter: (value) => { |
|||
return value + minNumber |
|||
} |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
top: "0%", |
|||
left: "0%", |
|||
textStyle: { |
|||
fontSize: "10px", |
|||
fontWeight: 300, |
|||
color: "#B5C5D4", |
|||
opacity: 0.8, |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
valueFormatter: function (value) { |
|||
return value + minNumber; |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: "1%", |
|||
right: "0%", |
|||
top: "16%", |
|||
bottom: "5%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
data: xaxisData, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
width: 1, |
|||
color: "#545454", |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
color: "#B5C5D4", |
|||
fontSize: "10px", |
|||
interval: 0, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
// type: 'value',
|
|||
// min: function (value) {
|
|||
// return value.min*0.9;
|
|||
// },
|
|||
type: "value", |
|||
// max: yAxisMax,
|
|||
axisLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
width: 1, |
|||
color: "#545454", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#B2C2D3", |
|||
opacity: 0.3, |
|||
type: "dotted", |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
color: "#B5C5D4", |
|||
fontSize: "12px", |
|||
formatter: (value) => { |
|||
return value + minNumber; |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
// name: '审限内结案率',
|
|||
data: minArray, |
|||
type: 'pictorialBar', |
|||
symbol: 'roundRect', |
|||
symbolRepeat: true, |
|||
symbolSize: [13, 4], |
|||
// symbolOffset: symbolOffset,
|
|||
// barWidth:'40%',
|
|||
itemStyle: { |
|||
color: '#20E7FF' |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
data: minArray, |
|||
type: "pictorialBar", |
|||
symbol: "roundRect", |
|||
symbolRepeat: true, |
|||
symbolSize: [13, 4], |
|||
// symbolOffset: symbolOffset,
|
|||
// barWidth:'40%',
|
|||
itemStyle: { |
|||
color: "#20E7FF", |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
export default options; |
|||
|
|||
@ -1,133 +1,155 @@ |
|||
|
|||
/* 数据 */ |
|||
let nameList = ["大学城", "长清", "孝里", "安城", "平阴北", "平阴南", "东平", "梁山东", "嘉祥西"]; // 类别
|
|||
let nameList = [ |
|||
"大学城", |
|||
"长清", |
|||
"孝里", |
|||
"安城", |
|||
"平阴北", |
|||
"平阴南", |
|||
"东平", |
|||
"梁山东", |
|||
"嘉祥西", |
|||
]; // 类别
|
|||
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303]; // 人数
|
|||
// var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"]
|
|||
/* 数据整合 */ |
|||
const minNumber = 0; |
|||
let dataList = []; |
|||
nameList.map((item, index) => { |
|||
if (index === 3) { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#0469FF' // 0% 处的颜色
|
|||
}, { |
|||
offset: 1, color: '#699CFF' // 100% 处的颜色
|
|||
}], |
|||
global: false // 缺省为 false
|
|||
if (index === 3) { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "#0469FF", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#699CFF", // 100% 处的颜色
|
|||
}, |
|||
borderRadius: 6 |
|||
}, |
|||
label: { show: false } |
|||
}) |
|||
} else { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
borderRadius: 6 |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
], |
|||
global: false, // 缺省为 false
|
|||
}, |
|||
borderRadius: 6, |
|||
}, |
|||
label: { show: false }, |
|||
}); |
|||
} else { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
borderRadius: 6, |
|||
}, |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
var options = { |
|||
grid: { |
|||
top: '5%',//上边距
|
|||
right: '0',//右边距
|
|||
left: '0',//左边距
|
|||
bottom: "0%",//下边距
|
|||
containLabel: true, |
|||
}, |
|||
tooltip: { |
|||
valueFormatter: function (value) { |
|||
return (value + minNumber).toFixed(2); |
|||
} |
|||
grid: { |
|||
top: "5%", //上边距
|
|||
right: "0", //右边距
|
|||
left: "0", //左边距
|
|||
bottom: "0%", //下边距
|
|||
containLabel: true, |
|||
}, |
|||
tooltip: { |
|||
valueFormatter: function (value) { |
|||
return value + minNumber; |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: nameList, |
|||
axisTick: { |
|||
show: false //隐藏X轴刻度
|
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)" |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#B6E6FF', |
|||
fontSize: 8, |
|||
fontFamily: 'Source Han Sans CN-Regular', |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
data: nameList, |
|||
axisTick: { |
|||
show: false, //隐藏X轴刻度
|
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)", |
|||
}, |
|||
}, |
|||
yAxis: [{ |
|||
type: 'value', |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#B6E6FF", |
|||
fontSize: 8, |
|||
fontFamily: "Source Han Sans CN-Regular", |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "", |
|||
|
|||
nameTextStyle: { |
|||
color: '#B6E6FF', |
|||
fontSize: 13, |
|||
fontFamily: 'Source Han Sans CN-Regular', |
|||
align: "left", |
|||
verticalAlign: "center", |
|||
color: "#B6E6FF", |
|||
fontSize: 13, |
|||
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: 13, |
|||
color: "#B6E6FF", |
|||
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', |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
type: "bar", |
|||
data: dataList, |
|||
z: 4, |
|||
itemStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#0BA7DA' // 0% 处的颜色
|
|||
}, { |
|||
offset: 1, color: '#61D8FF' // 100% 处的颜色
|
|||
}], |
|||
global: false // 缺省为 false
|
|||
}, |
|||
borderRadius: [4, 4, 0, 0] |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "#0BA7DA", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#61D8FF", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
global: false, // 缺省为 false
|
|||
}, |
|||
borderRadius: [4, 4, 0, 0], |
|||
}, |
|||
barWidth: 10, |
|||
label: { |
|||
show: false, |
|||
} |
|||
}, |
|||
] |
|||
} |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
|
|||
Loading…
Reference in new issue