|
@@ -41,9 +41,8 @@
|
|
:width="client.width"
|
|
:width="client.width"
|
|
:height="client.height"
|
|
:height="client.height"
|
|
></canvas>
|
|
></canvas>
|
|
- <div v-if="region.length" class="title">观众地域分布</div>
|
|
|
|
|
|
+ <div class="title">观众地域分布</div>
|
|
<canvas
|
|
<canvas
|
|
- v-if="region.length"
|
|
|
|
id="audienceRegion"
|
|
id="audienceRegion"
|
|
class="canvas"
|
|
class="canvas"
|
|
:width="client.width"
|
|
:width="client.width"
|
|
@@ -90,6 +89,7 @@ import { getlive } from "@/api/getList.js";
|
|
import filters from "@/utils/filters/index";
|
|
import filters from "@/utils/filters/index";
|
|
import F2 from "@antv/f2/lib/index-all";
|
|
import F2 from "@antv/f2/lib/index-all";
|
|
import DataSet from "@antv/data-set";
|
|
import DataSet from "@antv/data-set";
|
|
|
|
+import mapJSON from "./mapJSON.js";
|
|
export default {
|
|
export default {
|
|
components: {},
|
|
components: {},
|
|
props: {
|
|
props: {
|
|
@@ -104,6 +104,7 @@ export default {
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ colors: {},
|
|
initCanvas: {
|
|
initCanvas: {
|
|
audienceSex: undefined,
|
|
audienceSex: undefined,
|
|
account: undefined,
|
|
account: undefined,
|
|
@@ -114,7 +115,6 @@ export default {
|
|
height: 0,
|
|
height: 0,
|
|
},
|
|
},
|
|
gender: [],
|
|
gender: [],
|
|
- region: [],
|
|
|
|
RealTimeTraffic: { title: "实时流量", peopleList: [] },
|
|
RealTimeTraffic: { title: "实时流量", peopleList: [] },
|
|
RealTimePersonTime: { title: "观看人次", peopleList: [] },
|
|
RealTimePersonTime: { title: "观看人次", peopleList: [] },
|
|
LikeTheTrend: { title: "点赞走势", peopleList: [] },
|
|
LikeTheTrend: { title: "点赞走势", peopleList: [] },
|
|
@@ -133,7 +133,6 @@ export default {
|
|
season: this.season,
|
|
season: this.season,
|
|
}).then(res => {
|
|
}).then(res => {
|
|
let oriData = res || {};
|
|
let oriData = res || {};
|
|
- let region = [];
|
|
|
|
let trend = oriData.trend || {};
|
|
let trend = oriData.trend || {};
|
|
let RealTimeTraffic = {
|
|
let RealTimeTraffic = {
|
|
title: "实时流量",
|
|
title: "实时流量",
|
|
@@ -185,11 +184,13 @@ export default {
|
|
let city = oriData.city || [];
|
|
let city = oriData.city || [];
|
|
for (let i = 0; i < city.length; i++) {
|
|
for (let i = 0; i < city.length; i++) {
|
|
const element = city[i] || {};
|
|
const element = city[i] || {};
|
|
- region.push({
|
|
|
|
- name: element.key || "",
|
|
|
|
- code: 12000,
|
|
|
|
- value: ((element.rate || 0) * 100).toFixed(2) - 0,
|
|
|
|
- });
|
|
|
|
|
|
+ for (let o = 0; o < mapJSON.features.length; o++) {
|
|
|
|
+ const item = mapJSON.features[o];
|
|
|
|
+ if (item.properties.name === element.key) {
|
|
|
|
+ item.properties.value = element.count;
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
// 性别比
|
|
// 性别比
|
|
let gender = [];
|
|
let gender = [];
|
|
@@ -203,7 +204,6 @@ export default {
|
|
});
|
|
});
|
|
}
|
|
}
|
|
this.gender = gender;
|
|
this.gender = gender;
|
|
- this.region = region;
|
|
|
|
this.RealTimeTraffic = RealTimeTraffic;
|
|
this.RealTimeTraffic = RealTimeTraffic;
|
|
this.RealTimePersonTime = RealTimePersonTime;
|
|
this.RealTimePersonTime = RealTimePersonTime;
|
|
this.LikeTheTrend = LikeTheTrend;
|
|
this.LikeTheTrend = LikeTheTrend;
|
|
@@ -215,7 +215,7 @@ export default {
|
|
this.line(RealTimePersonTime.peopleList, "RealTimePersonTime");
|
|
this.line(RealTimePersonTime.peopleList, "RealTimePersonTime");
|
|
LikeTheTrend.peopleList.length &&
|
|
LikeTheTrend.peopleList.length &&
|
|
this.line(LikeTheTrend.peopleList, "LikeTheTrend");
|
|
this.line(LikeTheTrend.peopleList, "LikeTheTrend");
|
|
- region.length && this.map();
|
|
|
|
|
|
+ this.map();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
},
|
|
},
|
|
@@ -240,7 +240,6 @@ export default {
|
|
chart.legend(false);
|
|
chart.legend(false);
|
|
chart.axis(false);
|
|
chart.axis(false);
|
|
// 添加饼图文本
|
|
// 添加饼图文本
|
|
- console.log(list);
|
|
|
|
chart.pieLabel({
|
|
chart.pieLabel({
|
|
sidePadding: 40,
|
|
sidePadding: 40,
|
|
label1: function label1(data, color) {
|
|
label1: function label1(data, color) {
|
|
@@ -329,30 +328,47 @@ export default {
|
|
chart.render();
|
|
chart.render();
|
|
},
|
|
},
|
|
map() {
|
|
map() {
|
|
- fetch(
|
|
|
|
- "https://gw.alipayobjects.com/os/antvdemo/assets/data/china-provinces.geo.json"
|
|
|
|
- )
|
|
|
|
- .then(res => res.json())
|
|
|
|
- .then(GeoJSON => {
|
|
|
|
- const geoDv = new DataSet.View().source(GeoJSON, {
|
|
|
|
- type: "GeoJSON",
|
|
|
|
- });
|
|
|
|
- console.log(geoDv.rows);
|
|
|
|
- const chart = new F2.Chart({
|
|
|
|
- id: "audienceRegion",
|
|
|
|
- pixelRatio: window.devicePixelRatio,
|
|
|
|
- });
|
|
|
|
- chart.legend(false);
|
|
|
|
- chart.axis(false);
|
|
|
|
- chart.tooltip(false);
|
|
|
|
- chart.source(geoDv.rows);
|
|
|
|
- chart
|
|
|
|
- .polygon()
|
|
|
|
- .position("longitude*latitude")
|
|
|
|
- .color("rgba(0,0,0,.5)");
|
|
|
|
-
|
|
|
|
- chart.render();
|
|
|
|
|
|
+ const geoDv = new DataSet.View().source(mapJSON, {
|
|
|
|
+ type: "GeoJSON",
|
|
|
|
+ });
|
|
|
|
+ const chart = new F2.Chart({
|
|
|
|
+ id: "audienceRegion",
|
|
|
|
+ pixelRatio: window.devicePixelRatio,
|
|
|
|
+ });
|
|
|
|
+ chart.legend(false);
|
|
|
|
+ chart.axis(false);
|
|
|
|
+ chart.tooltip({
|
|
|
|
+ custom: true,
|
|
|
|
+ showCrosshairs: false,
|
|
|
|
+ onChange: function onChange(ev) {
|
|
|
|
+ const items = ev.items;
|
|
|
|
+ items[0].name = items[0].title;
|
|
|
|
+ console.log(ev)
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+ for (let i = 0; i < geoDv.rows.length; i++) {
|
|
|
|
+ const element = geoDv.rows[i];
|
|
|
|
+ element.value = element.properties.value;
|
|
|
|
+ }
|
|
|
|
+ chart.source(geoDv.rows);
|
|
|
|
+ chart
|
|
|
|
+ .polygon()
|
|
|
|
+ .position("longitude*latitude")
|
|
|
|
+ .color("value", cValue => {
|
|
|
|
+ if (this.colors[cValue]) return this.colors[cValue];
|
|
|
|
+ let c = ["8", "9", "a", "b", "c", "d"];
|
|
|
|
+ let color = "#";
|
|
|
|
+ if (cValue == 0) {
|
|
|
|
+ color = "rgba(0,0,0,.1)";
|
|
|
|
+ } else
|
|
|
|
+ for (let i = 0; i < 6; i++) {
|
|
|
|
+ let len = Math.floor(Math.random() * c.length);
|
|
|
|
+ color += c[len];
|
|
|
|
+ }
|
|
|
|
+ this.colors[cValue] = color;
|
|
|
|
+ return color;
|
|
});
|
|
});
|
|
|
|
+ chart.render();
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
};
|