init(obj, pageSource) {
var that = this
console.log(obj, pageSource)
this.chart = this.$echarts.init(document.getElementById(this.id))
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
animation: false
},
backgroundColor: "#5B596080",
borderWidth: "0",
textStyle: {
color: "white" //设置文字颜色
},
formatter: function (params) {
// console.log(params)
let scatterList = [],
lineList = [],
allList = []
params.forEach((item) => {
if (item.seriesType == "line") {
lineList.push(item)
}
if (item.seriesType == "scatter") {
scatterList.push(item)
}
})
if (
scatterList.length > 0 &&
(scatterList[0].data[2] > 0 ||
scatterList[1].data[2] > 0 ||
scatterList[2].data[2] > 0)
) {
lineList = lineList.concat([
{ seriesType: "interval", name: "事件" }
])
}
allList = lineList.concat(scatterList)
var result = ""
result +=
params[0].name +
"<br/>" +
'<div style="height:30px;line-height:30px;font-size:12px;font-weight:300">' +
"数据" +
"</div>"
allList.forEach((item) => {
if (item.seriesType == "line") {
result +=
'<div style="width:257px;display:flex;justify-content: space-between;padding-right:50px;font-size:12px;font-weight:300">' +
"<span>" +
item.marker +
item.seriesName +
"</span>" +
'<p style="display:inline-block;text-align:right;">' +
(item.value > 10000
? (item.value - (item.value % 1000)) / 10000 + "w"
: item.value) +
"</p></div>"
}
if (item.seriesType == "interval") {
result +=
'<div style="height:30px;line-height:30px;font-size:12px;font-weight:300">' +
item.name +
"</div>"
}
if (item.seriesType == "scatter" && item.data[3]) {
result +=
'<div style="width:257px;display:flex;align-item:center;font-size:12px;font-weight:300">' +
'<span style="display:inline-block;">' +
item.marker +
item.seriesName +
" : </span>" +
'<span style="display:inline-block;width:180px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;line-height:20px">' +
item.data[3] +
"</span></div>"
}
if (pageSource == "realTimeScreen") {
if (item.seriesName == "讲解" && item.data[4]) {
that.$emit("emitChanges", 0)
} else if (item.seriesName == "福袋" && item.data[4]) {
that.$emit("emitChanges", 1)
}
}
})
return result
}
},
legend: {
data: obj.legend,
top: 20,
left: 20,
itemGap: 5,
itemWidth: 5,
itemGap: 20,
textStyle: {
color: "#E0E0E0",
fontSize: "13"
}
},
axisPointer: {
link: [
{
xAxisIndex: "all"
}
]
},
grid: [
{
left: 60,
right: 20,
height: "60%",
top: "15%"
},
{
left: 60,
right: 20,
top: "80%",
height: "20%"
}
],
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: { onZero: true },
data: obj.timeData,
axisLabel: {
textStyle: {
color: "#ffffff"
}
}
},
{
show: false,
gridIndex: 1,
type: "category",
boundaryGap: false,
axisLine: { onZero: true },
data: obj.timeData,
position: "top"
}
],
yAxis: [
{
type: "value",
name: "数量",
nameTextStyle: {
//y轴上方单位的颜色
color: "#fff",
padding: [0, 0, 5, -46]
},
splitLine: {
show: true,
lineStyle: {
color: "#3c3a44"
}
},
axisLabel: {
textStyle: {
color: "#ffffff"
}
}
},
{
gridIndex: 1,
// name: 'Rainfall(mm)',
// type: 'value',
offset: 5,
inverse: true,
data: ["讲解", "福袋", "预警"],
axisLine: {
show: false //不显示坐标轴线
},
axisTick: {
show: false //不显示坐标轴刻度线
},
splitLine: {
lineStyle: {
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 20,
shadowColor: "#ffffff32", //默认透明
color: "#2F2D36",
type: "dashed" //虚线
},
show: true //隐藏
},
axisLabel: {
textStyle: {
color: "#ffffff"
}
}
}
],
series: [
{
name: "成交金额",
type: "line",
symbolSize: 3, //标记的大小
symbol: "circle",
showSymbol: false,
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(134, 83, 213,1)"
},
{
offset: 0.6,
color: "rgba(152, 122, 243,0.1)"
}
],
false
)
}
},
smooth: true,
itemStyle: {
normal: {
color: "rgb(134, 83, 213)",
areaStyle: { type: "default" }
}
},
data: obj.payAmtData
},
{
name: "在线人数",
type: "line",
symbolSize: 3, //标记的大小
symbol: "circle",
showSymbol: false,
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(41, 161, 255,1)"
},
{
offset: 0.6,
color: "rgba(25, 104, 255,0.1)"
}
],
false
)
}
},
smooth: true,
itemStyle: {
normal: {
color: "rgb(41, 161, 255)",
areaStyle: { type: "default" }
}
},
data: obj.onlineUserCntData
},
{
name: "进入人数",
type: "line",
symbolSize: 3, //标记的大小
symbol: "circle",
showSymbol: false,
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(134, 82, 213,1)"
},
{
offset: 0.6,
color: "rgba(152, 122, 243,0.1)"
}
],
false
)
}
},
smooth: true,
itemStyle: {
normal: {
color: "rgb(134, 82, 213)",
areaStyle: { type: "default" }
}
},
data: obj.watchUcntData
},
{
name: "离开人数",
type: "line",
symbolSize: 3, //标记的大小
symbol: "circle",
showSymbol: false,
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(141, 141, 187,1)"
},
{
offset: 0.6,
color: "rgba(176, 176, 235,0.1)"
}
],
false
)
}
},
smooth: true,
itemStyle: {
normal: {
color: "rgb(141, 141, 187)",
areaStyle: { type: "default" }
}
},
data: obj.leaveUcntData
},
{
name: "新增粉丝数",
type: "line",
symbolSize: 3, //标记的大小
symbol: "circle",
showSymbol: false,
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(203, 78, 105, 1)"
},
{
offset: 0.6,
color: "rgba(223, 112, 116, 0.1)"
}
],
false
)
}
},
smooth: true,
itemStyle: {
normal: {
color: "rgb(203, 78, 105)",
areaStyle: { type: "default" }
}
},
data: obj.incrFansCntData
},
{
name: "讲解",
type: "scatter",
xAxisIndex: 1,
yAxisIndex: 1,
symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: function (data) {
return Math.sqrt(data[2]) * 1
},
itemStyle: {
normal: {
color: "#8A5BDA"
}
},
data: obj.productData
},
{
name: "福袋",
type: "scatter",
xAxisIndex: 1,
yAxisIndex: 1,
symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: function (data) {
return Math.sqrt(data[2]) * 1
},
itemStyle: {
normal: {
color: "#EA5766"
}
},
data: obj.blessData
},
{
name: "预警",
type: "scatter",
xAxisIndex: 1,
yAxisIndex: 1,
symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: function (data) {
return Math.sqrt(data[2]) * 1
},
itemStyle: {
normal: {
color: "#458FB7"
}
},
data: obj.warnData
}
]
}
this.chart.setOption(option)
}
数据格式: