1

YM

2024-05-11 b576ba3501304bdbd56771dc7299e0c40e047aa4

 src/pages/character/detail.vue

@@ -1,12 +1,14 @@
<template>
  <view class="relative">
    <headNav :idIndex="1" text="中医人物数据库" />
    <headNav :idIndex="1 + ''" text="中医人物数据库" />
    <view class="Midde flex">
      <el-button class="MiddeBack flex flex-center" @click="goBack"
        >返回</el-button
      >
      <view style="width: 70%" class="flex flex-center flex-column">
        <view style="font-weight: bold; font-size: 0.2rem">李时珍</view>
        <view style="font-weight: bold; font-size: 0.2rem">{{
          detailInfo.NAME
        }}</view>
        <ul class="flex" style="line-height: 1.2; margin: 0.15rem 0">
          <li
            v-for="item in 4"
@@ -32,8 +34,7 @@
            letter-spacing: 0.03rem;
          "
        >
          李时珍(1518年-1593年)，字:
          东璧，时人谓之:李东璧。号濒湖，晚年自号濒湖山人，湖北薪州(今湖北省黄冈市薪春县薪州镇)人，汉族，生于明武宗正德十三年(公元1518年)，卒于神宗万历二十二年(公元1593年)。是中国明代与万密斋齐名的医学家、药物学家、博物学家、著述家。李时珍对道家医学的继承是多方面的，曾参考历代有关医药及其学术书籍八百余种，结合自身经验和调查研究，历时27年编成《本草纲目》一书，是我国古代药物学的总结性巨著，在国内外均有很高的评价，已有几种文字的译本或节译本，其著有《濒湖脉学》
          {{ biogData.length ? biogData[0].content : "-" }}
        </view>
        <view class="flex" style="width: 100%; margin: 0.25rem 0 0.15rem 0">
          <view>
@@ -42,6 +43,7 @@
              <img src="@/static/image/yinyong.png" alt="" />引用</el-button
            >
          </view>
          <!-- v-if="biogData.length > 1" -->
          <view
            style="font-size: 0.12rem; color: #244a7b; cursor: pointer"
            @click="ProfileClick"
@@ -80,7 +82,7 @@
              <img
                src="@/static/image/fangda.png"
                @click="fangdaClick(1)"
                style="width: 0.18rem; height: 0.18rem"
                style="width: 0.18rem; height: 0.18rem; cursor: pointer"
                alt=""
              />
            </div>
@@ -103,8 +105,7 @@
              <img
                src="@/static/image/fangda.png"
                @click="fangdaClick(2)"
                style="width: 0.18rem; height: 0.18rem"
                alt=""
                style="width: 0.18rem; height: 0.18rem; cursor: pointer"
              />
            </div>
            <view
@@ -127,8 +128,18 @@
              class="font-family"
              style="height: 300rpx; font-size: 0.12rem; line-height: 0.3rem"
            >
              <li>1.《明史·卷二百九十九·列作品. p52</li>
              <li>2.《进(本草纲目)疏》 p52</li>
              <li
                style="
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
                v-for="(item, index) in sourceDataList"
                :key="index"
                :title="item"
              >
                {{ index + 1 }}.{{ item }}
              </li>
            </ul>
          </el-card>
        </div>
@@ -156,20 +167,39 @@
          >
            <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="代表著作" data-id="1" name="representative">
                <Table1 :data="tableData" :columns="tableColumns" />
                <Table1
                  :data="tableData1"
                  :columns="tableColumns1"
                  :height="400"
                />
              </el-tab-pane>
              <el-tab-pane label="亲属关系" data-id="2" name="family ">
                亲属关系
                <Table1
                  :data="tableData2"
                  :columns="tableColumns2"
                  :height="400"
                />
              </el-tab-pane>
              <el-tab-pane label="师承关系" data-id="3" name="mentoring "
                >师承关系</el-tab-pane
              >
              <el-tab-pane label="社会关系" data-id="4" name="society"
                >社会关系</el-tab-pane
              >
              <el-tab-pane label="活动年谱" data-id="5" name="activity"
                >活动年谱</el-tab-pane
              >
                ><Table1
                  :data="tableData3"
                  :columns="tableColumns2"
                  :height="400"
              /></el-tab-pane>
              <el-tab-pane label="社会关系" data-id="4" name="society">
                <Table1
                  :data="tableData4"
                  :columns="tableColumns2"
                  :height="400"
                />
              </el-tab-pane>
              <el-tab-pane label="活动年谱" data-id="5" name="activity">
                <Table1
                  :data="tableData5"
                  :columns="tableColumns3"
                  :height="400"
                />
              </el-tab-pane>
            </el-tabs>
          </el-card>
          <el-card style="margin-bottom: 0.2rem">
