'
params.forEach(function (v, n) {
if (v.seriesName != '上部1') {
str +=
'
' +
v.seriesName +
'：' +
v.value + '
'
}
})
return str;
}
}
const legend = {
data: dataArr.result.map(item => item.name),
textStyle: { fontSize: 14, color: '#fff' },
itemWidth: 25,
itemHeight: 15,
itemGap: 15,
// top: '5%',
// 禁止点击
selectedMode: false,
}
// grid
const grid = {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
tooltip: {
textStyle: {
color: '#fff'
}
}
}
// xAxis
const xAxis = {
axisTick: { show: true },
axisLine: {
show: true,
lineStyle: {
color: "#525fa6"
}
},
axisLabel: { textStyle: { fontSize: 16, color: '#fff' }, },
data: dataArr.xdata
}
// yAxis
const yAxis = [{
boundaryGap: false,
type: "value",
// scale:true,
axisLabel: {
textStyle: {
color: "#f4f4f8"
}
},
nameTextStyle: {
color: "#fff",
fontSize: 12,
lineHeight: 40
},
splitLine: {
show: true,
lineStyle: {
color: "#516cb8",
type: "dashed"
}
}
}]
// 渲染
option = {
tooltip, xAxis, yAxis, series, grid, legend
}
traffic3.setOption(option)
}
function getS(dataArr) {
let traffic3 = echarts.init(document.getElementById('heji'));
// 头部菱形
const diamondData = dataArr.result.reduce((pre, cur, index) => {
pre[index] = cur.data.map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
return pre
}, [])
// color
const color = [
[{ offset: 0, color: "#efff37", }, { offset: 0.5, color: "#efff37", }, { offset: 0.5, color: "#d5e700", }, { offset: 1, color: "#d5e700", }],
[{ offset: 0, color: "#f67c20", }, { offset: 0.5, color: "#f67c20", }, { offset: 0.5, color: "#cc681e", }, { offset: 1, color: "#cc681e", }],
[{ offset: 0, color: "#32ffee", }, { offset: 0.5, color: "#32ffee", }, { offset: 0.5, color: "#00e8d5", }, { offset: 1, color: "#00e8d5", }],
[{ offset: 0, color: "#dc0707", }, { offset: 0.5, color: "#dc0707", }, { offset: 0.5, color: "#af0808", }, { offset: 1, color: "#af0808", }],
]
// series
let series = dataArr.result.reduce((p, c, i, array) => {
p.push({
z: i + 1,
stack: '总量',
type: 'bar',
name: c.name,
barGap: '-100%',
barWidth: 30,
data: c.data,
itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
}, {
z: i + 10,
type: 'pictorialBar',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: [30, 10],
data: diamondData[i],
itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
tooltip: { show: false },
})
// 是否最后一个了？
if (p.length === (array.length) * 2) {
p.push({
z: array.length * 2,
type: "pictorialBar",
symbolPosition: "start",
data: dataArr.result[0].data,
symbol: "diamond",
symbolOffset: ["0%", "50%"],
symbolSize: [30, 10],
itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[0] } },
tooltip: { show: false },
})
return p
}
return p
}, [])
// tooltip
const tooltip = {
trigger: 'axis',
axisPointer: {
show: true,
type: 'line',
lineStyle: {
type: 'dashed'
}
},
textStyle: {
color: '#ffe400',
fontSize: '14'
},
backgroundColor: 'rgba(250,250,250,0)',
formatter: function (params) {
let str = '
'
params.forEach(function (v, n) {
if (v.seriesName != '上部1') {
str +=
'
' +
v.seriesName +
'：' +
v.value + '
'
}
})
return str;
}
}
// grid
const grid = {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
tooltip: {
textStyle: {
color: '#fff'
}
}
}
// xAxis
const xAxis = {
axisTick: { show: true },
axisLine: {
show: true,
lineStyle: {
color: "#525fa6"
}
},
axisLabel: { textStyle: { fontSize: 16, color: '#fff' }, },
data: dataArr.xdata
}
// yAxis
const yAxis = [{
boundaryGap: false,
type: "value",
// scale:true,
axisLabel: {
textStyle: {
color: "#f4f4f8"
}
},
nameTextStyle: {
color: "#fff",
fontSize: 12,
lineHeight: 40
},
splitLine: {
show: true,
lineStyle: {
color: "#516cb8",
type: "dashed"
}
}
}]
// 渲染
option = {
tooltip, xAxis, yAxis, series, grid
}
traffic3.setOption(option)
}
//坐席监控
//实时话务统计
function getRealTimeTraffi(hours, hrCount, hcCount) {
let realTimeTraffi = echarts.init(document.getElementById('realTimeTraffi'));
option = {
grid: {
top: '20%',
bottom: '20%'
},
legend: {
data: ['呼入', '呼出'],
textStyle: {
color: '#fff',
fontSize: 14,
padding: [0, 5]
},
right: 25,
top: -5
},
tooltip: {
trigger: 'axis',
axisPointer: {
show: true,
type: 'line',
lineStyle: {
type: 'dashed'
}
},
textStyle: {
color: '#fff',
fontSize: 16,
fontWeight: '600',
},
backgroundColor: 'rgba(250,250,250,0)',
formatter: function (params) {
let str = '
'
params.forEach(function (v, n) {
// if(v.seriesName!='上部1'){
str +=
'
' +
v.seriesName +
'：' +
v.value + '
'
// }
})
return str;
}
},
xAxis: [{
type: "category",
boundaryGap: false,
scale: true,
axisLabel: {
formatter: '{value}',
fontSize: 13,
margin: 10,
textStyle: {
color: "#f4f4f8"
}
},
axisLine: {
show: true,
lineStyle: {
color: "#849cc9"
}
},
splitLine: {
show: false,
lineStyle: {
color: "#849cc9"
}
},
axisTick: {
show: false
},
data: hours
}],
yAxis: [{
boundaryGap: false,
type: "value",
// scale:true,
axisLabel: {
textStyle: {
color: "#f4f4f8"
}
},
nameTextStyle: {
color: "#fff",
fontSize: 12,
lineHeight: 40
},
splitLine: {
show: true,
lineStyle: {
color: "#849cc9",
type: "dashed"
}
},
axisLine: {
lineStyle: {
color: "#849cc9",
width: 1,
type: "solid"
},
show: true,
// "symbol":['none', 'arrow'],
symbol: ['none',
'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3, 20'
],
symbolOffset: 5,
symbolSize: [35, 38],
},
}],
series: [{
name: "呼入",
type: "line",
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 4,
zlevel: 3,
itemStyle: {
color: '#08fcff'
},
lineStyle: {
normal: {
width: 2,
color: "#01cde6",
}
},
// label: {
// show: true,
// position: 'top',
// color: '#fff',
// fontSize: 14,
// fontWeight: '600',
// formatter: function (params) {
// console.log(params)
// return params.seriesName + '：' + params.value
// }
// },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: "#0571ae"
},
{
offset: 0.8,
color: "#093085"
}
],
false
),
}
},
emphasis: {
itemStyle: {
color: '#fff',
shadowBlur: 10,
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowColor: 'rgb(250,250, 250)'
}
},
data: hrCount
}, {
name: "呼出",
type: "line",
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 4,
zlevel: 3,
itemStyle: {
color: '#ffe000'
},
// label: {
// show: true,
// position: 'top',
// color: '#fff',
// fontSize: 14,
// fontWeight: '600',
// formatter: function (params) {
// return params.seriesName + '：' + params.value
// }
// },
lineStyle: {
normal: {
width: 2,
color: "#ffd200",
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: "#626a55"
},
{
offset: 0.8,
color: "#093085"
}
],
false
),
}
},
emphasis: {
itemStyle: {
color: '#fff',
shadowBlur: 10,
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowColor: 'rgb(250,250, 250)'
}
},
data: hcCount
}]
};
realTimeTraffi.setOption(option);
}
' + row
.trend.substring(1) + '
' + row
.trend + '