zhangzhang
2 years 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