@@ -185,10 +215,10 @@
            </div>
            <view class="flex">
              <el-image
                v-for="item in 4"
                v-for="item in imageList"
                :key="item"
                style="width: 2.05rem; height: 1.4rem"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                :src="item"
                fit="fill"
              ></el-image>
            </view>
@@ -241,6 +271,7 @@
      <view class="ProfileNav flex flex-center"> 个人小传 </view>
      <view style="padding: 0.44rem 0.3rem; min-height: 7.32rem">
        <view
          v-for="item in biogData"
          style="
            margin-bottom: 0.2rem;
            background-color: #f0f0f0;
@@ -251,12 +282,12 @@
          "
        >
          <view style="color: #2c2c2c">
            蕙展丁丑同里日岩额序先考月池翁著《四彭酸明》八卷，皆精指奥室，茂犀未能疯造，珍因撮粹想菜，僵撰此唐，以便智睛，服指南。世之雷病雨家，咸以服焉首务，不知派乃四能之末，谓之巧者雨。上士欲舍其全，非四不可。
            {{ item.content }}
          </view>
          <view class="flex">
            <view></view>
            <view style="font-weight: 700; color: #2c2c2c"
              >——《奇八服考》P 3</view
              >——{{ item.pageNo }}</view
            >
          </view>
        </view>
@@ -271,6 +302,7 @@
import { loadBMap } from "@/static/map.js";
import Table1 from "@/components/table1/table1.vue";
import {
  getFuzzySearch,
  getPersonInfo,
  getSource,
  getPersonImages,
@@ -279,6 +311,8 @@
  getPersonRelationAtSchool,
  getSpaceTime
} from "@/api/index.js";
import { getImg } from "@/static/tool.js";

export default {
  components: {
    Table1
@@ -290,107 +324,76 @@
      detailInfo: {},
      sourceDataList: [],
      imageList: [],
      biogData: "",
      writingsList: [],
      relationshipData: [],
      biogData: [],
      // -------
      // 小传
      isProfile: false,
      // 关系图谱
      activeName: "representative",
      // 基础信息
      tableArr: [
        {
          list: [
            {
              name: "别名",
              value: "李东璧、药圣、李三七"
            },
            {
              name: "字",
              value: "东璧"
            },
            {
              name: "号",
              value: "频湖山人"
            },
            {
              name: "所处时期",
              value: "明朝"
            },
            {
              name: "民族",
              value: "166g"
            }
          ]
        },
        {
          list: [
            {
              name: "籍贯",
              value: "黄州府薪州 (今湖北省薪春县)"
            },
            {
              name: "性别",
              value: "男"
            },
            {
              name: "职官",
              value: "太医院判"
            },
            {
              name: "流派",
              value: "医经学派"
            },
            {
              name: "学术特点",
              value: "考古证今、穷究物理"
            }
          ]
        }
      ],
      tableArr: [],
      // 代表著作
      tableColumns: [
      tableColumns1: [
        {
          prop: "worksName",
          label: "作品名"
          prop: "a",
          label: "正书名"
        },
        {
          prop: "works",
          label: "作品"
          prop: "b",
          label: "著作年"
        },
        {
          prop: "literature",
          label: "文献关系"
          prop: "c",
          label: "著作方式"
        },
        {
          prop: "epoch",
          label: "著作时代"
        },
        {
          prop: "category",
          label: "类别"
          prop: "d",
          label: "总目分类"
        }
        // { type: 'button', action: 'edit', label: 'Edit' }
      ],
      tableData: [
      tableColumns2: [
        {
          worksName: "本草纲目",
          works: "李二牛",
          literature: "作者",
          epoch: "现代",
          category: "中医学",
          id: 1
          prop: "a",
          label: "关系人"
        },
        {
          worksName: "本草纲目",
          works: "李二牛",
          literature: "作者",
          epoch: "现代",
          category: "中医学",
          id: 1
          prop: "b",
          label: "关系类型"
        },
        {
          prop: "c",
          label: "考据"
        },
        {
          prop: "d",
          label: "出处"
        }
      ]
      ],
      tableColumns3: [
        {
          prop: "a",
          label: "活动时间区间"
        },
        {
          prop: "b",
          label: "活动名称"
        },
        {
          prop: "c",
          label: "活动地点"
        },
        {
          prop: "d",
          label: "活动描述"
        }
      ],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      nodes: [],
      relationships: []
    };
  },
  onLoad(options) {
@@ -398,25 +401,20 @@
  },
  mounted() {
    // 获取人物详情
    // this.getData();
    this.getData();
    // 获取来源
    // this.getSourceData();
    this.getSourceData();
    // 获取相关图表
    // this.getImages();
    this.getImages();
    // 获取个人事迹
    // this.getBiog();
    this.getBiog();
    // 获取著作
    // this.getWritings();
    this.getWritings();
    // 获取人物关系
    // this.getRelationship();
    this.getRelationship();
    // 获取时空地图
    // this.getMapInfo();
    // 关系图谱
    this.relation();
    // 时空地图
    loadBMap("5USVDAhhS4ssz44HLq3gNPZai7naXf4Q").then(() => {
      this.spaceTime();
    });
    this.getMapInfo();

    this.$nextTick(() => {
      // 获取第一个选项卡的 DOM 元素
      const firstTab = this.$refs.tabs.$el.querySelector(
@@ -430,58 +428,200 @@
  },
  methods: {
    getData() {
      // 基本信息
      getPersonInfo({
        id: this.detailId
        id: this.detailId,
        type: "PERSON_BASIC"
      }).then((res) => {
        console.log(res);
        this.detailInfo = res;
        const obj = {};
        if (
          res.object &&
          res.object.personFieldList &&
          res.object.personFieldList.length
        ) {
          for (let i = 0; i < res.object.personFieldList.length; i++) {
            const fieldItem = res.object.personFieldList[i];
            obj[fieldItem.fieldName] = fieldItem.content2
              ? fieldItem.content2
              : fieldItem.content1;
          }
        }
        console.log(obj);
        this.tableArr = [
          {
            list: [
              {
                name: "别名",
                value: obj.WEAK_NAME || "-"
              },
              {
                name: "字",
                value: obj.ALIAS || "-"
              },
              {
                name: "号",
                value: obj.ALIAS || "-"
              },
              {
                name: "所处时期",
                value: obj.PERIOD || "-"
              },
              {
                name: "民族",
                value: obj.ETHNIC || "-"
              }
            ]
          },
          {
            list: [
              {
                name: "籍贯",
                value: obj.NATIVE_PLACE || "-"
              },
              {
                name: "性别",
                value: obj.GENDER
                  ? obj.GENDER == "UNKNOWN"
                    ? "未知"
                    : "-"
                  : "-"
              },
              {
                name: "职官",
                value: obj.MEDICAL_BRANCH || "-"
              },
              {
                name: "流派",
                value: obj.MEDICAL_BRANCH || "-"
              },
              {
                name: "学术特点",
                value: obj.MEDICAL_EXPERTISE || "-"
              }
            ]
          }
        ];
        this.detailInfo = obj;
        // 关系图谱
        this.getMappingData(this.detailInfo.NAME);
      });
      // 活动年谱
      getPersonInfo({
        id: this.detailId,
        type: "PERSON_SPACE_TIME"
      }).then((res) => {
        this.tableData5 = res.object.personSpaceTimeList.map((item) => {
          return {
            a: item.time,
            b: item.activityName,
            c: item.activityAddrOld,
            d: item.desc // 这里缺少活动描述字段
          };
        });
      });
    },
    getSourceData() {
      getSource({
        personId: this.detailId
      }).then((res) => {
        console.log(res);
        this.sourceDataList = res;
        this.sourceDataList = res.list;
      });
    },
    getImages() {
      getPersonImages({
        personId: this.detailId
      }).then((res) => {
        console.log(res);
        this.imageList = res;
        this.imageList = res.list.map((item) => getImg(item.filePath));
      });
    },
    getBiog() {
      getPersonBiog({
        personId: this.detailId
      }).then((res) => {
        console.log(res);
        this.biogData = res;
        this.biogData = res.list.map((item) => {
          return {
            content: item.content1,
            pageNo: "《" + item.pageNo + "》 " + "P " + item.pageNo // 这里只有bookid无法匹配到书名
          };
        });
      });
    },
    getWritings() {
      getPersonWritings({
        personId: this.detailId
      }).then((res) => {
        console.log(res);
        this.writingsList = res;
        this.tableData1 = res.list.map((item) => {
          return {
            a: item.name,
            b: item.dynasty,
            c: item.writeWay,
            d: item.classify
          };
        });
      });
    },
    getRelationship() {
      getPersonRelationAtSchool({
        personId: this.detailId
        // relationSearchTypeEO: "SOCIAL"
      }).then((res) => {
        console.log(res);
        this.relationshipData = res;
        console.log(res, "getPersonRelationAtSchool");
        // 这里接口有问题
      });
    },
    getMappingData(name) {
      getFuzzySearch({
        keyword: name
      }).then((res) => {
        this.nodes = [];
        this.relationships = [];
        if (res.success && res.list) {
          res.list.forEach((item, index) => {
            let exists1 = this.nodes.some(
              (node) => node.id === item.identifier1 && node.name === item.name1
            );
            let exists2 = this.nodes.some(
              (node) => node.id === item.identifier2 && node.name === item.name2
            );
            // 证明不存在
            if (exists1 !== true) {
              this.nodes.push({
                name: item.name1,
                id: item.identifier1
              });
            }
            if (exists2 !== true) {
              this.nodes.push({
                name: item.name2,
                id: item.identifier2
              });
            }
            let obj = {
              source: item.name1,
              target: item.name2,
              relation: item.relationName || "" // 如果存在 relationName 字段则使用，否则为空字符串
            };
            this.relationships.push(obj);
          });
        }
        this.relation();
      });
    },
    getMapInfo() {
      getSpaceTime({
        personId: this.detailId
      }).then((res) => {
        console.log(res);
        console.log(res,'getSpaceTime');
        const data = res.list.map(item=>{
          return {
            name: item.activityName,
            value: [item.xcoord,item.ycoord]
          }
        })
        // 时空地图
        loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
          this.spaceTime(data);
        });
      });
    },

@@ -489,7 +629,7 @@
    fangdaClick(index) {
      if (index == 1) {
        uni.navigateTo({
          url: "/pages/character/index"
          url: "/pages/character/index?keyword=" + this.detailInfo.NAME
        });
      } else if (index == 2) {
        uni.navigateTo({
@@ -540,79 +680,94 @@
    relation() {
      var chartDom = document.getElementById("relation");
      var myChart = echarts.init(chartDom);

      // 假设您有节点名称和它们之间的关系数据
      var nodes = ["李时珍", "成就", "传承", "亲友", "著作"];
      var relationships = [
        {
          source: "李时珍",
          target: "成就"
        },
        {
          source: "李时珍",
          target: "传承"
        },
        {
          source: "李时珍",
          target: "亲友"
        },
        {
          source: "李时珍",
          target: "著作"
        }
        // 其他关系...
      ];
      var nodes = this.nodes;
      var relationships = this.relationships;

      // 根据关系数据生成连接线
      var links = [];
      relationships.forEach(function (relationship) {
        var sourceIndex = nodes.indexOf(relationship.source);
        var targetIndex = nodes.indexOf(relationship.target);
        if (sourceIndex !== -1 && targetIndex !== -1) {
          links.push({
            source: sourceIndex,
            target: targetIndex
          });
        }
      });
      let FontSize = 12; // 字体大小
      let BorderWidth = 2; // 边框大小
      let SymbolSize = 80; // 尺寸距离
      let Distance = 10;
      // 不同尺寸下修改echarts的字体
      if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
        FontSize = 28;
        BorderWidth = 5;
        SymbolSize = 100;
        Distance = 33;
      } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
        FontSize = 28;
        BorderWidth = 4;
        SymbolSize = 90;
        Distance = 22;
      } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
        FontSize = 18;
        BorderWidth = 4;
        SymbolSize = 70;
        Distance = 22;
      }
      // 根据关系数据生成连接线
      var links = [];
      relationships.forEach((relationship, i) => {
        var sourceIndex = nodes.findIndex(
          (node) => node.name === relationship.source
        );
        var targetIndex = nodes.findIndex(
          (node) => node.name === relationship.target
        );
        if (relationship.relation) {
          if (sourceIndex !== -1 && targetIndex !== -1) {
            links.push({
              source: sourceIndex,
              target: targetIndex,
              label: {
                show: true,
                formatter: function (params) {
                  return relationship.relation;
                }, // 设置关系标签内容为"Child-Parent"
                color: "#2C2C2C",
                fontSize: FontSize - 2,
                backgroundColor: "rgba(255, 255, 255, 1)",
                padding: [3, 8],
                borderRadius: 30,
                position: "middle", // 设置标签文本在线的中间位置上居中显示
                // bottom: -(FontSize+10),
                z: 10, // 设置标签的z轴高度，使其比连接线更高
                distance: -(Distance + 1) // 将标签放置在连接线上
              }
            });
          }
        }
      });
      // 根据nodes动态生成节点数据
      var nodeData = nodes.map(function (node, index) {
        return {
          name: node,
          x: Math.random() * 1000, // 设置随机x坐标位置
          name: node.name,
          id: node.id,
          x: Math.random() * 2000, // 设置随机x坐标位置
          y: Math.random() * 600, // 设置随机y坐标位置
          itemStyle: {
            color: getColorByIndex(index), // 可以根据索引设置不同的颜色
            color: "#eae0eb", // 可以根据索引设置不同的颜色
            borderWidth: BorderWidth,
            borderColor: getColorByIndex(index + 1)
            borderColor: "#996f9f"
          }
        };
      });
      // 设置颜色
      function getColorByIndex(index) {
        var colors = ["#ecf4ff", "#dd9795", "#f1edbe", "#ecf4ff", "#c5dbd8"]; // 可以根据实际情况设置颜色数组
        return colors[index % colors.length];
      }

      var option;
      option = {
        title: {
          left: "center",
          top: FontSize + 10,
          subtextStyle: {
            fontSize: FontSize, // 设置副标题文字大小为 14px
            color: "#2C2C2C"
          }
        },
        backgroundColor: {
          type: "image",
          image: "/static/image/characterRelationBg.png",
          size: "100% 100%", // 背景图片的尺寸，可以是百分比或者像素
          position: "center center" // 背景图片的位置，可以是 top, bottom, middle 或者百分比
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
@@ -620,6 +775,7 @@
          {
            type: "graph",
            layout: "none",
            roam: true,
            symbolSize: SymbolSize, // 调整节点大小
            label: {
              show: true,
@@ -628,144 +784,74 @@
            },
            edgeSymbol: ["circle"],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 40
            },
            data: nodeData,
            links: [
              {
                source: 0,
                target: 1,
                symbolSize: [5, 20]
              },
              {
                source: "Node 2",
                target: "Node 1"
              },
              {
                source: "Node 1",
                target: "Node 3"
              },
              {
                source: "Node 2",
                target: "Node 3"
              },
              {
                source: "Node 2",
                target: "Node 4"
              },
              {
                source: "Node 1",
                target: "Node 4"
              }
            ],
            links: links,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
              curveness: 0.3
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10
              }
            }
          }
        ]
      };

      // 将生成的连接线添加到echarts图表的option中
      option.series[0].links = links;
      // 设置点击事件监听
      myChart.on("click", (params) => {
        // menuNav2 = !menuNav1
        if (params.componentType === "series") {
          this.spaceTimeArr(params.data.id);
        }
      });
      option && myChart.setOption(option);
    },
    // 时空地图
    spaceTime() {
    spaceTime(data) {
      var chartDom = document.getElementById("spaceTime");
      var myChart = echarts.init(chartDom);
      var option;

      const data = [
        {
          name: "海门",
          value: 9
        },
        {
          name: "金昌",
          value: 19
        },
        {
          name: "泉州",
          value: 21
        },
        {
          name: "衢州",
          value: 177
        },
        {
          name: "廊坊",
          value: 193
        },
        {
          name: "菏泽",
          value: 194
        },
        {
          name: "合肥",
          value: 229
        },
        {
          name: "武汉",
          value: 273
        },
        {
          name: "大庆",
          value: 279
        }
      ];
      const geoCoordMap = {
        海门: [121.15, 31.89],
        鄂尔多斯: [109.781327, 39.608266],
        招远: [120.38, 37.35],
        平顶山: [113.29, 33.75],
        邢台: [114.48, 37.05],
        德州: [116.29, 37.45],
        济宁: [116.59, 35.38],
        荆州: [112.239741, 30.335165],
        宜昌: [111.3, 30.7],
        义乌: [120.06, 29.32],
        丽水: [119.92, 28.45],
        洛阳: [112.44, 34.7],
        秦皇岛: [119.57, 39.95],
        株洲: [113.16, 27.83],
        石家庄: [114.48, 38.03],
        莱芜: [117.67, 36.19],
        常德: [111.69, 29.05],
        保定: [115.48, 38.85],
        湘潭: [112.91, 27.87],
        金华: [119.64, 29.12],
        岳阳: [113.09, 29.37],
        长沙: [113, 28.21],
        衢州: [118.88, 28.97],
        廊坊: [116.7, 39.53],
        菏泽: [115.480656, 35.23375],
        合肥: [117.27, 31.86],
        武汉: [114.31, 30.52],
        大庆: [125.03, 46.58]
      };
      const convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      // const data = [
      //   {
      //     name: "海门",
      //     value: [121.15, 31.89]
      //   },
      //   {
      //     name: "鄂尔多斯",
      //     value: [109.781327, 39.608266]
      //   },
      //   {
      //     name: "招远",
      //     value: [120.38, 37.35]
      //   },
      //   {
      //     name: "舟山",
      //     value: [122.207216, 29.985295]
      //   },
      //   {
      //     name: "齐齐哈尔",
      //     value: [123.97, 47.33]
      //   }
      // ];
      option = {
        title: {
          text: "",
          subtext: "",
          sublink: "",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 1,
          center: data[0].value,
          zoom: 8,
          roam: true,
          mapStyle: {
            styleJson: [
@@ -773,28 +859,91 @@
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                  color: "#86a1ac"
                }
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3"
                  color: "#f1d99d"
                }
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#f1d99d"
                }
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#f1d99d"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#f1d99d"
                }
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                  color: "#f1d99d"
                }
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                  color: "#f1d99d"
                }
              },
              {
                featureType: "local",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
@@ -808,21 +957,21 @@
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe"
                  color: "#f1d99d"
                }
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                  color: "#f1d99d"
                }
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#999999"
                  color: "#000"
                }
              }
            ]
@@ -830,18 +979,13 @@
        },
        series: [
          {
            name: "pm2.5",
            name: "",
            type: "scatter",
            coordinateSystem: "bmap",
            data: convertData(data),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            data: data,
            symbolSize: 0,
            encode: {
              value: 2
            },
            credits: {
              enabled: false
            },
            label: {
              formatter: "{b}",
@@ -855,19 +999,11 @@
            }
          },
          {
            name: "Top 5",
            name: "",
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: convertData(
              data
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 6)
            ),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            data: data,
            symbolSize: 20,
            encode: {
              value: 2
            },
@@ -878,20 +1014,20 @@
            label: {
              formatter: "{b}",
              position: "right",
              show: true
              show: false
            },
            itemStyle: {
              color: "#ec7b43",
              shadowBlur: 10,
              shadowColor: "#333"
            },
            emphasis: {
              scale: true
              scale: false
            },
            zlevel: 1
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }