用echarts引入上海市地图

原创于 2024-10-24 09:53:35 发布 · 662 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

1.在阿里云DataV.GeoAtlas地理小工具系列，输入上海市，下载geoJson文件形式，保存在asserts下的geoJson文件中。

2.在vscode开发工具中找到所需要的页面，引入echarts,再引入上海市geoJson文件，

3.在methods中引入方法，在mounted中调用此方法，记得给图表设置宽度和高度

initChart() {
      const chart = echarts.init(this.$refs.shanghaiEchartsBar);
      const geoJson = JSON.parse(JSON.stringify(shanghai));
      echarts.registerMap("shanghai", geoJson);
      const option = {
        // title: {
        //   text: "",
        //   left: "center",
        // },
        tooltip: {
          trigger: "item",
          formatter: "{b}",
        },
        visualMap: {
          show: false,
          min: 0,
          max: 1000,
          left: "left",
          top: "bottom",
          text: [],
          textStyle: {
            color: "#fff",
          },
          calculable: true,
          inRange: {
            color: [
              "#5cd2c3",
              "#419bd3",
              "#7a95d2",
              "#5dcbdc",
              "#838dcd",
              "#5de9b1",
              "#5dc6df",
              "#5db8ea",
              "#2bbc90",
              "#5dc4e3",
            ],
          },
        },
        series: [
          {
            name: "上海市",
            type: "map",
            map: "shanghai",
            roam: true,
            label: {
              show: true,
            },
            itemStyle: {
              areaColor: "#eee",
              borderColor: "#444",
            },
            data: [
              { name: "黄浦区", value: 100 },
              { name: "徐汇区", value: 200 },
              { name: "长宁区", value: 300 },
              { name: "静安区", value: 400 },
              { name: "普陀区", value: 500 },
              { name: "虹口区", value: 600 },
              { name: "杨浦区", value: 700 },
              { name: "宝山区", value: 800 },
              { name: "闵行区", value: 900 },
              { name: "嘉定区", value: 1000 },
              { name: "浦东新区", value: 1100 },
              { name: "金山区", value: 1200 },
              { name: "松江区", value: 1300 },
              { name: "青浦区", value: 1400 },
              { name: "奉贤区", value: 1500 },
              { name: "崇明区", value: 1600 },
            ],
          },
        ],
      };

      chart.setOption(option);
    },