zhangzhang
1 year ago
13 changed files with 994 additions and 750 deletions
@ -0,0 +1,339 @@ |
|||
var res = [ |
|||
{ value: 20, name: "交通事故" }, |
|||
{ value: 1, name: "" }, |
|||
{ value: 20, name: "车辆故障" }, |
|||
{ value: 1, name: "" }, |
|||
{ value: 15, name: "路障清除" }, |
|||
{ value: 1, name: "" }, |
|||
{ value: 10, name: "交通管制" }, |
|||
{ value: 1, name: "" }, |
|||
{ value: 5, name: "道路拥堵" }, |
|||
{ value: 1, name: "" }, |
|||
{ value: 5, name: "异常天气" }, |
|||
]; |
|||
let angle = 0; //角度，用来做简单的动画效果的
|
|||
|
|||
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
|||
function getCirlPoint(x0, y0, r, angle) { |
|||
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180); |
|||
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180); |
|||
return { |
|||
x: x1, |
|||
y: y1, |
|||
}; |
|||
} |
|||
|
|||
let color = [ |
|||
"#4278F8F9", |
|||
"transparent", |
|||
"#5372C4", |
|||
"transparent", |
|||
"#0046FFF9", |
|||
"transparent", |
|||
"#FB9434F9", |
|||
"transparent", |
|||
"#854101F9", |
|||
"transparent", |
|||
"#05E599F9", |
|||
"transparent", |
|||
"#219F73F9", |
|||
"transparent", |
|||
"#7CEDD5F9", |
|||
"transparent", |
|||
]; |
|||
let colorend = [ |
|||
"#4278F800", |
|||
"transparent", |
|||
"#5372C400", |
|||
"transparent", |
|||
"#0046FF00", |
|||
"transparent", |
|||
"#FB943400", |
|||
"transparent", |
|||
"#85410100", |
|||
"transparent", |
|||
"#05E59900", |
|||
"transparent", |
|||
"#219F7300", |
|||
"transparent", |
|||
"#7CEDD500", |
|||
"transparent", |
|||
]; |
|||
|
|||
// var res = this.evaluatedCountList;
|
|||
var data1 = [], |
|||
data2 = [], |
|||
data3 = [], |
|||
legendData = []; |
|||
var curIndex = 0; |
|||
var index = 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,
|
|||
// },
|
|||
// });
|
|||
|
|||
// data3.push({
|
|||
// value: res[i].value,
|
|||
// name: res[i].name,
|
|||
// itemStyle: {
|
|||
// opacity: 0.1,
|
|||
// },
|
|||
// });
|
|||
if (res[i].name != "") legendData.push(res[i].name); |
|||
} |
|||
|
|||
var options = { |
|||
color: [ |
|||
"#2867FF", |
|||
"transparent", |
|||
"#58C3FF", |
|||
"transparent", |
|||
"#FF6A3B", |
|||
"transparent", |
|||
"#FDA474", |
|||
"transparent", |
|||
"#FEE58F", |
|||
"transparent", |
|||
"#8DFEBF", |
|||
"transparent", |
|||
"#66F4DC", |
|||
"transparent", |
|||
"#33E27D", |
|||
"transparent", |
|||
"#5D8CFE", |
|||
"transparent", |
|||
], |
|||
title: [ |
|||
{ |
|||
text: "999", |
|||
top: "25%", |
|||
textAlign: "center", |
|||
left: "48%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 30, |
|||
fontFamily: "SourceHanSansCN", |
|||
}, |
|||
}, |
|||
{ |
|||
text: "总数", |
|||
top: "38%", |
|||
textAlign: "center", |
|||
left: "48%", |
|||
textStyle: { |
|||
color: "rgba(242, 252, 253, 0.84)", |
|||
fontSize: 16, |
|||
fontFamily: "SourceHanSansCN", |
|||
}, |
|||
}, |
|||
], |
|||
grid: { |
|||
top: "38%", |
|||
left: "6%", |
|||
right: "6%", |
|||
bottom: "3%", |
|||
containLabel: true, |
|||
}, |
|||
tooltip: { |
|||
show: false, |
|||
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: { |
|||
fontSize: 14, |
|||
color: "#37E7FF", |
|||
marginLeft: 32, |
|||
fontWeight: "bold", |
|||
}, |
|||
unit: { |
|||
fontSize: 14, |
|||
}, |
|||
}, |
|||
}, |
|||
data: legendData, |
|||
// formatter(name) {
|
|||
// 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: "46%", // 错位调整此处
|
|||
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 }, |
|||
}, |
|||
{ |
|||
name: "中心效果圆", |
|||
type: "gauge", |
|||
radius: "30%", |
|||
center: ["50%", "35%"], |
|||
startAngle: 0, |
|||
endAngle: 360, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: [[1, "#0AFFE950"]], |
|||
width: 1, |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
detail: { |
|||
show: false, |
|||
}, |
|||
pointer: { |
|||
show: false, |
|||
}, |
|||
progress: { |
|||
show: true, |
|||
width: 80, |
|||
itemStyle: { |
|||
color: { |
|||
type: "radial", |
|||
x: 0.5, |
|||
y: 0.5, |
|||
r: 0.5, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgb(0, 224, 205, 0)", |
|||
}, |
|||
{ |
|||
offset: 0.7, |
|||
color: "rgba(0, 224, 205, 0)", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(10, 255, 233, 0.5)", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
}, |
|||
data: [ |
|||
{ |
|||
value: 100, |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
type: "pie", |
|||
radius: ["50%", "40%"], |
|||
center: ["50%", "35%"], |
|||
z: 10, |
|||
label: { |
|||
show: false, |
|||
position: "center", |
|||
formatter: (params) => { |
|||
return params.name + "\r\n" + params.value; |
|||
}, |
|||
rich: { |
|||
total: { |
|||
fontSize: 16, |
|||
color: "#04F5FE", |
|||
}, |
|||
efficiency: { |
|||
fontSize: 12, |
|||
color: "#00FD6D", |
|||
}, |
|||
}, |
|||
color: "#FFFFFF", |
|||
fontSize: 12, |
|||
lineHeight: 16, |
|||
}, |
|||
data: res, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
borderRadius: "5", |
|||
borderWidth: 0, |
|||
borderType: "solid", |
|||
borderCap: "round", |
|||
borderJoin: "round", |
|||
borderColor: "#064258", |
|||
borderMiterLimit: "20", |
|||
color: function (params) { |
|||
return { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 1, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: color[params.dataIndex], // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: colorend[params.dataIndex], // 100% 处的颜色
|
|||
}, |
|||
], |
|||
globalCoord: false, // 缺省为 false
|
|||
}; |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
Loading…
Reference in new issue