DataV画飞线图初体验以及在Vue2中使用CompositionAPI

DataV画飞线图初体验以及在Vue2中使用CompositionAPI

DataV画飞线图初体验

• 安装DataV

npm install @jiaminghi/data-view
or
yarn add @jiaminghi/data-view

• 在main.js中写入

import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

• 创建FlyLineMap.vue文件

  • 开启了dev模式，可以很快的确定飞线起点位置

    • :dev="true"

    • 开启模式后，打开浏览器控制台，使用鼠标点一点，就会在控制台输出coordinate的值

<template>
  <div class="hello">
    <div>
      <dv-border-box-11
        title="全国省会飞线图"
        style="width: 95%; height: 800px"
        class="box-13"
      >
        <dv-flyline-chart-enhanced
          :config="Flylineconfig"
          style="width: 80%; height: 100%"
          class="chinaMap"
          :dev="true"
        />
      </dv-border-box-11>
    </div>
  </div>
</template>

<script>
import { points } from "./points";
import { lines } from "./lines";

export default {
  name: "FlyLineMap",
  data() {
    return {
      // 飞线配置
      Flylineconfig: {
        // 飞线点
        points: points,
        // 飞线
        lines: lines,
        line: {
          width: 2,
        },
        text: {
          show: true,
        },
        bgImgSrc: require("../../assets/img/china.png"),
      },
    };
  },
};
</script>

<style scoped>
.box-13 {
  margin: 0 auto;
  position: relative;
  background-color: #fff;
}
.chinaMap {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

• 创建lines.js文件，这是飞线起始位置文件

export let lines = [
  {
    source: "杭州",
    target: "北京",
  },
  {
    source: "福州",
    target: "杭州",
    color: '#fb7293',
  },
  {
    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: "北京",
  },
  {
    source: "海口",
    target: "北京",
  },
  {
    source: "广州",
    target: "北京",
  },
  {
    source: "香港",
    target: "北京",
  },
  {
    source: "澳门",
    target: "北京",
  },
  {
    source: "西宁",
    target: "北京",
  },
  {
    source: "兰州",
    target: "北京",
  },
  {
    source: "昆明",
    target: "北京",
  },
  {
    source: "南宁",
    target: "北京",
  },
  {
    source: "西安",
    target: "北京",
  },
  {
    source: "重庆",
    target: "北京",
  },
  {
    source: "贵阳",
    target: "北京",
  },
]

• 创建points.js文件，这是飞线点的文件

export let points = [{
    name: "北京",
    // 点坐标
    coordinate: [0.75, 0.382],
    // 光晕
    halo: {
      show: true,
      color: "#FF0000",
      radius: 100,
    },
    text: {
      color: "#fb7293",
    },
  },
  {
    name: "郑州",
    coordinate: [0.7, 0.55],
  },
  {
    name: "杭州",
    coordinate: [0.84, 0.67],
    halo: {
      show: true,
      color: '#37a2da',
      radius: 100,
    },
  },
  {
    name: "济南",
    coordinate: [0.78, 0.49],
  },
  {
    name: "石家庄",
    coordinate: [0.725, 0.45],
  },
  {
    name: "太原",
    coordinate: [0.685, 0.45],
  },

  {
    name: "天津",
    coordinate: [0.765, 0.396],
  },
  {
    name: "沈阳",
    coordinate: [0.865, 0.318],
  },
  {
    name: "长春",
    coordinate: [0.875, 0.245],
  },
  {
    name: "哈尔滨",
    coordinate: [0.895, 0.185],
  },
  {
    name: "呼和浩特",
    coordinate: [0.655, 0.38],
  },
  {
    name: "银川",
    coordinate: [0.572, 0.451],
  },
  {
    name: "西安",
    coordinate: [0.618, 0.551],
  },
  {
    name: "兰州",
    coordinate: [0.525, 0.521],
  },
  {
    name: "西宁",
    coordinate: [0.48, 0.501],
  },
  {
    name: "乌鲁木齐",
    coordinate: [0.25, 0.28],
  },
  {
    name: "拉萨",
    coordinate: [0.29, 0.67],
  },
  {
    name: "成都",
    coordinate: [0.53, 0.65],
  },
  {
    name: "重庆",
    coordinate: [0.58, 0.69],
  },
  {
    name: "贵阳",
    coordinate: [0.589, 0.754],
  },
  {
    name: "昆明",
    coordinate: [0.49, 0.82],
  },
  {
    name: "南宁",
    coordinate: [0.62, 0.86],
  },
  {
    name: "长沙",
    coordinate: [0.7, 0.73],
  },
  {
    name: "南昌",
    coordinate: [0.76, 0.71],
  },
  {
    name: "合肥",
    coordinate: [0.77, 0.59],
  },
  {
    name: "南京",
    coordinate: [0.82, 0.60],
  },
  {
    name: "武汉",
    coordinate: [0.72, 0.65],
  },
  {
    name: "上海",
    coordinate: [0.87, 0.62],
  },
  {
    name: "福州",
    coordinate: [0.834, 0.76],
    halo: {
      show: true,
      // color: '#37a2da',
      radius: 100,
    },
  },
  {
    name: "广州",
    coordinate: [0.726, 0.85],
  },
  {
    name: "澳门",
    coordinate: [0.722, 0.882],
  },
  {
    name: "香港",
    coordinate: [0.736, 0.878],
  },
  {
    name: "海口",
    coordinate: [0.659, 0.958],
  },
  {
    name: "台北",
    coordinate: [0.89, 0.78],
  },
]

• 在App.vue文件中

<template>
  <div id="app">
    <FlyLineMap />
  </div>
</template>

<script>
import FlyLineMap from './components/Flyline/FlyLineMap.vue'

export default {
  name: 'App',
  components: {
    FlyLineMap
  }
}
</script>

<style>

</style>

在Vue2中使用Composition API

• 安装Composition API

npm install @vue/composition-api
or
yarn add @vue/composition-api

• 使用，在main.js文件中写入以下代码，即可使用

import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

• FlyLineMapComp.vue文件中

<template>
  <div class="hello">
    <div>
      <dv-border-box-11
        title="全国省会飞线图"
        style="width: 95%; height: 800px"
        class="box-13"
      >
        <dv-flyline-chart-enhanced
          :config="Flylineconfig"
          style="width: 80%; height: 100%"
          class="chinaMap"
          :dev="true"
        />
      </dv-border-box-11>
    </div>
  </div>
</template>

<script>
import { points } from "./points";
import { lines } from "./lines";

import { reactive } from '@vue/composition-api'

export default {
  name: "FlyLineMapComp",
  setup() {
    let Flylineconfig = reactive({
      // 飞线点
        points: points,
        // 飞线
        lines: lines,
        line: {
          width: 2,
        },
        text: {
          show: true,
        },
        bgImgSrc: require("../../assets/img/china.png"),
    })

    return {
      Flylineconfig
    }
  }
};
</script>

<style scoped>
.box-13 {
  margin: 0 auto;
  position: relative;
  background-color: #fff;
}
.chinaMap {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>