|
|
@@ -80,6 +80,7 @@
|
|
|
<div class="title">观众地域分布</div>
|
|
|
<canvas
|
|
|
id="audienceRegion"
|
|
|
+ ref="audienceRegion"
|
|
|
class="canvas"
|
|
|
:width="client.width"
|
|
|
:height="client.height"
|
|
|
@@ -135,10 +136,11 @@
|
|
|
import { getlive } from "@/api/getList.js";
|
|
|
import filters from "@/utils/filters/index";
|
|
|
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";
|
|
|
import { Dialog } from "vant";
|
|
|
import "vant/lib/dialog/style";
|
|
|
+import * as echarts from "echarts";
|
|
|
export default {
|
|
|
components: {},
|
|
|
props: {
|
|
|
@@ -237,6 +239,12 @@ export default {
|
|
|
const item = mapJSON.features[o];
|
|
|
if (item.properties.name === element.key) {
|
|
|
item.properties.value = element.count;
|
|
|
+ item.properties.name =
|
|
|
+ item.properties.name +
|
|
|
+ ":" +
|
|
|
+ ((element.rate * 100).toFixed(1) - 0) +
|
|
|
+ "%";
|
|
|
+ console.log((element.rate * 100).toFixed(1));
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
@@ -293,7 +301,7 @@ export default {
|
|
|
sidePadding: 40,
|
|
|
label1: function label1(data, color) {
|
|
|
return {
|
|
|
- text: data.name + ':' + filters.formatNum(data.percent) + "人",
|
|
|
+ text: data.name + ":" + filters.formatNum(data.percent) + "人",
|
|
|
fill: color,
|
|
|
};
|
|
|
},
|
|
|
@@ -370,61 +378,107 @@ export default {
|
|
|
chart.render();
|
|
|
},
|
|
|
map() {
|
|
|
- const geoDv = new DataSet.View().source(mapJSON, {
|
|
|
- type: "GeoJSON",
|
|
|
+ let myChart = echarts.init(this.$refs.audienceRegion);
|
|
|
+ window.onresize = myChart.resize;
|
|
|
+ echarts.registerMap("china", mapJSON);
|
|
|
+ let data = mapJSON.features.map(v => {
|
|
|
+ return {
|
|
|
+ name: v.properties.name,
|
|
|
+ value: v.properties.value,
|
|
|
+ };
|
|
|
});
|
|
|
- const chart = new F2.Chart({
|
|
|
- id: "audienceRegion",
|
|
|
- pixelRatio: window.devicePixelRatio,
|
|
|
+ data = data.sort((a, b) => {
|
|
|
+ return b.value - a.value;
|
|
|
});
|
|
|
- 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);
|
|
|
+ myChart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ triggerOn: "click",
|
|
|
+ formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
- });
|
|
|
- for (let i = 0; i < geoDv.rows.length; i++) {
|
|
|
- const element = geoDv.rows[i];
|
|
|
- element.value = element.properties.value;
|
|
|
- }
|
|
|
- chart.source(geoDv.rows);
|
|
|
- console.log(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();
|
|
|
- const canvas = chart.get("canvas");
|
|
|
- const group = canvas.addGroup();
|
|
|
- geoDv.rows.forEach(function(obj) {
|
|
|
- group.addShape("text", {
|
|
|
- attrs: {
|
|
|
- x: obj.centroidX,
|
|
|
- y: obj.centroidY,
|
|
|
- text: obj.name,
|
|
|
- textAlign: "center",
|
|
|
- fill: "#000",
|
|
|
+ visualMap: {
|
|
|
+ show: false,
|
|
|
+ min: 0,
|
|
|
+ max: data[0].value,
|
|
|
+ inRange: {
|
|
|
+ color: ["rgba(0,0,0,.0)", "yellow"],
|
|
|
},
|
|
|
- });
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "map",
|
|
|
+ mapType: "china",
|
|
|
+ geoIndex: 0,
|
|
|
+ zppm: 1.5,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: "#76acff", //每个区域的边框色
|
|
|
+ areaColor: "rgba(118,172,255, 0)", //区域背景色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data,
|
|
|
+ },
|
|
|
+ ],
|
|
|
});
|
|
|
+
|
|
|
+ // 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);
|
|
|
+ // console.log(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();
|
|
|
+ // const canvas = chart.get("canvas");
|
|
|
+ // const group = canvas.addGroup();
|
|
|
+ // geoDv.rows.forEach(function(obj) {
|
|
|
+ // group.addShape("text", {
|
|
|
+ // attrs: {
|
|
|
+ // x: obj.centroidX,
|
|
|
+ // y: obj.centroidY,
|
|
|
+ // text: obj.name,
|
|
|
+ // textAlign: "center",
|
|
|
+ // fill: "#000",
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // });
|
|
|
},
|
|
|
showDetail(key) {
|
|
|
let val = "",
|
liyongli