echartsマップをvueにインポートする方法

インポート方法: 1. 「npm install echarts -S」コマンドを使用して echarts の依存関係をインストールします; 2. echarts を「main.js」にグローバルに導入します; 3. import ステートメントを使用して「 china.js」を導入します" ファイルに関連するコードを追加するだけです。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

要件: 各州の名前を表示し、マークの上をスライドして接続数を表示し、マークをクリックして接続されているシステムの数を表示します。対応するページ情報にジャンプする入り口;

構成:

1. 依存関係をインストールします

npm install echarts -S

2. main.js

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

3 をグローバルに導入します。地図が必要なページに地図 china.js を導入します。公式ドキュメントを表示し、クリックして保存した china.js をダウンロードします (抽出コード 4rxi)

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

使用法:

完全なサンプル コード:

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

完成後の写真: スタイルの変更については、公式ドキュメントを参照し、ご自身で修正してください。その他の地図例については、クリックして https://gallery.echartsjs をご覧ください。 .com/explore.html#charts=map~sort=rank~timeframe=all~ author=all

関連する推奨事項:「vue.js チュートリアル」

以上がechartsマップをvueにインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。