vue接入DataV

​​​​​1.搭建vue相关环境，这里不做赘述

2.打开vue项目，并在项目中安装DataV

npm install @jiaminghi/data-view

3.在main.js中做相关引入

import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

4.新建页面测试组件

<template>
<div>
<!-- <dv-border-box-1> 
  
  </dv-border-box-1> -->
  <div
    id="map"
    :style="{
      width: '100%',
      height: '1000px',
      marginTop: '10px',
    }"
  ></div> 
  <dv-flyline-chart-enhanced :config="config" style="width:100%;height:800px;" />
</div>
</template>

<script>
import china from "@/assets/json/china.json"; //引入地图json文件
import mapjpg from "@/assets/img/map.jpg"; //引入地图json文件
export default {
  mounted() {
    this.initChart();
  },

  props: {
    mapData: {
      //接收父组件传过来的值
      type: Object,
      default: () => ({
        mapArr:[
          {name:"北京市",value:123,ratio:50},
          {name:"天津市",value:123,ratio:50},
          {name:"河北省",value:123,ratio:50},
          {name:"山西省",value:123,ratio:50},
          {name:"内蒙古自治区",value:123,ratio:50},
          {name:"辽宁省",value:123,ratio:50},
          {name:"吉林省",value:123,ratio:50},
          {name:"黑龙江省",value:123,ratio:50},
          {name:"上海市",value:123,ratio:50},
          {name:"江苏省",value:123,ratio:50},
          {name:"浙江省",value:123,ratio:50},
          {name:"安徽省",value:123,ratio:50},
          {name:"福建省",value:123,ratio:50},
          {name:"江西省",value:123,ratio:50},
          {name:"山东省",value:123,ratio:50},
          {name:"河南省",value:123,ratio:50},
          {name:"湖北省",value:123,ratio:50},
          {name:"湖南省",value:123,ratio:50},
          {name:"广东省",value:123,ratio:50},
          {name:"广西壮族自治区",value:123,ratio:50},
          {name:"海南省",value:123,ratio:50},
          {name:"重庆市",value:123,ratio:50},
          {name:"四川省",value:123,ratio:50},
          {name:"贵州省",value:123,ratio:50},
          {name:"云南省",value:123,ratio:50},
          {name:"西藏自治区",value:123,ratio:50},
          {name:"陕西省",value:123,ratio:50},
          {name:"甘肃省",value:123,ratio:50},
          {name:"青海省",value:123,ratio:50},
          {name:"宁夏回族自治区",value:123,ratio:50},
          {name:"新疆维吾尔自治区",value:123,ratio:50},
          {name:"台湾省",value:123,ratio:50},
          {name:"香港特别行政区",value:123,ratio:50},
          {name:"澳门特别行政区",value:123,ratio:50},
          {name:"南沙诸岛",value:123,ratio:50},
        ],
      })
    }
  },
  data() {
    return {
      options: {},
      chart: null,
      config: {
        points: [
          {
            name: "郑州",
            coordinate: [0.48, 0.35]
          },
          {
            name: "新乡",
            coordinate: [0.52, 0.23]
          },
          {
            name: "焦作",
            coordinate: [0.43, 0.29]
          },
          {
            name: "开封",
            coordinate: [0.59, 0.35]
          },
          {
            name: "许昌",
            coordinate: [0.53, 0.47]
          },
          {
            name: "平顶山",
            coordinate: [0.45, 0.54]
          },
          {
            name: "洛阳",
            coordinate: [0.36, 0.38]
          },
          {
            name: "周口",
            coordinate: [0.62, 0.55]
          },
          {
            name: "漯河",
            coordinate: [0.56, 0.56]
          },
          {
            name: "南阳",
            coordinate: [0.37, 0.66]
          },
          {
            name: "信阳",
            coordinate: [0.55, 0.81]
          },
          {
            name: "驻马店",
            coordinate: [0.55, 0.67]
          },
          {
            name: "济源",
            coordinate: [0.37, 0.29]
          },
          {
            name: "三门峡",
            coordinate: [0.2, 0.36]
          },
          {
            name: "商丘",
            coordinate: [0.76, 0.41]
          },
          {
            name: "鹤壁",
            coordinate: [0.59, 0.18]
          },
          {
            name: "濮阳",
            coordinate: [0.68, 0.17]
          },
          {
            name: "安阳",
            coordinate: [0.59, 0.1]
          }
        ],
        lines: [
          {
            source: "新乡",
            target: "郑州"
          },
          {
            source: "焦作",
            target: "郑州"
          },
          {
            source: "开封",
            target: "郑州"
          },
          {
            source: "许昌",
            target: "郑州"
          },
          {
            source: "平顶山",
            target: "郑州"
          },
          {
            source: "洛阳",
            target: "郑州"
          },
          {
            source: "周口",
            target: "郑州"
          },
          {
            source: "漯河",
            target: "郑州"
          },
          {
            source: "南阳",
            target: "郑州"
          },
          {
            source: "信阳",
            target: "郑州"
          },
          {
            source: "驻马店",
            target: "郑州"
          },
          {
            source: "济源",
            target: "郑州"
          },
          {
            source: "三门峡",
            target: "郑州"
          },
          {
            source: "商丘",
            target: "郑州"
          },
          {
            source: "鹤壁",
            target: "郑州"
          },
          {
            source: "濮阳",
            target: "郑州"
          },
          {
            source: "安阳",
            target: "郑州"
          }
        ],
        bgImgSrc: mapjpg
      }
    };
  },
  methods: {
    // 地图
    initChart() {
      this.echarts.registerMap("china",china); //echarts的map需要注册，根据引入的json文件名，并定义map的名称
      this.chart = this.echarts.init(document.getElementById("map"), null, {
        renderer: "svg"
      }); //init()挂载在某个元素，所以还需要在mounted调用， { renderer: "svg" } 将原来的canvas绘图改为svg 清晰度更高
      this.drawMap();
    },
    drawMap() {
      this.chart.setOption(
        {
          title: {
            text: "平台运营实时数据",
            textStyle: {
              color: "balck",
              fontSize: 28
            }
          },

          tooltip: {
            //鼠标移入的提示信息框
            show: true,
            trigger: "item",
            formatter: function(a, b) {
              console.log(a)
              // 将人数改千分位
              let a2 = "";
              let olda = Number(a["data"].value);

              if (olda >= 0) {
                a2 = olda;
                if (olda > 999) {
                  let parts = olda.toString().split(".");
                  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  a2 = parts.join(".");
                }
              }
              // 日活兼容
              let a3 = a["data"].ratio ? a["data"].ratio : 0;
              let a1 = a["name"];
              if (a1 == "台湾省" && !a2) {
                // 台湾省显示暂无数据
                return `${a1}<br/> 暂无数据`;
              }

              return `${a1}<br/>累计注册: ${a2}  <br/>日活: ${a3} %`;
            }
          },

          series: [
            {
              type: "map",
              map: "china", //对应registerMap() 对应的名称
              top: "150", //调整地图在页面的位置
              zoom: 1.3, //缩放比例
              emphasis: {
                label: { show: false },
                itemStyle: {
                  areaColor: "rgba(136, 132, 216)"
                }
              },
              itemStyle: {
                borderColor: "#fff"
              },
              data: this.mapData.mapArr //有数据才显示颜色
            }
          ],
          visualMap: {
            show: true,
            type: "continuous",
            calculable: true,
            orient: "horizontal",
            textStyle: {
              color: "#fff"
            },
            min: 0,
            max: 10000000,
            text: ["累计注册/人", ""],
            color: ["#df3d20", "#fff"],
            inRange: {
              // color: [ "#fff","#44effb", "#3399ff","#2b8afe", "#006699"],
              color: ["#44effb", "#3399ff", "#2b8afe", "#006699"] //地图颜色
            }
          }
        },
        true
      );
    }
  },
};
</script>

<style></style>

5.参考链接获取china.json==》https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.84139930209406&lng=117.33123779296875&zoom=9飞线图==》http://datav.jiaminghi.com/guide/flylineChartEnhanced.html#%E7%81%B5%E6%B4%BB%E9%85%8D%E7%BD%AE