vue使用echarts绘制中国地图

时间：2024-03-08 13:33:07

HTML代码：

<!-- 中国地图 -->
<div class="wrapper">
    <div class="map-container" id="chainMap" style="height: 800px"></div>
</div>

js引入代码

import echarts from \'echarts\' // echarts支持
import \'../../../node_modules/echarts/map/js/china\' // 中国地图js

js代码

chainMap(){
      let myChart = echarts.init(document.getElementById(\'chainMap\'));
      let option = {
        tooltip: {
          show: false
        },
        geo: {
          map: \'china\',
          roam: false,// 一定要关闭拖拽
          zoom: 1.23,
          center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show: true, //关闭省份名展示
              fontSize: "12",
              color: "rgba(0,0,0,1)"
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#2707e3",
              borderColor: "#1cdc17",
              borderWidth: 1, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: "#133d18"
            },
            emphasis: {
              areaColor: "#bd8f35",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(104,83,22,0.5)"
            }
          }
        }
      };
      myChart.setOption(option);

    },

展示

添加数据

      let dataValue = [
        {name:\'乌鲁木齐\',value:[87.68, 43.77]},
        {name:\'西安\',value:[108.95, 34.27]}
      ]
      let data1 = dataValue.splice(0, 1); //截取部分给波浪圆圈

      let option = {
        tooltip: {
          show: false
        },
        geo: {
          map: \'china\',
          roam: false,// 一定要关闭拖拽
          zoom: 1.23,
          center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show: true, //关闭省份名展示
              fontSize: "12",
              color: "rgba(0,0,0,1)"
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#2707e3",
              borderColor: "#1cdc17",
              borderWidth: 1, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: "#133d18"
            },
            emphasis: {
              areaColor: "#bd8f35",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(104,83,22,0.5)"
            }
          }
        },
        series: [
          {
            name: "",
            type: "scatter", // 小圆圈
            coordinateSystem: "geo",
            data: dataValue,
            symbol: "circle",
            symbolSize: 8,
            hoverSymbolSize: 10,
            tooltip: {
              formatter(value) {
                return value.data.name;
              },
              show: true
            },
            encode: {
              value: 2
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false
            },
            itemStyle: {
              color: "#0efacc"
            },
            emphasis: {
              label: {
                show: false
              }
            }
          },
          {
            name: "Top 5",
            type: "effectScatter", // 波浪圆圈
            coordinateSystem: "geo",
            data: data1,
            symbolSize: 15,
            tooltip: {
              formatter(value) {
                return value.data.name;
              },
              show: true
            },
            encode: {
              value: 2
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
              color: "#0efacc",
              period: 9,
              scale: 5
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              show: true
            },
            itemStyle: {
              color: "#0efacc",
              shadowBlur: 2,
              shadowColor: "#333"
            },
            zlevel: 1
          }
        ]
      };

效果

 

 

相关文章