<!--
* @Author: your name
* @Date: 2022-04-21 09:47:01
* @LastEditTime: 2022-04-24 09:29:53
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/CharBoxE.vue
-->
<template>
<div class="chars-wrapper">
<Chars ref="chars" :options="options" />
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
import Infowindow from "./Infowindow";
import { pingshanArr } from "@/utils/echarsMap/pingshan";
import axios from "axios";
const data = [
{
name: "古月镇",
index: 0,
a: 1,
b: 1,
c: 1,
d: 1,
e: 1,
f: 1,
g: "1/2",
h: "1/2",
i: "1/2",
},
{
name: "西柏坡镇",
index: 1,
a: 2,
b: 2,
c: 2,
d: 2,
e: 2,
f: 2,
g: "2/3",
h: "2/3",
i: "2/3",
},
{
name: "温塘镇",
index: 2,
a: 3,
b: 3,
c: 3,
d: 3,
e: 3,
f: 3,
g: "3/4",
h: "3/4",
i: "3/4",
},
{
name: "平山镇",
index: 3,
a: 4,
b: 4,
c: 4,
d: 4,
e: 4,
f: 4,
g: "4/5",
h: "4/5",
i: "4/5",
},
{
name: "东回舍镇",
index: 4,
a: 5,
b: 5,
c: 5,
d: 5,
e: 5,
f: 5,
g: "5/6",
h: "5/6",
i: "5/6",
},
{
name: "西大吴乡",
index: 5,
a: 6,
b: 6,
c: 6,
d: 6,
e: 6,
f: 6,
g: "6/7",
h: "6/7",
i: "6/7",
},
{
name: "岗南镇",
index: 6,
a: 7,
b: 7,
c: 7,
d: 7,
e: 7,
f: 7,
g: "7/8",
h: "7/8",
i: "7/8",
},
{
name: "杨家桥乡",
index: 7,
a: 8,
b: 8,
c: 8,
d: 8,
e: 8,
f: 8,
g: "8/9",
h: "8/9",
i: "8/9",
},
{
name: "下口镇",
index: 8,
a: 9,
b: 9,
c: 9,
d: 9,
e: 9,
f: 9,
g: "9/10",
h: "9/10",
i: "9/10",
},
{
name: "北冶乡",
index: 9,
a: 10,
b: 10,
c: 10,
d: 10,
e: 10,
f: 10,
g: "10/11",
h: "10/11",
i: "10/11",
},
{
name: "小觉镇",
index: 10,
a: 11,
b: 11,
c: 11,
d: 11,
e: 11,
f: 11,
g: "11/12",
h: "11/12",
i: "11/12",
},
{
name: "下槐镇",
index: 11,
a: 12,
b: 12,
c: 12,
d: 12,
e: 12,
f: 12,
g: "12/13",
h: "12/13",
i: "12/13",
},
{
name: "上三汲乡",
index: 12,
a: 13,
b: 13,
c: 13,
d: 13,
e: 13,
f: 13,
g: "13/14",
h: "13/14",
i: "13/14",
},
{
name: "两河乡",
index: 13,
a: 14,
b: 14,
c: 14,
d: 14,
e: 14,
f: 14,
g: "14/15",
h: "14/15",
i: "14/15",
},
{
name: "南甸镇",
index: 14,
a: 15,
b: 15,
c: 15,
d: 15,
e: 15,
f: 15,
g: "15/16",
h: "15/16",
i: "15/16",
},
{
name: "东王坡乡",
index: 15,
a: 16,
b: 16,
c: 16,
d: 16,
e: 16,
f: 16,
g: "16/17",
h: "16/17",
i: "16/17",
},
{
name: "苏家庄乡",
index: 16,
a: 17,
b: 17,
c: 17,
d: 17,
e: 17,
f: 17,
g: "17/18",
h: "17/18",
i: "17/18",
},
{
name: "合河口乡",
index: 17,
a: 18,
b: 18,
c: 18,
d: 18,
e: 18,
f: 18,
g: "18/19",
h: "18/19",
i: "18/19",
},
{
name: "蛟潭庄镇",
index: 18,
a: 19,
b: 19,
c: 19,
d: 19,
e: 19,
f: 19,
g: "19/20",
h: "19/20",
i: "19/20",
},
{
name: "上观音堂乡",
index: 19,
a: 20,
b: 20,
c: 20,
d: 20,
e: 20,
f: 20,
g: "20/21",
h: "20/21",
i: "20/21",
},
{
name: "营里乡",
index: 20,
a: 21,
b: 21,
c: 21,
d: 21,
e: 21,
f: 21,
g: "21/22",
h: "21/22",
i: "21/22",
},
{
name: "孟家庄乡",
index: 21,
a: 22,
b: 22,
c: 22,
d: 22,
e: 22,
f: 22,
g: "22/23",
h: "22/23",
i: "22/23",
},
{
name: "宅北乡",
index: 22,
a: 23,
b: 23,
c: 23,
d: 23,
e: 23,
f: 23,
g: "23/24",
h: "23/24",
i: "23/24",
},
];
export default {
name: "",
components: {
Chars,
},
data() {
return {
options: {},
};
},
mounted() {
this.getPath();
this.$refs.chars.myChats.on("mousedown", () => {
// this.closeToolTip();
});
this.$refs.chars.myChats.on("georoam", () => {
// this.closeToolTip();
});
},
methods: {
async getPath() {
// const res = await axios(
// "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/HK.json"
// );
const geoJson = { features: pingshanArr, type: "FeatureCollection" };
console.log(geoJson);
this.$echarts.registerMap("HK", geoJson);
this.options = {
roam: true,
tooltip: {
trigger: "item",
triggerOn: "click",
enterable: true,
// alwaysShowContent: true,
// transitionDuration:0,
formatter: (p) => {
console.log("p", p);
const dom = this.createDom(p.data, this);
return dom;
},
borderWidth: 0,
padding: 0,
className: "echarts-tooltip",
},
series: [
{
name: "香港18区人口密度",
type: "map",
map: "HK",
label: {
show: true,
color: "#fff",
fontSize: 14,
fontWeight: 700,
},
select: {
// 地图选中区域样式
label: {
// 选中区域的label(文字)样式
color: "#ffffff",
},
itemStyle: {
// 选中区域的默认样式
areaColor: "#EEC25B",
},
},
itemStyle: {
// normal: {
borderWidth: 3, //边际线大小
borderColor: "#ffffff",
//边界线颜色
areaColor: "#1A91FF", //默认区域颜色
// areaShadowColor: "rgba(0, 0, 0, 0.5)",
// areaShadowBlur: 10,
// areaShadowOffsetY:0,
// areaShadowOffsetX:0,
// },
},
emphasis: {
show: true,
itemStyle: {
areaColor: "#EEC25B", //鼠标滑过区域颜色
},
label: {
show: true,
// textStyle: {
color: "#fff",
// },
},
},
data,
// 自定义名称映射
// nameMap: {
// "Central and Western": "中西区",
// Eastern: "东区",
// Islands: "离岛",
// "Kowloon City": "九龙城",
// "Kwai Tsing": "葵青",
// "Kwun Tong": "观塘",
// North: "北区",
// "Sai Kung": "西贡",
// "Sha Tin": "沙田",
// "Sham Shui Po": "深水埗",
// Southern: "南区",
// "Tai Po": "大埔",
// "Tsuen Wan": "荃湾",
// "Tuen Mun": "屯门",
// "Wan Chai": "湾仔",
// "Wong Tai Sin": "黄大仙",
// "Yau Tsim Mong": "油尖旺",
// "Yuen Long": "元朗",
// },
},
],
};
},
createDom(data, parent) {
const Component = this.$Vue.extend(Infowindow);
const com = new Component();
// console.log(com.data=data)
return new Component({
data() {
return { data, parent };
},
}).$mount().$el;
},
closeToolTip() {
this.$refs.chars.myChats.dispatchAction({
type: "hideTip",
});
// const dom = document.getElementsByClassName('tooltip-box')[0];
// const parent =dom.parentElement;
// parent.removeChild(dom);
console.log("关闭");
},
},
};
</script>
<style lang="scss" scoped>
.chars-wrapper {
width: 100%;
height: 100%;
}
</style>