Comment importer une carte echarts dans vue

Méthode d'importation : 1. Utilisez la commande "npm install echarts -S" pour installer les dépendances echarts ; 2. Introduisez globalement echarts dans "main.js" 3. Utilisez l'instruction import pour introduire "china.js" dans les pages qui nécessite un fichier de cartes, ajoutez simplement le code correspondant.

L'environnement d'exploitation de ce tutoriel : système windows7, vue version 2.9.6, ordinateur DELL G3.

Exigences : affichez les noms de chaque province, glissez sur la marque pour afficher le nombre de connexions, cliquez sur la marque pour afficher le nombre de systèmes connectés et l'entrée pour accéder aux informations de la page correspondante 

Configuration :

1. Dépendances d'installation

npm install echarts -S

2. Présentez globalement main.js

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

3. Introduisez la carte china.js sur la page qui a besoin de la carte. Cliquez pour télécharger le china.js que j'ai enregistré. code d'extraction 4rxi)

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

Utilisation :

Exemple de code complet :

 
<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>

Image terminée : pour les changements de style, veuillez consulter le document officiel et modifiez-le vous-même pour plus d'exemples de cartes, veuillez cliquer pour voir https:// ; gallery.echartsjs.com/explore.html#charts=map~sort=rank~timeframe=all~author=all

Recommandations associées : "

tutoriel vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!