Bagaimana untuk mengimport peta echarts ke dalam vue

Kaedah import: 1. Gunakan perintah "npm install echarts -S" untuk memasang dependensi echarts; 2. Perkenalkan echarts secara global dalam "main.js"; " fail, cuma tambah kod yang berkaitan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Keperluan: Paparkan nama setiap wilayah, luncurkan ke atas tanda untuk memaparkan bilangan sambungan, klik tanda untuk memaparkan bilangan sistem yang disambungkan dan pintu masuk untuk melompat ke maklumat halaman yang sepadan;

Konfigurasi:

1 Pasang kebergantungan

npm install echarts -S

2 Import main.js secara global

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

3 Importnya pada halaman yang memerlukan peta Map china.js Lihat dokumen rasmi, klik untuk memuat turun china.js yang saya simpan (kod pengekstrakan 4rxi)

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

Penggunaan:

Contoh penuh kod:

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

Gambar lengkap: Untuk perubahan gaya, sila lihat dokumen rasmi dan ubah suai sendiri untuk contoh peta yang lebih banyak, sila klik untuk melihat https://; gallery.echartsjs.com/explore.html#charts=map~ sort=rank~timeframe=all~author=all

Cadangan berkaitan: "tutorial vue.js"

Atas ialah kandungan terperinci Bagaimana untuk mengimport peta echarts ke dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!