|
|
@@ -517,7 +517,7 @@
|
|
|
yData.splice(0, 1);
|
|
|
rows.forEach((item,index) => {
|
|
|
baseRows.push(item)
|
|
|
- yData.push(dataSourceThree.browseList[index]);
|
|
|
+ yData.push(yData[index]);
|
|
|
console.log(item,dataSourceThree.browseList[index])
|
|
|
});
|
|
|
console.log("dataSourceThree.browseList",yData)
|
|
|
@@ -547,7 +547,7 @@
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
- }, 3000);
|
|
|
+ }, 1000);
|
|
|
|
|
|
if (option) {
|
|
|
myChart.setOption(option);
|
|
|
@@ -850,6 +850,202 @@
|
|
|
if (10018 == JSON.parse(res).code) {
|
|
|
message = JSON.parse(res).data
|
|
|
console.log("message",message)
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ var myChart = echarts.init(document.getElementById("chart-panel3"));
|
|
|
+ console.log("message",message)
|
|
|
+ function getPageList(arrays, pageNum, pageSize) {
|
|
|
+ //计算分页页数
|
|
|
+ pageNum = pageNum - 1;
|
|
|
+ const dataList = [];
|
|
|
+ const pageRows = arrays.length;
|
|
|
+ const pageTotal = (pageRows + pageSize - 1) / pageSize;
|
|
|
+ //循环判断值
|
|
|
+ let startIndex = pageNum <= 0 ? 0 : pageNum * pageSize;
|
|
|
+ let endIndex =
|
|
|
+ (pageNum + 1) * pageSize > pageRows
|
|
|
+ ? pageRows
|
|
|
+ : (pageNum + 1) * pageSize;
|
|
|
+ if (startIndex > pageRows) return dataList;
|
|
|
+ for (startIndex; startIndex < endIndex; startIndex++) {
|
|
|
+ dataList.push(arrays[startIndex]);
|
|
|
+ }
|
|
|
+ return dataList;
|
|
|
+ }
|
|
|
+
|
|
|
+ let yLabel = message.columnRankingList;
|
|
|
+ var pageNum = 1,
|
|
|
+ pageSize = 10;
|
|
|
+ var baseRows = getPageList(yLabel, pageNum, pageSize);
|
|
|
+ console.log("baseRows",baseRows)
|
|
|
+ let yData = [];
|
|
|
+ baseRows.forEach((item,index) => {
|
|
|
+ // baseRows.push(item)
|
|
|
+ yData.push(message.browseList[index]);
|
|
|
+ });
|
|
|
+ let bgData = [];
|
|
|
+ for (let i in yData) {
|
|
|
+ bgData.push(400);
|
|
|
+ }
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ grid: {
|
|
|
+ left: "5%",
|
|
|
+ right: "5%",
|
|
|
+ bottom: "5%",
|
|
|
+ top: "5%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "none",
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ return (
|
|
|
+ params[0].name +
|
|
|
+ "<br/>" +
|
|
|
+ "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
|
|
+ params[0].seriesName +
|
|
|
+ " : " +
|
|
|
+ params[0].value +
|
|
|
+ " <br/>"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ show: false,
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ inverse: true,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ margin: 15,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: baseRows,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ inverse: true,
|
|
|
+ axisTick: "none",
|
|
|
+ axisLine: "none",
|
|
|
+ show: true,
|
|
|
+ axisLabel: {
|
|
|
+ margin: 15,
|
|
|
+ textStyle: {
|
|
|
+ color: "#9aeced",
|
|
|
+ fontSize: "15",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: yData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "人数",
|
|
|
+ type: "bar",
|
|
|
+ zlevel: 1,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: [0, 30, 30, 0],
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#52d8da",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#57dcde",
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ shadowBlur: 0,
|
|
|
+ shadowColor: "rgba(87,220,222,0.7)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ barWidth: 10,
|
|
|
+ data: yData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "背景",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 10,
|
|
|
+ barGap: "-100%",
|
|
|
+ data: bgData,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "rgba(29,38,106,0.3)",
|
|
|
+ barBorderRadius: [0, 30, 30, 0],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ setInterval(() => {
|
|
|
+ pageNum++;
|
|
|
+ var rows = getPageList(yLabel, pageSize + pageNum, 1);
|
|
|
+ if (rows.length == 0) {
|
|
|
+ pageSize = 0;
|
|
|
+ pageNum = 0;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //原始数组
|
|
|
+ baseRows.splice(0, 1);
|
|
|
+ // baseRows.push(...rows);
|
|
|
+ //原始数组y刻度值
|
|
|
+ yData.splice(0, 1);
|
|
|
+ rows.forEach((item,index) => {
|
|
|
+ baseRows.push(item)
|
|
|
+ yData.push(yData[index]);
|
|
|
+ console.log(item,message.browseList[index])
|
|
|
+ });
|
|
|
+ console.log("dataSourceThree.browseList",yData)
|
|
|
+ //x轴
|
|
|
+ bgData.splice(0, 1);
|
|
|
+ rows.forEach((item) => {
|
|
|
+ bgData.push(400);
|
|
|
+ });
|
|
|
+
|
|
|
+ myChart.setOption({
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ data: baseRows,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: yData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "人数",
|
|
|
+ data: yData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "背景",
|
|
|
+ data: bgData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ if (option) {
|
|
|
+ myChart.clear()
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
}
|
|
|
if (10019 == JSON.parse(res).code) {
|
|
|
message = JSON.parse(res).data
|
bihuisong