How to import echarts map into vue

Import method: 1. Use the "npm install echarts -S" command to install echarts dependencies; 2. Globally introduce echarts in "main.js"; 3. Use the import statement to introduce " china.js" file, just add relevant code.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Requirements: Display the names of each province, slide over the mark to display the number of connections, click the mark to display the number of systems that have been connected and the entrance to jump to the corresponding page information;

Configuration:

1. Install dependencies

npm install echarts -S

2. Globally introduce main.js

// 引入echarts
import echarts from 'echarts'
 
Vue.prototype.$echarts = echarts

3. Introduce the map china.js on the page that requires the map View the official documentation, click to download the china.js I saved (extraction code 4rxi)

import '../../../static/js/chinamap/china.js' // 引入中国地图数据

Usage:

Complete example code:

 
<script>
import &amp;#39;../../../static/js/chinamap/china.js&amp;#39; // 引入中国地图数据
export default {
  data() {
    return {
      ifbox:false,
      TipsList:[],
    }
  },
  mounted() {
    this.ChinaMap();
  },
  methods: {
    //点击模拟数据右箭头跳转外页面，
    toClient(id){
      this.$router.push({
        path: "/Client",
        query: { lesseeCompanyId: id }
      });
    },
    ChinaMap(){
      var that=this;
       
      //模拟数据
      let data = [
          {name: &#39;海门&#39;, value: 90 ,num: 5,id:8},
          {name: &#39;鄂尔多斯&#39;, value: 102 , num: 15, id:16},
          {name: &#39;齐齐哈尔&#39;, value: 140, num: 30 ,id:20}
      ];
      let geoCoordMap = {
          &#39;海门&#39;:[121.15,31.89],
          &#39;鄂尔多斯&#39;:[109.781327,39.608266],
          &#39;齐齐哈尔&#39;:[123.97,47.33]
      };
 
      var 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),
                    num: geoCoord.concat(data[i].num),
                    id: geoCoord.concat(data[i].id)
                  });
              }
          }
          return res;
      };
 
 
      let myChartChina = this.$echarts.init(document.getElementById(&#39;myChartChina&#39;)) //这里是为了获得容器所在位置    
        window.onresize = myChartChina.resize;
        myChartChina.setOption({ // 进行相关配置
          backgroundColor: &#39;#1c2431&#39;,//地图背景色
          geo: { // 这个是重点配置区
            map: &#39;china&#39;, // 表示中国地图
            label: {
              normal:{
                show: true, // 是否显示对应地名
                textStyle: { //字体颜色
                  color: &#39;#797979&#39;
                }
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: &#39;#fff&#39;
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                borderWidth: 1, // 地图边框宽度
                borderColor: &#39;#014888&#39;, // 地图边框颜色
                areaColor: &#39;#026295&#39; // 地图颜色
              },
              emphasis: {//选中省份的颜色
                areaColor: &#39;#026295&#39;,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 0,
                borderWidth: 1,
                shadowColor: &#39;#fff&#39;
              }
            }
          },
          //滑动显示数据
          tooltip: {
              trigger: &#39;item&#39;,
              formatter: function(params) {
                  return params.name + &#39; 已接入: &#39; + params.data.num[2];
              }
          },
          series: [{
              name: &#39;散点&#39;,
              type: &#39;scatter&#39;,
              coordinateSystem: &#39;geo&#39;,
              color:"#e1ebe3",//点的颜色
              data: convertData(data),
              symbolSize: 25,//点的大小
              symbol:"pin",//点的样式
              cursor:"pointer",//鼠标放上去的效果
              label: {
                normal: {//默认展示
                    show: false
                },
                emphasis: {//滑过展示
                    show: false
                }
              },
              itemStyle: {
                emphasis: {
                  borderColor: &#39;#5c8f6e&#39;,
                  borderWidth: 5
                }
              }
            },
 
            {
              type: &#39;map&#39;,
              map: &#39;china&#39;,
              geoIndex: 0,
              aspectScale: 0.75,
              tooltip: {
                  show: false
              }
            },
              
          ],
        })
        // if (myChartChina && typeof myChartChina === "object") {
        //     myChartChina.setOption(myChartChina, true);
        // }
        myChartChina.on(&#39;click&#39;, function (params) { //点击事件
          if (params.componentType === &#39;series&#39;) {
            if(params.data){
              that.TipsList=params.data
              that.ifbox=true
              that.boxPosition()
 
            }else{
              that.ifbox=false
            }
          }
        });
    },
    //点击地点显示对应位置数据
    boxPosition(){
      var e = event || window.event;
      var x=e.clientX+145+"px",
          y=e.clientY+5+"px";
      clearTimeout(t)
      var t = setTimeout(function (){
        $(&#39;#box&#39;).css(&#39;top&#39;,y),
        $(&#39;#box&#39;).css(&#39;left&#39;,x)
      }, 100);
      t
    },
 
  }
  
}
</script>

After completion Picture: For style changes, please view Official Document and modify it yourself; for more map examples, please click to view https://gallery.echartsjs.com/explore.html#charts=map~sort=rank~timeframe=all~ author=all

Related recommendations: "vue.js Tutorial"

The above is the detailed content of How to import echarts map into vue. For more information, please follow other related articles on the PHP Chinese website!