fengxiang
1 year ago
4 changed files with 848 additions and 60 deletions
-
563src/pages/OperationCenter/CustomerServieMgm/ComplainStat/echartsOptions.jsx
-
115src/pages/OperationCenter/CustomerServieMgm/ComplainStat/index.scss
-
211src/pages/OperationCenter/CustomerServieMgm/ComplainStat/loadable.jsx
-
19src/services/OperationCenter/CustomerManage/index.js
@ -0,0 +1,563 @@ |
|||||
|
const hexToRgba = (hex, alpha = 1) => { |
||||
|
const color = hex.slice(1); |
||||
|
const rgba = [ |
||||
|
parseInt("0x" + color.slice(0, 2)), |
||||
|
parseInt("0x" + color.slice(2, 4)), |
||||
|
parseInt("0x" + color.slice(4, 6)), |
||||
|
alpha, |
||||
|
]; |
||||
|
return `rgba(${rgba.toString()})`; |
||||
|
}; |
||||
|
const colorList = [ |
||||
|
"#9baaff", |
||||
|
"#ff9ba7", |
||||
|
"#c8d6f4", |
||||
|
"#9bfff3", |
||||
|
"#ff9bf3", |
||||
|
"#eeb08e", |
||||
|
"#79d3fb", |
||||
|
]; |
||||
|
function linearColors1(color) { |
||||
|
return { |
||||
|
type: "linear", |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0.3, |
||||
|
color: color, |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
], |
||||
|
global: false, |
||||
|
}; |
||||
|
} |
||||
|
function linearColors2(color) { |
||||
|
return { |
||||
|
type: "linear", |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 1, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: hexToRgba(color, 1), |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: hexToRgba(color, 0.2), |
||||
|
}, |
||||
|
], |
||||
|
global: false, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// 条形图 |
||||
|
export const barChartOption = (data) => { |
||||
|
const { x_axis = [], y_axis = [] } = data; |
||||
|
// console.log(data); |
||||
|
const len = parseInt(x_axis?.length || 0); |
||||
|
const zoomSpan = 100 / ((len < 8 ? 8 : len) / 8); |
||||
|
return { |
||||
|
backgroundColor: "transparent", |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "shadow", |
||||
|
}, |
||||
|
backgroundColor: "rgba(0, 0, 0, 0.5)", |
||||
|
borderColor: "rgba(75, 253, 238, 0.4)", |
||||
|
textStyle: { color: "#FFFFFF", fontSize: 12 }, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: 15, |
||||
|
left: "5%", |
||||
|
right: "3%", |
||||
|
bottom: len > 8 ? 25 : 15, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
// legend: { |
||||
|
// top: 0, |
||||
|
// right: "3%", |
||||
|
// itemWidth: 15, |
||||
|
// itemHeight: 10, |
||||
|
// textStyle: { color: "#999999", fontSize: 12 }, |
||||
|
// data: getLegend(y_axis), |
||||
|
// }, |
||||
|
dataZoom: [ |
||||
|
{ |
||||
|
type: "inside", |
||||
|
// span: zoomSpan, |
||||
|
minSpan: zoomSpan, |
||||
|
maxSpan: zoomSpan, |
||||
|
zoomLock: true, |
||||
|
}, |
||||
|
{ |
||||
|
type: "slider", |
||||
|
backgroundColor: "rgba(255,255,255,.3)", |
||||
|
dataBackground: { |
||||
|
areaStyle: "#fff", |
||||
|
}, |
||||
|
height: 9, |
||||
|
bottom: 15, |
||||
|
show: len > 8 ? true : false, |
||||
|
zoomLock: true, |
||||
|
moveHandleSize: 10, |
||||
|
handleIcon: |
||||
|
"path://M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z", |
||||
|
handleColor: "#0260FF", |
||||
|
handleSize: "95%", |
||||
|
// handleStyle: { |
||||
|
// shadowBlur: 3, |
||||
|
// shadowOffsetX: 1, |
||||
|
// shadowOffsetY: 1, |
||||
|
// shadowColor: "rgba(0, 0, 0, 0.6)", |
||||
|
// }, |
||||
|
textStyle: { |
||||
|
fontSize: 12, |
||||
|
color: "#9A9A9A", |
||||
|
}, |
||||
|
showDetail: false, |
||||
|
}, |
||||
|
], |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
// type: "value", |
||||
|
type: "category", |
||||
|
axisTick: { show: false }, |
||||
|
axisLine: { show: false }, |
||||
|
axisLabel: { fontSize: 12, color: "#FFFFFF", interval: 0 }, |
||||
|
data: x_axis || [], |
||||
|
}, |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
axisTick: { show: false }, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: "#9A9A9A", |
||||
|
opacity: 0.6, |
||||
|
}, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
opacity: 0.4, |
||||
|
}, |
||||
|
}, |
||||
|
axisLabel: { fontSize: 12, color: "#FFFFFF" }, |
||||
|
type: "value", |
||||
|
// type: "category", |
||||
|
}, |
||||
|
], |
||||
|
series: renderBars(y_axis), |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
// 生成条形 |
||||
|
function renderBars(arr) { |
||||
|
let newArr = []; |
||||
|
if (arr?.length) { |
||||
|
newArr = arr.map((v, i) => { |
||||
|
return { |
||||
|
type: "bar", |
||||
|
name: v?.name || "数量", |
||||
|
// yAxisIndex: 0, |
||||
|
// barMaxWidth: "auto", |
||||
|
// barCategoryGap:20, |
||||
|
barWidth: 20, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: "top", |
||||
|
formatter: function (params) { |
||||
|
let value = params.value || params.value != 0 ? params.value : ""; |
||||
|
return value; |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color: i % 2 ? linearColors2("#fd9a9a") : linearColors2("#4a70f4"), |
||||
|
}, |
||||
|
data: v?.value || [], |
||||
|
}; |
||||
|
}); |
||||
|
} |
||||
|
return newArr; |
||||
|
} |
||||
|
|
||||
|
// 饼图 |
||||
|
export const pieChartOption = (data) => { |
||||
|
const list = [...data]; |
||||
|
const labels = list?.length ? list.map((v) => v.name) : []; |
||||
|
const option = { |
||||
|
color: colorList, |
||||
|
backgroundColor: "transparent", |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
backgroundColor: "rgba(0, 0, 0, 0.5)", |
||||
|
textStyle: { color: "#FFFFFF", fontSize: 14 }, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "middle", |
||||
|
eft: "center", |
||||
|
containLabel: false, |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: "horizontal", |
||||
|
top: "bottom", |
||||
|
left: "center", |
||||
|
data: labels, |
||||
|
type: "scroll", |
||||
|
// formatter(name) { |
||||
|
// let num = labels.findIndex((v) => v == name); |
||||
|
// return name + " {a|" + list[num]?.value + "}"; |
||||
|
// }, |
||||
|
// itemWidth: 10, |
||||
|
// itemHeight: 10, |
||||
|
textStyle: { |
||||
|
color: "#FFFFFF", |
||||
|
// width: 120, |
||||
|
// overflow: "breakAll", |
||||
|
// lineHeight: 16, |
||||
|
// rich: { |
||||
|
// a: { color: "#3f7ff7" }, |
||||
|
// }, |
||||
|
}, |
||||
|
// itemGap: 16, |
||||
|
// selectedMode: false |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
// id: "1", |
||||
|
type: "pie", |
||||
|
center: ["50%", "46%"], |
||||
|
radius: ["50%", "70%"], |
||||
|
data: list, |
||||
|
// z: 0, |
||||
|
// itemStyle: { |
||||
|
// color: ({ dataIndex }: any) => linearColors2[dataIndex % 20], |
||||
|
// }, |
||||
|
emphasis: { label: { show: true } }, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "center", |
||||
|
// borderRadius: 10, |
||||
|
// backgroundColor: "#ffffff", |
||||
|
// width: "120", |
||||
|
// overflow: "breakAll", |
||||
|
formatter(param) { |
||||
|
// return "{num|" + param.value + "}" + "\n {name|" + param.name + "}"; |
||||
|
return ( |
||||
|
"{num|" + param.percent + "%}" + "\n {name|" + param.name + "}" |
||||
|
); |
||||
|
}, |
||||
|
rich: { |
||||
|
num: { |
||||
|
fontSize: 16, |
||||
|
fontWeight: 500, |
||||
|
padding: [0, 0, 5], |
||||
|
color: "#3f7ff7", |
||||
|
}, |
||||
|
name: { |
||||
|
fontSize: 14, |
||||
|
color: "#FFFFFF", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
return option; |
||||
|
}; |
||||
|
|
||||
|
// 折线图 |
||||
|
export const lineChartOption = (data) => { |
||||
|
const { x_axis = [], y_axis = [] } = data; |
||||
|
// console.log(data); |
||||
|
const len = parseInt(x_axis?.length || 0); |
||||
|
const zoomSpan = 100 / ((len < 8 ? 8 : len) / 8); |
||||
|
return { |
||||
|
backgroundColor: "transparent", |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
backgroundColor: "rgba(0, 0, 0, 0.5)", |
||||
|
borderColor: "rgba(75, 253, 238, 0.4)", |
||||
|
textStyle: { color: "#FFFFFF", fontSize: 12 }, |
||||
|
}, |
||||
|
grid: { |
||||
|
// top: y_axis?.length > 5 ? 60 : 40, |
||||
|
top: 30, |
||||
|
left: "5%", |
||||
|
right: "3%", |
||||
|
bottom: len > 8 ? 25 : 15, |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
legend: { |
||||
|
top: 0, |
||||
|
right: "3%", |
||||
|
// itemWidth: 15, |
||||
|
// itemHeight: 10, |
||||
|
textStyle: { color: "#FFFFFF", fontSize: 12 }, |
||||
|
data: getLegend(y_axis), |
||||
|
}, |
||||
|
dataZoom: [ |
||||
|
{ |
||||
|
type: "inside", |
||||
|
// span: zoomSpan, |
||||
|
minSpan: zoomSpan, |
||||
|
maxSpan: zoomSpan, |
||||
|
zoomLock: true, |
||||
|
}, |
||||
|
{ |
||||
|
type: "slider", |
||||
|
backgroundColor: "rgba(255,255,255,.3)", |
||||
|
dataBackground: { |
||||
|
areaStyle: "#fff", |
||||
|
}, |
||||
|
height: 9, |
||||
|
bottom: 15, |
||||
|
show: len > 8 ? true : false, |
||||
|
zoomLock: true, |
||||
|
moveHandleSize: 10, |
||||
|
handleIcon: |
||||
|
"path://M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z", |
||||
|
handleColor: "#0260FF", |
||||
|
handleSize: "95%", |
||||
|
// handleStyle: { |
||||
|
// shadowBlur: 3, |
||||
|
// shadowOffsetX: 1, |
||||
|
// shadowOffsetY: 1, |
||||
|
// shadowColor: "rgba(0, 0, 0, 0.6)", |
||||
|
// }, |
||||
|
textStyle: { |
||||
|
fontSize: 12, |
||||
|
color: "#9A9A9A", |
||||
|
}, |
||||
|
showDetail: false, |
||||
|
}, |
||||
|
], |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: "category", |
||||
|
boundaryGap: false, |
||||
|
axisLabel: { fontSize: 12, color: "#FFFFFF" }, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: "#9A9A9A", |
||||
|
opacity: 0.55, |
||||
|
}, |
||||
|
}, |
||||
|
data: x_axis || [], |
||||
|
}, |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: "value", |
||||
|
axisLabel: { fontSize: 12, color: "#FFFFFF" }, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: "#9A9A9A", |
||||
|
opacity: 0.6, |
||||
|
}, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
opacity: 0.4, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
series: renderLines(y_axis), |
||||
|
// series: { |
||||
|
// name: "数量", |
||||
|
// type: "line", |
||||
|
// smooth: true, |
||||
|
// lineStyle: { |
||||
|
// width: 2, |
||||
|
// color: "#58b8ff", |
||||
|
// }, |
||||
|
// data: y_axis || [], |
||||
|
// }, |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
// 获取图例 |
||||
|
function getLegend(arr) { |
||||
|
let newArr = []; |
||||
|
if (arr?.length) { |
||||
|
arr.forEach((v, i) => { |
||||
|
newArr.push(v?.name || "数量" + i); |
||||
|
}); |
||||
|
} |
||||
|
return newArr; |
||||
|
} |
||||
|
|
||||
|
// 生成折线 |
||||
|
function renderLines(arr) { |
||||
|
let newArr = []; |
||||
|
if (arr?.length) { |
||||
|
newArr = arr.map((v) => { |
||||
|
return { |
||||
|
name: v?.name || "数量", |
||||
|
type: "line", |
||||
|
// stack: "Total", |
||||
|
yAxisIndex: 0, |
||||
|
// smooth: true, |
||||
|
// lineStyle: { |
||||
|
// width: 2, |
||||
|
// color: `#30b4ea`, |
||||
|
// }, |
||||
|
// itemStyle: { |
||||
|
// color: `#30b4ea`, |
||||
|
// }, |
||||
|
// areaStyle: { |
||||
|
// opacity: 0.8, |
||||
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
// { |
||||
|
// offset: 0, |
||||
|
// color: "rgba(59,255,244,0.3)", |
||||
|
// }, |
||||
|
// { |
||||
|
// offset: 1, |
||||
|
// color: "rgba(59,255,244,0)", |
||||
|
// }, |
||||
|
// ]), |
||||
|
// }, |
||||
|
data: v?.value || [], |
||||
|
}; |
||||
|
}); |
||||
|
} |
||||
|
return newArr; |
||||
|
} |
||||
|
|
||||
|
// 水球 |
||||
|
export function waterOption(data) { |
||||
|
let num = (data / 100).toFixed(2); |
||||
|
return { |
||||
|
backgroundColor: "transparent", |
||||
|
// title: [ |
||||
|
// { |
||||
|
// text: "比率", |
||||
|
// x: "22%", |
||||
|
// y: "70%", |
||||
|
// textStyle: { |
||||
|
// fontSize: 14, |
||||
|
// fontWeight: "100", |
||||
|
// color: "#5dc3ea", |
||||
|
// lineHeight: 16, |
||||
|
// textAlign: "center", |
||||
|
// }, |
||||
|
// }, |
||||
|
// ], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "liquidFill", |
||||
|
radius: "85%", |
||||
|
// center: ["25%", "45%"], |
||||
|
color: [ |
||||
|
{ |
||||
|
type: "linear", |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#7A7BF0", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.25, |
||||
|
color: "#7F76F1", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.5, |
||||
|
color: "#9170F7", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.75, |
||||
|
color: "#BF7EFB", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#C89EF9", |
||||
|
}, |
||||
|
], |
||||
|
globalCoord: false, |
||||
|
}, |
||||
|
], |
||||
|
data: [num, num], // data个数代表波浪数 |
||||
|
backgroundStyle: { |
||||
|
borderWidth: 1, |
||||
|
opacity: 0.5, |
||||
|
color: { |
||||
|
type: "radial", |
||||
|
x: 0.5, |
||||
|
y: 0.5, |
||||
|
r: 0.5, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#E9EAFB", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.4, |
||||
|
color: "#E9EAFB", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#CDCDF9", |
||||
|
}, |
||||
|
], |
||||
|
global: false, |
||||
|
}, |
||||
|
}, |
||||
|
label: { |
||||
|
fontSize: 14, |
||||
|
color: "#fff", |
||||
|
formatter(param) { |
||||
|
return "{num|" + data + "%}" + "\n {name|完好率}"; |
||||
|
}, |
||||
|
rich: { |
||||
|
num: { |
||||
|
fontSize: 20, |
||||
|
padding: [10, 0, 5], |
||||
|
color: "#ffffff", |
||||
|
}, |
||||
|
name: { |
||||
|
fontSize: 10, |
||||
|
color: "#ffffff", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
outline: { |
||||
|
// show: false, |
||||
|
borderDistance: 0, |
||||
|
itemStyle: { |
||||
|
borderWidth: 3, |
||||
|
borderColor: "#CCD5F6", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: ["85%", "100%"], |
||||
|
silent: true, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color: "#EDEDFD", |
||||
|
}, |
||||
|
data: [{ value: 100 }], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue