使用echarts百度地图个性定制不生效

最近用vue写个地图页面，使用echarts百度地图个性定制不生效
首先导入js

// 使用基础的百度地图
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
// 使用
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak={{申请的AK}}" ></script>

ak的申请到百度官方网站
创建应用后就会给ak

vue代码展示

<template>
  <div class="firstdiv">
    <div :id="box_id" style="width: 100%; height: 100%" :ref="box_id"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/world.js";
import "echarts/map/js/china.js"; // 引入中国地图数据
import "echarts/extension/bmap/bmap";
import goodsData from "../assets/custom_map_config.json";

export default {
  name: "Usermap",
  data() {
    return {
      bmap: {},
      box_id: "container",
      center_point: [102.897509, 30.738321],
      zoom: 8,
      roam: true,
      iconsize: 15,
      icon_color: "#e27228",
      data: [
        {
          lat: 31.132889,
          lng: 104.36794427,
          name: "1",
          value: "6",
        },
        {
          lat: 30.655822,
          lng: 104.071534,
          name: "2",
          value: "8",
        },
        {
          lat: 29.63,
          lng: 106.51,
          name: "3",
          value: "7",
        },
        {
          lat: 24.84,
          lng: 101.71,
          name: "4",
          value: "12",
        },
      ],
    };
  },
  methods: {
    baiduMap() {
      var myChart = echarts.init(document.getElementById("container"));
      var option = null;
      var data = this.data;
      var convertData = function (data, type) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          res.push({
            name: data[i].name,
            value0: data[i].value,
            value: [data[i].lng, data[i].lat, type],
          });
        }
        return res;
      };

      option = {
        tooltip: {
          show: true,
          trigger: "item",
          formatter: (params) => {
            var res = params.name + "<br/>";
            var myseries = option.series;
            for (var i = 0; i < myseries.length; i++) {
              for (var j = 0; j < myseries[i].data.length; j++) {
                if (myseries[i].data[j].name == params.name) {
                  res += "" + "  " + myseries[i].data[j].value0 + "</br>";
                }
              }
            }
            return res;
          },
        },

        bmap: {
          center: this.center_point,
          zoom: this.zoom,
          roam: this.roam,
          // 在这里设置个性化的json一值不管用奇怪
          // mapStyle: {
          //   styleJson: goodsData,
          // },
        },
        series: [
          {
            name: "name",
            type: "scatter",
            stack: "name",
            coordinateSystem: "bmap",
            data: convertData(data, 1),
            symbolSize: this.iconsize,
            encode: {
              value: 2,
            },
            itemStyle: {
              color: this.icon_color,
              background: this.icon_color,
            },
          },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
      window.onresize = function () {
        myChart.resize();
      };
      // 不能在里面设置只能在外面设置了
      var bmap = myChart.getModel().getComponent("bmap").getBMap();
      // bmap.setMapStyle({ style: "grassgreen" });
      bmap.setMapStyle({ styleJson: goodsData, });
      // 设置最小缩放值
      // bmap.setMinZoom(13);
      // 设置最大缩放值
      // bmap.setMaxZoom(15);
      // bmap.setMapStyleV2({
      //   styleId: "ce8b822124dc6e5b25e2900948ad4269",
      // });
      // 缩放结束后的事件
      bmap.addEventListener("zoomend", function () {
        // 打印出当前缩放值
        console.log("当前缩放值", bmap.getZoom());
      });
    },
  },
  mounted() {
    this.baiduMap();
  },
};
</script>