11 changed files with 974 additions and 549 deletions
@ -1,391 +1,176 @@ |
|||||
var res = [ |
import * as echarts from "echarts"; |
||||
{ value: 50, name: '情报板发布' }, |
var options = { |
||||
{ value: 1, name: '' }, |
tooltip: { |
||||
{ value: 20, name: '微博发布' }, |
showContent: true, |
||||
{ value: 1, name: '' }, |
trigger: 'axis', |
||||
{ value: 30, name: '服务网站' }, |
backgroundColor: 'rgba(8,36,68,.7)', |
||||
{ value: 1, name: '' }, |
color: '#fff', |
||||
]; |
textStyle: { |
||||
// var res = this.evaluatedCountList;
|
color: '#fff', |
||||
var data1 = [], data2 = [], data3 = [], legendData = []; |
|
||||
var curIndex = 0; |
|
||||
var index = 0; |
|
||||
let angle = 0; //角度，用来做简单的动画效果的
|
|
||||
|
|
||||
for (var i = 0; i < res.length; i++) { |
|
||||
|
|
||||
data1.push({ |
|
||||
value: res[i].value, |
|
||||
name: res[i].name, |
|
||||
}) |
|
||||
data2.push({ |
|
||||
value: res[i].value, |
|
||||
name: res[i].name, |
|
||||
itemStyle: { |
|
||||
opacity: 0.4, |
|
||||
}, |
}, |
||||
}) |
}, |
||||
|
legend: { |
||||
data3.push({ |
top: '5%', |
||||
value: res[i].value, |
right: '10', |
||||
name: res[i].name, |
icon: 'circle', |
||||
itemStyle: { |
itemWidth: 10, |
||||
opacity: 0.1, |
itemHeight: 10, |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
fontSize: 12, |
||||
}, |
}, |
||||
}) |
}, |
||||
if ( res[i].name != "" ) |
grid: { |
||||
legendData.push(res[i].name); |
left: '30%', |
||||
} |
right: '20%', |
||||
|
top: '10%', |
||||
var options = { |
bottom: '10%', |
||||
color: ['#5CC5FF', 'transparent', '#54EFD5', 'transparent', '#FD9666', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'], |
// width: 250,
|
||||
title: [ |
}, |
||||
|
xAxis: [ |
||||
{ |
{ |
||||
text:'999', |
splitLine: { |
||||
top: '25%', |
show: false, |
||||
textAlign: 'center', |
}, |
||||
left: '50%', |
type: 'value', |
||||
textStyle: { |
show: false, |
||||
color: '#ffffff', |
|
||||
fontSize: 30, |
|
||||
fontFamily: 'SourceHanSansCN', |
|
||||
}, |
|
||||
}, |
}, |
||||
|
], |
||||
|
yAxis: [ |
||||
{ |
{ |
||||
text: '总数', |
splitLine: { |
||||
top: '38%', |
show: false, |
||||
textAlign: 'center', |
|
||||
left: '50%', |
|
||||
textStyle: { |
|
||||
color: 'rgba(242, 252, 253, 0.84)', |
|
||||
fontSize: 16, |
|
||||
fontFamily: 'SourceHanSansCN', |
|
||||
}, |
|
||||
}, |
|
||||
], |
|
||||
grid: { |
|
||||
top: '3%', |
|
||||
left: '6%', |
|
||||
right: '6%', |
|
||||
bottom: '3%', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'item', |
|
||||
formatter: '{b} : {c}:{d}' |
|
||||
}, |
|
||||
legend: { |
|
||||
orient: '', |
|
||||
left: '10%', |
|
||||
top: '68%', |
|
||||
itemWidth: 10, |
|
||||
itemHeight: 10, |
|
||||
icon:"circle", |
|
||||
textStyle: { |
|
||||
color: "#ffffff", |
|
||||
fontSize: 14, |
|
||||
lineHeight: 22, |
|
||||
rich: { |
|
||||
text: { |
|
||||
marginLeft:32, |
|
||||
fontSize: 14, |
|
||||
}, |
}, |
||||
number: { |
axisLine: { |
||||
fontSize: 14, |
//y轴
|
||||
color: "#37E7FF", |
show: false, |
||||
marginLeft:32, |
|
||||
fontWeight: 'bold' |
|
||||
}, |
}, |
||||
unit: { |
type: 'category', |
||||
fontSize: 14, |
axisTick: { |
||||
} |
show: false, |
||||
} |
|
||||
}, |
|
||||
data: legendData, |
|
||||
formatter(name) { |
|
||||
if ( name == "" ) return ""; |
|
||||
const newData = res; |
|
||||
let tarValue = 0; |
|
||||
let total = 0; |
|
||||
for (let i = 0; i < newData.length; i++) { |
|
||||
total += newData[i].value; |
|
||||
if (newData[i].name === name) { |
|
||||
tarValue = newData[i].value; |
|
||||
} |
|
||||
} |
|
||||
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); |
|
||||
const arr = name + ' ' + tarValue; |
|
||||
return `{text|${name}} {number|${percert}%}`;; |
|
||||
}, |
|
||||
}, |
|
||||
series: [ |
|
||||
/** 饼图上刻度 */ |
|
||||
{ |
|
||||
type: 'gauge', |
|
||||
center: ['50%', '35%'], |
|
||||
radius: '40%', // 错位调整此处
|
|
||||
startAngle: 0, |
|
||||
endAngle: 360, |
|
||||
splitNumber: 52, |
|
||||
axisLine: { show: false }, |
|
||||
splitLine: { |
|
||||
// length: 39,
|
|
||||
length: '2', |
|
||||
lineStyle: { |
|
||||
width: 5, |
|
||||
color: '#5CC5FF' |
|
||||
} |
|
||||
}, |
|
||||
axisTick: { show: false }, |
|
||||
axisLabel: { show: false } |
|
||||
}, |
|
||||
/** 绘制外部圆弧-2-开始圆点 <left-top> */ |
|
||||
{ |
|
||||
type: 'custom', |
|
||||
coordinateSystem: 'none', |
|
||||
renderItem: (params, api) => { |
|
||||
let x0 = api.getWidth() / 2; |
|
||||
let y0 = api.getHeight() / 2 - 59; |
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; |
|
||||
return { |
|
||||
type: 'circle', |
|
||||
shape: { |
|
||||
/** 角度175° 外弧2开始角度 */ |
|
||||
cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), |
|
||||
cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), |
|
||||
r: 4 |
|
||||
}, |
}, |
||||
style: { |
inverse: true, |
||||
fill: '#5BC4FF', |
data: [ |
||||
stroke: '#5BC4FF' |
'大学城收费站', |
||||
|
'大学城收费站', |
||||
|
'大学城收费站', |
||||
|
'大学城收费站', |
||||
|
'大学城收费站', |
||||
|
], |
||||
|
axisLabel: { |
||||
|
color: '#fff', |
||||
|
fontSize: 14, |
||||
|
margin:20, |
||||
}, |
}, |
||||
silent: true |
|
||||
} |
|
||||
}, |
|
||||
data: [0] |
|
||||
}, |
|
||||
{ |
|
||||
type: 'custom', |
|
||||
coordinateSystem: 'none', |
|
||||
renderItem: (params, api) => { |
|
||||
return { |
|
||||
type: 'arc', |
|
||||
shape: { |
|
||||
cx: api.getWidth() / 2, |
|
||||
cy: api.getHeight() / 2 - 59, |
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, |
|
||||
startAngle: (350 + -angle) * Math.PI / 180, |
|
||||
endAngle: (120 + -angle) * Math.PI / 180 |
|
||||
}, |
|
||||
style: { |
|
||||
fill: 'transparent', |
|
||||
stroke: '#5BC4FF66', |
|
||||
lineWidth: 2.6 |
|
||||
}, |
|
||||
silent: true |
|
||||
} |
|
||||
}, |
|
||||
data: [0] |
|
||||
}, |
}, |
||||
{ |
{ |
||||
type: 'custom', |
type: 'category', |
||||
coordinateSystem: 'none', |
inverse: true, |
||||
renderItem: (params, api) => { |
axisTick: 'none', |
||||
let x0 = api.getWidth() / 2; |
axisLine: 'none', |
||||
let y0 = api.getHeight() / 2 - 59; |
show: true, |
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; |
axisLabel: { |
||||
return { |
textStyle: { |
||||
type: 'circle', |
color: '#A7D6F4', |
||||
shape: { |
fontSize: '14', |
||||
/** 角度175° 外弧2开始角度 */ |
|
||||
cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), |
|
||||
cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), |
|
||||
r: 4 |
|
||||
}, |
|
||||
style: { |
|
||||
fill: '#5BC4FF', |
|
||||
stroke: '#5BC4FF' |
|
||||
}, |
|
||||
silent: true |
|
||||
} |
|
||||
}, |
|
||||
data: [0] |
|
||||
}, |
|
||||
{ |
|
||||
type: 'custom', |
|
||||
coordinateSystem: 'none', |
|
||||
renderItem: (params, api) => { |
|
||||
return { |
|
||||
type: 'arc', |
|
||||
shape: { |
|
||||
cx: api.getWidth() / 2, |
|
||||
cy: api.getHeight() / 2 - 59, |
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, |
|
||||
startAngle: (150 + -angle) * Math.PI / 180, |
|
||||
endAngle: (-30 + -angle) * Math.PI / 180 |
|
||||
}, |
|
||||
style: { |
|
||||
fill: 'transparent', |
|
||||
stroke: '#5BC4FF66', |
|
||||
lineWidth: 2.6 |
|
||||
}, |
}, |
||||
silent: true |
|
||||
} |
|
||||
}, |
}, |
||||
data: [0] |
// data: value,
|
||||
}, |
data: [900, 380, 360, 340, 320], |
||||
{ |
|
||||
type: 'custom', |
|
||||
coordinateSystem: 'none', |
|
||||
renderItem: (params, api) => { |
|
||||
let x0 = api.getWidth() / 2; |
|
||||
let y0 = api.getHeight() / 2 - 59; |
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; |
|
||||
return { |
|
||||
type: 'circle', |
|
||||
shape: { |
|
||||
/** 角度175° 外弧2开始角度 */ |
|
||||
cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180), |
|
||||
cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180), |
|
||||
r: 4 |
|
||||
}, |
|
||||
style: { |
|
||||
fill: '#5BC4FF', |
|
||||
stroke: '#5BC4FF' |
|
||||
}, |
|
||||
silent: true |
|
||||
} |
|
||||
}, |
|
||||
data: [0] |
|
||||
}, |
|
||||
{ |
|
||||
type: 'custom', |
|
||||
coordinateSystem: 'none', |
|
||||
renderItem: (params, api) => { |
|
||||
return { |
|
||||
type: 'arc', |
|
||||
shape: { |
|
||||
cx: api.getWidth() / 2, |
|
||||
cy: api.getHeight() / 2 - 59, |
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, |
|
||||
startAngle: (590 + -angle) * Math.PI / 180, |
|
||||
endAngle: (350 + -angle) * Math.PI / 180 |
|
||||
}, |
|
||||
style: { |
|
||||
fill: 'transparent', |
|
||||
stroke: '#5BC4FF66', |
|
||||
lineWidth: 2.6 |
|
||||
}, |
|
||||
silent: true |
|
||||
} |
|
||||
}, |
|
||||
data: [0] |
|
||||
}, |
|
||||
{ |
|
||||
type: 'custom', |
|
||||
coordinateSystem: 'none', |
|
||||
renderItem: (params, api) => { |
|
||||
let x0 = api.getWidth() / 2; |
|
||||
let y0 = api.getHeight() / 2 - 59; |
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; |
|
||||
return { |
|
||||
type: 'circle', |
|
||||
shape: { |
|
||||
/** 角度175° 外弧2开始角度 */ |
|
||||
cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), |
|
||||
cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), |
|
||||
r: 4 |
|
||||
}, |
|
||||
style: { |
|
||||
fill: '#5BC4FF', |
|
||||
stroke: '#5BC4FF' |
|
||||
}, |
|
||||
silent: true |
|
||||
} |
|
||||
}, |
|
||||
data: [0] |
|
||||
}, |
|
||||
{ |
|
||||
type: 'custom', |
|
||||
coordinateSystem: 'none', |
|
||||
renderItem: (params, api) => { |
|
||||
return { |
|
||||
type: 'arc', |
|
||||
shape: { |
|
||||
cx: api.getWidth() / 2, |
|
||||
cy: api.getHeight() / 2 - 59, |
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, |
|
||||
startAngle: (90 + -angle) * Math.PI / 180, |
|
||||
endAngle: (160 + -angle) * Math.PI / 180 |
|
||||
}, |
|
||||
style: { |
|
||||
fill: 'transparent', |
|
||||
stroke: '#5BC4FF66', |
|
||||
lineWidth: 2.6 |
|
||||
}, |
|
||||
silent: true |
|
||||
} |
|
||||
}, |
|
||||
data: [0] |
|
||||
}, |
}, |
||||
|
], |
||||
|
series: [ |
||||
{ |
{ |
||||
type: 'pie', |
name: '收费站限行（次）', |
||||
radius: ['45%', '39%'], |
type: 'bar', |
||||
center: ['50%', '35%'], |
barGap: '120%', |
||||
z: 10, |
barWidth: 10, // 柱子宽度
|
||||
label: { |
showBackground: true, |
||||
show: false, |
MaxSize: 0, |
||||
position: 'center', |
backgroundStyle: { |
||||
formatter: (params) => { |
color: '#0BA7DA32', |
||||
return params.name + "\r\n" + params.value |
|
||||
}, |
}, |
||||
rich: { |
label: { |
||||
total: { |
show: false, |
||||
fontSize: 16, |
// color: '#A7D6F4',
|
||||
color: '#04F5FE', |
// fontSize: 14,
|
||||
}, |
// distance: 20, // 距离
|
||||
efficiency: { |
// formatter: '{c} ', // 这里是数据展示的时候显示的数据
|
||||
fontSize: 12, |
// align: "center",
|
||||
color: '#00FD6D', |
// position: [290, 0]
|
||||
}, |
}, // 柱子上方的数值
|
||||
|
itemStyle: { |
||||
|
barBorderRadius: [0, 4, 4, 0], // 圆角（左上、右上、右下、左下）
|
||||
|
color: new echarts.graphic.LinearGradient( |
||||
|
1, |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#48d0ca', |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.5, |
||||
|
color: '#61D8FF', |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#61D8FF00', |
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
), // 渐变
|
||||
}, |
}, |
||||
color: '#FFFFFF', |
data: [900, 380, 360, 340, 320], |
||||
fontSize: 12, |
}, |
||||
lineHeight: 16, |
{ |
||||
}, |
name: '收费站封闭（次）', |
||||
data: data1, |
type: 'bar', |
||||
labelLine: { |
barWidth: 10, // 柱子宽度
|
||||
show: false, |
showBackground: true, |
||||
}, |
MaxSize: 0, |
||||
itemStyle: { |
backgroundStyle: { |
||||
normal: { |
color: '#0BA7DA32', |
||||
borderWidth: 6, |
}, |
||||
shadowBlur: 10, |
label: { |
||||
borderRadius: 50, // 圆角
|
show: false, |
||||
} |
// color: '#A7D6F4',
|
||||
} |
// fontSize: 14,
|
||||
}, |
// distance: 20, // 距离
|
||||
{ |
// formatter: '{c} ', // 这里是数据展示的时候显示的数据
|
||||
type: 'pie', |
// align: "center",
|
||||
radius: ['25%', '39%'], |
position: ['100%', 0] |
||||
center: ['50%', '35%'], |
}, // 柱子上方的数值
|
||||
label: { |
itemStyle: { |
||||
show: false, |
barBorderRadius: [0, 4, 4, 0], // 圆角（左上、右上、右下、左下）
|
||||
}, |
color: new echarts.graphic.LinearGradient( |
||||
data: data2, |
1, |
||||
labelLine: { |
0, |
||||
show: false, |
0, |
||||
}, |
0, |
||||
itemStyle: { |
[ |
||||
normal: { |
{ |
||||
borderWidth: 6, |
offset: 0, |
||||
shadowBlur: 10, |
color: '#FF6969', |
||||
borderRadius: 0, // 圆角
|
}, |
||||
} |
{ |
||||
} |
offset: 0.5, |
||||
|
color: '#FF696955', |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#FFB90410', |
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
), // 渐变
|
||||
|
}, |
||||
|
data: [900, 380, 360, 340, 320, 300, 280, 260, 400, 380, 360, 340, 320, 300, 280, 260], |
||||
}, |
}, |
||||
], |
], |
||||
|
}; |
||||
|
|
||||
}; |
|
||||
|
|
||||
export default options |
export default options; |
||||
@ -1,180 +1,317 @@ |
|||||
|
import * as echarts from "echarts"; |
||||
|
|
||||
/* 数据 */ |
let xData = [ |
||||
let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别
|
"大学城-长清", |
||||
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: { |
let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120]; |
||||
type: 'linear', |
let data2= [120, 340, 750, 600, 400, 700, 900, 200, 540, 320]; |
||||
x: 0, |
let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120]; |
||||
y: 0, |
let options = { |
||||
x2: 0, |
tooltip: { |
||||
y2: 1, |
show:false, |
||||
colorStops: [{ |
trigger: "axis", |
||||
offset: 0, color: '#FFB904' // 0% 处的颜色
|
axisPointer: { |
||||
}, { |
// 坐标轴指示器，坐标轴触发有效
|
||||
offset: 1, color: '#FF6969' // 100% 处的颜色
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
}], |
}, |
||||
global: false // 缺省为 false
|
|
||||
}, |
|
||||
borderRadius: 6 |
|
||||
}, |
|
||||
label: { show: false } |
|
||||
}) |
|
||||
} else { |
|
||||
dataList.push({ |
|
||||
name: item, |
|
||||
value: valueList[index], |
|
||||
itemStyle:{ |
|
||||
borderRadius: 6 |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
var options = { |
|
||||
legend: { |
|
||||
// orient: 'vertical',
|
|
||||
icon: "circle", |
|
||||
itemHeight: 8, |
|
||||
itemWidth: 8, |
|
||||
top: "5%", |
|
||||
x: "right", |
|
||||
textStyle: { |
textStyle: { |
||||
color: "#fff", |
color: "#fff", |
||||
|
fontSize: 14, |
||||
}, |
}, |
||||
|
backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
|
||||
|
borderColor: "rgba(3, 31, 71, .0)", |
||||
|
formatter: "健康监测<br>{b1}：{c1}人", |
||||
}, |
}, |
||||
grid: { |
grid: { |
||||
top: '20%',//上边距
|
left: "2%", |
||||
right: '0',//右边距
|
right: "4%", |
||||
left: '0',//左边距
|
top: "10%", |
||||
bottom: "10%",//下边距
|
bottom: "5%", |
||||
containLabel: true, |
containLabel: true, |
||||
}, |
}, |
||||
xAxis: { |
xAxis: { |
||||
type: 'category', |
data: xData, |
||||
data: nameList, |
show: true, |
||||
axisTick: { |
axisTick: { |
||||
show: false //隐藏X轴刻度
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
}, |
}, |
||||
axisLine: { |
axisLine: { |
||||
lineStyle: { |
lineStyle: { |
||||
color: "rgba(49, 217, 255, 0.8)" |
color: "#1C82C5", |
||||
} |
}, |
||||
}, |
|
||||
axisLabel: { |
|
||||
show: true, |
|
||||
color: '#B6E6FF', |
|
||||
fontSize:8, |
|
||||
fontFamily: 'Source Han Sans CN-Regular', |
|
||||
}, |
|
||||
}, |
|
||||
yAxis: [{ |
|
||||
type: 'value', |
|
||||
name: "", |
|
||||
max: 1000, |
|
||||
min:0, |
|
||||
splitNumber:5, |
|
||||
nameTextStyle: { |
|
||||
color: '#B6E6FF', |
|
||||
fontSize: 13, |
|
||||
fontFamily: 'Source Han Sans CN-Regular', |
|
||||
align: "left", |
|
||||
verticalAlign: "center", |
|
||||
}, |
}, |
||||
axisLabel: { |
axisLabel: { |
||||
fontSize: 13, |
interval: 0, |
||||
color: '#B6E6FF', |
align: "center", |
||||
fontFamily: 'HarmonyOS Sans-Regular', |
rotate: "1", |
||||
// formatter:function(value,index){
|
margin: "20", |
||||
// return yList[index]
|
textStyle: { |
||||
// }
|
fontSize: 12, |
||||
|
color: "#50A2C1", |
||||
|
}, |
||||
}, |
}, |
||||
axisLine: { |
}, |
||||
show: false, |
yAxis: [ |
||||
}, |
{ |
||||
axisTick: { |
min: 0, |
||||
show: false |
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: "#1C82C5", |
||||
|
}, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: "rgba(28, 130, 197, .3)", |
||||
|
type: "solid", |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: "#DEEBFF", |
||||
|
textStyle: { |
||||
|
fontSize: 12, |
||||
|
}, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
}, |
}, |
||||
splitLine: { |
], |
||||
lineStyle: { |
legend: { |
||||
color: 'rgba(49, 217, 255, 0.5)', |
// orient: 'vertical',
|
||||
} |
icon: "circle", |
||||
|
itemHeight: 6, |
||||
|
itemWidth: 6, |
||||
|
top: "5%", |
||||
|
right: "10%", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
}, |
}, |
||||
}], |
|
||||
series: [ |
data:[ |
||||
|
{ |
||||
|
name:"交通特征", |
||||
|
itemStyle:{ |
||||
|
color:'#51BFA4', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name:"饱和度", |
||||
|
itemStyle:{ |
||||
|
color:'#08BAF4', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name:"拥挤度", |
||||
|
itemStyle:{ |
||||
|
color:'#E2BA74', |
||||
|
}, |
||||
|
} |
||||
|
], |
||||
|
}, |
||||
|
series: [ |
||||
{ |
{ |
||||
name: '感知事件', |
name: "饱和度", |
||||
type: 'line', |
type: "bar", |
||||
symbol: 'circle', |
barWidth: "10px", |
||||
symbolSize: 0, |
selectedMode:false, |
||||
smooth: true, |
select:{ |
||||
areaStyle: { |
itemStyle:{ |
||||
width: 4, |
|
||||
opacity: 0.25, |
opacity: 1, |
||||
color: { |
color: function (params) { |
||||
type: 'linear', |
var a = params; |
||||
x: 0, |
|
||||
y: 0, |
return new echarts.graphic.LinearGradient( |
||||
x2: 0, |
0, |
||||
y2: 1, |
0, |
||||
colorStops: [ |
0, |
||||
{ offset: 0.389, color: "#32BB8A99" }, |
1, |
||||
{ offset: 1, color: "#32BB8A00" }, |
[ |
||||
], |
{ |
||||
global: false, |
offset: 0, |
||||
|
color: "#1AC5FD", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#003B4E", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
}, |
}, |
||||
}, |
}, |
||||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
}, |
||||
itemStyle: { |
itemStyle: { |
||||
color: '#32BB8A', |
barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
|
||||
}, |
// lenged文本
|
||||
lineStyle: { |
opacity: 1, |
||||
width:2, |
color: function (params) { |
||||
}, |
var a = params.name; |
||||
|
console.log("==========a=============",a); |
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#00A3FF", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#00A3FF00", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
data: data2, |
||||
|
}, |
||||
|
// 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
|
||||
|
{ |
||||
|
name: "交通特征", |
||||
|
type: "bar", |
||||
|
barWidth: "10px", |
||||
|
barGap: "120%", |
||||
|
selectedMode:false, |
||||
|
select:{ |
||||
|
itemStyle:{ |
||||
|
opacity: 1, |
||||
|
color: function (params) { |
||||
|
var a = params; |
||||
|
|
||||
data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据
|
return new echarts.graphic.LinearGradient( |
||||
}, |
0, |
||||
{ |
0, |
||||
name: '交通事件', |
0, |
||||
type: 'line', |
1, |
||||
symbol: 'circle', |
[ |
||||
symbolSize: 0, |
{ |
||||
|
offset: 0, |
||||
|
color: "#00E4BB53", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#00E4BB53", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
// lenged文本
|
||||
|
barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
|
||||
|
opacity: 1, |
||||
|
color: function (params) { |
||||
|
var a = params.name; |
||||
|
console.log("==========a=============",a); |
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#01D2EE", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#01D2EE00", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
data: data1, |
||||
|
}, |
||||
|
// 进度条的小圆圈
|
||||
|
{ |
||||
|
name: "拥挤度", |
||||
|
type: "bar", |
||||
|
barWidth: "10px", |
||||
|
selectedMode:false, |
||||
|
select:{ |
||||
|
itemStyle:{ |
||||
|
opacity: 1, |
||||
|
color: function (params) { |
||||
|
var a = params; |
||||
|
|
||||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
return new echarts.graphic.LinearGradient( |
||||
itemStyle: { |
0, |
||||
color: '#E2BA74', |
0, |
||||
}, |
0, |
||||
lineStyle: { |
1, |
||||
width: 2, |
[ |
||||
}, |
{ |
||||
smooth: true, |
offset: 0, |
||||
areaStyle: { |
color: "#1AC5FD", // 0% 处的颜色
|
||||
width: 4, |
|
||||
opacity: 0.25, |
|
||||
color: { |
|
||||
type: 'linear', |
|
||||
x: 0, |
|
||||
y: 0, |
|
||||
x2: 0, |
|
||||
y2: 1, |
|
||||
colorStops: [ |
|
||||
{ offset: 0.389, color: "##E2BA7490" }, |
|
||||
{ offset: 1, color: "##E2BA7400" }, |
|
||||
], |
|
||||
global: false, |
|
||||
}, |
}, |
||||
}, |
{ |
||||
data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
|
offset: 1, |
||||
}, |
color: "#003B4E", // 100% 处的颜色
|
||||
] |
}, |
||||
} |
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
|
||||
|
// lenged文本
|
||||
|
opacity:1, |
||||
|
color: function (params) { |
||||
|
var a = params.name; |
||||
|
console.log("==========a=============",a); |
||||
|
return new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#32BB8A", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#32BB8A00", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
false |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
data: data2, |
||||
|
}, |
||||
|
{ |
||||
|
name: '路段里程数', |
||||
|
stack: '我不叠加',//添加stack属性，相同的stack值的数据类型将会叠加不并列，值为自定义值
|
||||
|
type: 'line',//换为line 实现折线与柱状图
|
||||
|
data: data3, |
||||
|
color:"#E2BA74" |
||||
|
} |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
|
||||
export default options; |
export default options; |
||||
@ -0,0 +1,157 @@ |
|||||
|
let zData = ["侧翻", "撞障碍物", "自燃", "追尾", "撞护栏", "货物洒落"]; |
||||
|
let lc = [450, 500, 250, 340,450, 500]; |
||||
|
let lc2 = [400, 550, 200, 140,400, 550]; |
||||
|
let options = { |
||||
|
|
||||
|
tooltip: { |
||||
|
show: true, |
||||
|
trigger: "axis", |
||||
|
backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
|
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
formatter: "{b}：{c}人", |
||||
|
}, |
||||
|
grid: { |
||||
|
right: "4%", |
||||
|
top: "12%", |
||||
|
left: "2%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
boundaryGap: true, |
||||
|
data: zData, |
||||
|
axisLabel: { |
||||
|
interval: 0, |
||||
|
textStyle: { |
||||
|
color: "rgba(255, 255, 255, 0.80)", |
||||
|
fontSize: 16 |
||||
|
}, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
//坐标轴刻度相关设置。
|
||||
|
show: false, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
//坐标轴轴线相关设置
|
||||
|
lineStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
//坐标轴在 grid 区域中的分隔线。
|
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: "value", |
||||
|
splitNumber: 6, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: "rgba(255, 255, 255, 0.90)", |
||||
|
fontSize: 16 |
||||
|
}, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: "rgba(255, 255, 255, 0.40)", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "从业人员", |
||||
|
type: "pictorialBar", |
||||
|
stack: "数量", |
||||
|
label: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
position: "top", |
||||
|
textStyle: { |
||||
|
color: "#FFFFFF", |
||||
|
fontSize: 16, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: { |
||||
|
type: "linear", |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#0085FF", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#0085FF00", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
globalCoord: false, // 缺省为 false
|
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
symbol: "path://M48 0 L49 17 C52 72 68 125 96 173 H0 C25 125 41 73 46 19 L48 0Z", |
||||
|
data: lc, |
||||
|
}, |
||||
|
{ |
||||
|
name: "去年同期数量", |
||||
|
type: "pictorialBar", |
||||
|
stack: "else", |
||||
|
barGap: "10%", |
||||
|
boundaryGap:"100%", |
||||
|
label: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
position: "top", |
||||
|
textStyle: { |
||||
|
color: "#FFFFFF", |
||||
|
fontSize: 16, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: { |
||||
|
type: "linear", |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#01D2EE", // 0% 处的颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "rgba(0, 194, 255,0)", // 100% 处的颜色
|
||||
|
}, |
||||
|
], |
||||
|
globalCoord: false, // 缺省为 false
|
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
symbol: "path://M48 0 L49 17 C52 72 68 125 96 173 H0 C25 125 41 73 46 19 L48 0Z", |
||||
|
data: lc2, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
export default options; |
||||
@ -0,0 +1,144 @@ |
|||||
|
const sxnja = [ |
||||
|
400,400,400 |
||||
|
]; |
||||
|
const sxnja2 = [ |
||||
|
700,700,700 |
||||
|
]; |
||||
|
|
||||
|
const minNumber = 90; |
||||
|
const minArray = []; |
||||
|
sxnja.map((value) => { |
||||
|
minArray.push(parseFloat((value - minNumber).toFixed(2))) |
||||
|
}) |
||||
|
console.log(minArray) |
||||
|
let xaxisData = [ |
||||
|
'客车', |
||||
|
'货车', |
||||
|
'专项车', |
||||
|
]; |
||||
|
|
||||
|
var options = { |
||||
|
title: { |
||||
|
text: '单位/%', |
||||
|
top: '4%', |
||||
|
left: '3%', |
||||
|
textStyle: { |
||||
|
fontSize: '10px', |
||||
|
fontWeight: 300, |
||||
|
color: '#B5C5D4', |
||||
|
opacity: 0.8 |
||||
|
} |
||||
|
}, |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return (value + minNumber).toFixed(2) + ' %'; |
||||
|
} |
||||
|
}, |
||||
|
legend: { |
||||
|
// orient: 'vertical',
|
||||
|
icon: "circle", |
||||
|
itemHeight: 6, |
||||
|
itemWidth: 6, |
||||
|
top: "5%", |
||||
|
right: "0%", |
||||
|
textStyle: { |
||||
|
fontSize:10, |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '1%', |
||||
|
right: '0%', |
||||
|
top: '16%', |
||||
|
bottom: '0%', |
||||
|
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', |
||||
|
min: 0, |
||||
|
max:900, |
||||
|
splitNumber: 9, |
||||
|
// 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: [12, 5], |
||||
|
// symbolOffset: symbolOffset,
|
||||
|
// barWidth:'40%',
|
||||
|
itemStyle: { |
||||
|
color: '#20E7FF' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
barGap: "10%", |
||||
|
name: '平均处置时长（分钟）', |
||||
|
data: sxnja2 , |
||||
|
type: 'pictorialBar', |
||||
|
symbol: 'roundRect', |
||||
|
symbolRepeat: true, |
||||
|
symbolSize: [12, 5], |
||||
|
// symbolOffset: symbolOffset,
|
||||
|
// barWidth:'40%',
|
||||
|
itemStyle: { |
||||
|
color: '#20FFC9' |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
export default options; |
||||
|
After Width: | Height: | Size: 403 KiB |
@ -0,0 +1,157 @@ |
|||||
|
<template> |
||||
|
<div class='TrafficFlow'> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'maintainQuery', |
||||
|
components: { |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
changeTabs(){ |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
::v-deep .el-tabs__item{ |
||||
|
display: inline-flex; |
||||
|
justify-content: center; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
min-width:128px; |
||||
|
position: relative; |
||||
|
left:10px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__active-bar { |
||||
|
min-width:128px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__nav-wrap::after { |
||||
|
background-color: #133242; |
||||
|
opacity: 0.1; |
||||
|
} |
||||
|
|
||||
|
.footTabs { |
||||
|
display: inline; |
||||
|
width:100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.TrafficFlow { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
z-index: 6; |
||||
|
color: white; |
||||
|
padding-top: 15px; |
||||
|
background-image: url('./assets/online_bj.jpg'); |
||||
|
background-size: 100% 100%; |
||||
|
|
||||
|
.header-shot{ |
||||
|
width: 98%; |
||||
|
margin: auto; |
||||
|
margin-top: 15px; |
||||
|
height:160px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: 100%; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
pointer-events: none; |
||||
|
margin-top: 0px; |
||||
|
|
||||
|
>div { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
|
||||
|
.content-l { |
||||
|
width: calc(32.2%); |
||||
|
margin-right:20px; |
||||
|
display: inline-flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
>div { |
||||
|
margin-bottom:15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content-r { |
||||
|
width: calc(33%); |
||||
|
display: inline-flex; |
||||
|
} |
||||
|
|
||||
|
.content-rm { |
||||
|
width: calc(33%); |
||||
|
margin-right:10px; |
||||
|
} |
||||
|
|
||||
|
.content-mi { |
||||
|
width: calc(50%); |
||||
|
|
||||
|
margin-right:20px; |
||||
|
} |
||||
|
|
||||
|
.content-mi:last-child { |
||||
|
margin-right:10px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.content-m { |
||||
|
display: inline-flex; |
||||
|
width: 66%; |
||||
|
margin-right:20px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.foot{ |
||||
|
width: 98%; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex: 1; |
||||
|
pointer-events: none; |
||||
|
margin-top: 8px; |
||||
|
>div { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
|
||||
|
.foot-w { |
||||
|
width:100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.foot-l { |
||||
|
width: 726px; |
||||
|
} |
||||
|
.foot-m { |
||||
|
width: 613px; |
||||
|
} |
||||
|
.foot-r { |
||||
|
width: 493px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue