import echarts from "echarts"
const rowLimit = (params, max) => {
let result = ''
//一行显示几个字
let rowMax = max
let rowNumber = Math.ceil(params.length / rowMax)
// 超过 3 个字换行
if (params.length > 3) {
for (let p = 0; p < rowNumber; p++) {
let tempStr = ''
let start = p * rowMax
let end = start + rowMax
if (p == rowNumber - 1) {
tempStr = params.substring(start, params.length);
} else {
tempStr = params.substring(start, end) + '\n'
}
result += tempStr
}
} else {
result = params
}
return result
}
export const acceptOption1 = {
// 图表标题
title: {
show: true,
text: '检测受理类型',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '600'
},
textAlign: 'center',
left: '50%',
top: '20px'
},
grid: {
top: '80px'
},
xAxis: {
type: 'category',
data: ['理化', '微生物', '细胞活率', '残留检测', '细胞鉴别'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
style: {
fill: '#fff'
},
formatter (params) {
return rowLimit(params, 2)
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
// axisLabel: {
// inside: true,
// color: "#000",
// },
// axisTick: {
// show: true,
// },
// axisLine: {
// show: true,
// },
// z: 10
},
yAxis: {
type: 'value',
name: '',
nameTextStyle: {
color: '#fff',
fontSize: 14
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [{
type: 'bar',
name: '',
data: [],
barMaxWidth: '35px',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
]),
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize: 14
},
formatter (params) {
return params.value ? params.value : ''
}
}
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#2378f7" },
{ offset: 0.7, color: "#2378f7" },
{ offset: 1, color: "#83bff6" },
])
}
}
}],
tooltip: {
show: true,
trigger: 'axis'
}
}
export const colors = [
'#d20962',
'#f47721',
'#7ac143',
'#00a78e',
'#00bce4',
'#7d3f98',
'#037ef3',
'#f85a40',
'#00c16e',
'#12CBC4',
'#b4a996',
'#7552cc',
'#67809f',
'#f19066'
]
export function* getRandomColor (shuffledColors) {
let index = 0
while (index < shuffledColors.length) {
yield shuffledColors[index]
index++
}
}
let colorList = []
export const acceptOption = {
title: {
show: true,
text: '检测类型',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '600'
},
textAlign: 'center',
left: '50%',
top: '20px'
},
legend: {
// type: 'scroll',
orient: 'horizontal',
show: true,
left: 'center',
bottom: 10,
// right: 10,
// top: 100,
formatter (params) {
let l = 7
if (params.length > l) {
return params.substring(0, l) + '\n' + params.substring(l)
}
return params
},
// formatter: ['{a|{name}}'].join('\n'),
// textStyle: {
// rich: {
// a: {
// width: 80,
// overflow: 'break',
// lineHeight: 12
// }
// }
// },
z: 3,
itemWidth: 25,
itemHeight: 14,
itemGap: 10,
data: []
},
series: [
{
name: '任务完成情况',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
label: {
show: true,
position: 'outer',
// formatter: `占比：{d}%\n\n\r{b}:{c}`,
formatter: `{b}:{d}%`,
fontSize: 14
},
labelLine: {
show: true
}
}
}
}
],
color: colorList,
tooltip: {
show: true,
trigger: 'item',
formatter: '任务情况
{b}：{c}
占比：{d}%'
}
}
export const taskOption = {
// 图表标题
title: {
show: true,
text: '检测任务情况',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '600'
},
textAlign: 'center',
left: '50%',
top: '20px'
},
grid: {
top: '80px',
bottom: '30px'
},
xAxis: {
type: 'category',
data: ['委托', '任务分配', '检测', '报告'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
style: {
fill: '#fff'
},
formatter (params) {
return rowLimit(params, 2)
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
name: '',
nameTextStyle: {
color: '#fff',
fontSize: 14
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [{
type: 'bar',
name: '',
data: [],
barWidth: '24px',
barGap: '20%',
barMaxWidth: '35px',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#2378f7" },
{ offset: 0.7, color: "#2378f7" },
{ offset: 1, color: "#83bff6" },
])
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize: 14
},
formatter (params) {
return params.value ? params.value : ''
}
}
}],
tooltip: {
show: true,
trigger: 'axis'
}
}
export const trustOption = {
legend: {
data: [
{
name: '委托',
itemStyle: {
color: '#00baff'
}
},
{
name: '受理',
itemStyle: {
color: '#f5d94e'
}
}
],
textStyle: {
color: '#fff',
},
bottom: 10
},
title: {
show: true,
text: '检测委托受理量',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '600'
},
textAlign: 'center',
left: '50%',
top: '20px'
},
grid: {
top: '80px'
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
style: {
fill: '#fff'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
name: '',
nameTextStyle: {
color: '#fff',
fontSize: 14
},
splitLine: {
show: false
},
axisLabel: {
style: {
fill: '#fff'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [
{
type: 'bar',
name: '委托',
data: [],
barMaxWidth: '35px',
barStyle: {
fill: 'rgba(0, 186, 255, 0.4)'
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#2378f7" },
{ offset: 0.7, color: "#2378f7" },
{ offset: 1, color: "#83bff6" },
])
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize: 14
},
formatter (params) {
return params.value ? params.value : ''
}
}
},
{
type: 'line',
name: '受理',
data: [],
symbol: 'circle',
symbolSize: 10,
lineArea: {
show: true,
gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
},
itemStyle: {
color: '#f5d94e'
},
label: {
show: true,
position: 'right',
textStyle: {
color: '#f5d94e',
fontSize: 14
},
formatter (params) {
return params.value ? params.value : ''
}
}
}
],
tooltip: {
show: true,
trigger: 'axis'
}
}
export const reportOptionTask = {
title: {
show: true,
text: '检测任务月度完成量',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '600'
},
textAlign: 'center',
left: '50%',
top: '20px'
},
grid: {
top: '80px'
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
style: {
fill: '#fff'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
name: '',
nameTextStyle: {
color: '#fff',
fontSize: 14
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [{
type: 'bar',
name: '',
data: [],
barMaxWidth: '35px',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#2378f7" },
{ offset: 0.7, color: "#2378f7" },
{ offset: 1, color: "#83bff6" },
])
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize: 14
},
formatter (params) {
return params.value ? params.value : ''
}
}
}],
tooltip: {
show: true,
trigger: 'axis'
}
}
export const reportOption = {
title: {
show: true,
text: '检测报告月度发放量',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '600'
},
textAlign: 'center',
left: '50%',
top: '20px'
},
grid: {
top: '80px'
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
style: {
fill: '#fff'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
name: '',
nameTextStyle: {
color: '#fff',
fontSize: 14
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [{
type: 'bar',
name: '',
data: [],
barMaxWidth: '35px',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#2378f7" },
{ offset: 0.7, color: "#2378f7" },
{ offset: 1, color: "#83bff6" },
])
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize: 14
},
formatter (params) {
return params.value ? params.value : ''
}
}
}],
tooltip: {
show: true,
trigger: 'axis'
}
}
export const sampleOption = {
title: {
show: true,
text: '样品受理情况',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '600'
},
textAlign: 'center',
left: '50%',
top: '20px'
},
grid: {
top: '80px'
},
xAxis: {
type: 'category',
data: ['已委托未收样', '已收样', '已收不合格', '留样'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
style: {
fill: '#fff'
},
formatter (params) {
return rowLimit(params, 3)
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
name: '',
nameTextStyle: {
color: '#fff',
fontSize: 14
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [{
type: 'bar',
name: '',
data: [],
barMaxWidth: '35px',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#2378f7" },
{ offset: 0.7, color: "#2378f7" },
{ offset: 1, color: "#83bff6" },
])
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize: 14
},
formatter (params) {
return params.value ? params.value : ''
}
}
}],
tooltip: {
show: true,
trigger: 'axis'
}
}
export const monthOption = {
legend: {
data: [
{
name: '任务总数',
itemStyle: {
color: '#00baff'
}
},
{
name: '已完成',
itemStyle: {
color: '#f5d94e'
}
}
],
textStyle: {
color: '#fff',
},
bottom: 10
},
title: {
show: true,
text: '检测任务月度完成量',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '600'
},
textAlign: 'center',
left: '50%',
top: '20px'
},
grid: {
top: '80px'
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
style: {
fill: '#fff'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
name: '',
nameTextStyle: {
color: '#fff',
fontSize: 14
},
splitLine: {
show: false
},
axisLabel: {
style: {
fill: '#fff'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [
{
type: 'bar',
name: '任务总数',
data: [],
barMaxWidth: '35px',
barStyle: {
fill: 'rgba(0, 186, 255, 0.4)'
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#2378f7" },
{ offset: 0.7, color: "#2378f7" },
{ offset: 1, color: "#83bff6" },
])
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize: 14
},
formatter (params) {
return params.value ? params.value : ''
}
}
},
{
type: 'line',
name: '已完成',
data: [],
symbol: 'circle',
symbolSize: 10,
lineArea: {
show: true,
gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
},
itemStyle: {
color: '#f5d94e'
},
label: {
show: true,
position: 'right',
textStyle: {
color: '#f5d94e',
fontSize: 14
},
formatter (params) {
return params.value ? params.value : ''
}
}
}
],
tooltip: {
show: true,
trigger: 'axis'
}
}
export const yearOption = {
title: {
show: true,
text: '检测任务年度完成量',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '600'
},
textAlign: 'center',
left: '50%',
top: '20px'
},
legend: {
orient: 'horizontal',
show: true,
left: 'center',
bottom: 10,
z: 3,
itemWidth: 25,
itemHeight: 14,
itemGap: 10,
data: [
{
name: '未完成',
textStyle: {
color: '#ff6347'
}
},
{
name: '已完成',
textStyle: {
color: '#3f3'
}
}
]
},
series: [
{
name: '任务完成情况',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
label: {
show: true,
position: 'outer',
formatter: `占比：{d}%\n\n\r{b}:{c}`,
// formatter: `{b}:{c}\n\n\r占比：{d}%`,
fontSize: 14
},
labelLine: {
show: true
}
}
}
}
],
color: ['#ff6347', '#3f3'],
tooltip: {
show: true,
trigger: 'item',
formatter: '任务情况
{b}：{c}
占比：{d}%'
}
}
// 假数据
export const satisfaction = {
title: {
show: true,
text: '客户满意度',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '600'
},
textAlign: 'center',
left: '50%',
top: '20px'
},
legend: {
orient: 'horizontal',
show: true,
left: 'center',
bottom: 10,
z: 3,
itemWidth: 25,
itemHeight: 14,
itemGap: 10,
data: [
{
name: '不满意',
textStyle: {
color: '#d20962'
}
},
{
name: '满意',
textStyle: {
color: '#188df0'
}
}
]
},
series: [
{
name: '满意度占比',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{
name: '不满意',
value: 5
},
{
name: '满意',
value: 995
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
label: {
show: true,
position: 'outer',
formatter: `占比：{d}%`,
fontSize: 14,
color: '#fff'
},
labelLine: {
show: true
}
}
}
}
],
color: ['#d20962', new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
])],
tooltip: {
show: true,
trigger: 'item',
formatter: '统计情况
{b}：{c}
占比：{d}%'
}
}
export const contract = {
title: {
show: true,
text: '合同履约率',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '600'
},
textAlign: 'center',
left: '50%',
top: '20px'
},
legend: {
orient: 'horizontal',
show: true,
left: 'center',
bottom: 10,
z: 3,
itemWidth: 25,
itemHeight: 14,
itemGap: 10,
data: [
{
name: '未履约',
textStyle: {
color: '#d20962'
}
},
{
name: '已履约',
textStyle: {
color: '#188df0'
}
}
]
},
series: [
{
name: '任务完成情况',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{
name: '未履约',
value: 0
},
{
name: '已履约',
value: 100
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
label: {
show: true,
position: 'outer',
formatter: `占比：{d}%`,
fontSize: 14,
color: '#fff'
},
labelLine: {
show: true
}
}
}
}
],
color: ['#d20962', new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
])],
tooltip: {
show: true,
trigger: 'item',
formatter: '统计情况
{b}：{c}
占比：{d}%'
}
}