如图所示:
2.js 代码:
let data1 = [];
let dataTitle = [];
let ser1 = [];
res.data.data.sort(this.sortId).splice(0, 1);
res.data.data = [
{
showTime: "2021-08-21 01:00:00",
showname: "微博1",
todayComments: 0,
totalComments: 12,
},
{
showTime: "2021-08-21 02:00:00",
showname: "微博2",
todayComments: 0,
totalComments: 4,
},
{
showTime: "2021-08-21 03:00:00",
showname: "微博3",
todayComments: 0,
totalComments: 3,
}, {
showTime: "2021-08-21 02:00:00",
showname: "微博1",
todayComments: 0,
totalComments: 2,
},
{
showTime: "2021-08-21 03:00:00",
showname: "微博2",
todayComments: 0,
totalComments: 6,
},
{
showTime: "2021-08-21 08:00:00",
showname: "微博4",
todayComments: 0,
totalComments: 14,
}
];
res.data.data.forEach((item) => {
if (data1.indexOf(item.showTime.split(" ")[1].split(":")[0]) < 0) {
data1.push(item.showTime.split(" ")[1].split(":")[0]);
}
dataTitle.push(item.showname);
let serB = {
name: item.showname,
type: "bar",
symbol: "none",
stack: "正",
itemStyle: {
//color: this.myColor[Math.random()*this.myColor.length-1],
},
barWidth: 6,
data: [],
};
serB.data[data1.indexOf(item.showTime.split(" ")[1].split(":")[0])] =
item.totalComments;
if (ser1.find((v) => v.name == item.showname) == undefined) {
ser1.push(serB);
}else{
ser1.find(v=>v.name == item.showname).data[data1.indexOf(item.showTime.split(" ")[1].split(":")[0])] =item.totalComments
}
});
this.data1 = data1;
this.dataTitle = dataTitle;
this.series1 = ser1;
// this.topicProgressList = res.data.data
// for(let i in this.topicProgressList){
// this.topicProgressTime.push(this.topicProgressList[i].showTime)
// this.topicProgressName.push(this.topicProgressList[i].showname)
// }
this.topicProgressEcharts();
3.echarts 代码:
//事件进展曲线
topicProgressEcharts() {
let myChart = echarts.init(
document.getElementById("topicProgressEcharts")
);
let option = {
grid: {
left: 16,
right: "1%",
bottom: 10,
containLabel: true,
},
legend: [
{
icon: "circle",
left: "25%",
align: "left",
top: "1%",
itemWidth: 7, // 设置宽度class
itemHeight: 7, // 设置高度im
itemGap: 40, // 设置间距im
textStyle: {
color: "#AAAAAA",
},
data: this.dataTitle,
},
],
xAxis: {
type: "category",
data: this.data1,
borderColor: "#D8D8D8",
axisLine: {
lineStyle: {
color: "#D8D8D8",
},
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
axisLine: {
lineStyle: {
color: "#CCCCCC",
fontSize: 12,
},
},
splitLine: {
lineStyle: {
color: "#E5E5E5",
type: "dashed",
},
},
},
series: this.series1,
};
myChart.setOption(option);
}
vue数据返回:
在vue 的data方法中 新增属性 data1 dataTitle ser1;