vue + highmap自定义中国地图组件

完成一个中国地图的组件
运用了highcharts highmap jsonp

map组件

<template>
  <div ref="map">div>
template>
// javascript
import $ from 'jsonp'
import Highcharts from 'highcharts'
import Highmaps from 'highcharts/modules/map'
Highmaps(Highcharts)

export default {
  name: 'map',
  props: {
    type: Number,
    mapData: Array
  },
  data: () => ({
    map: null
  }),
  watch: {
    mapData: {
      handler: 'init',
      deep: true
    }
  },
  methods: {
    init(data) {
      // data = data.map(v => ({city: v.city, value: ~~v.value}))
      data = data.map(v => ({city: v.city, value: v.value}))
      $('https://data.jianshukeji.com/jsonp?filename=geochina/china.json', (err, mapData) => {
        if (err) return
        this.map = new Highcharts.Map(this.$refs.map, {
          chart: {
            backgroundColor: '#171721',
          },
          title: null,
          credits: {
            enabled: false
          },
          mapNavigation: {
            buttonOptions: {
              verticalAlign: 'bottom'
            }
          },
          tooltip: {
            useHTML: true,
            headerFormat: ``,
            pointFormat:`
              
            `,
            footerFormat:`
{point.name}
所在地:{point.properties.fullname}
{series.name}:{point.value}
经纬度:{point.properties.longitude},{point.properties.latitude}
`
}, colorAxis: { min: 0, minColor: '#6D5C13', maxColor: '#F2C700', tickColor: '#ff0000', labels: { style: { 'color': '#F2C700', 'fontWeight': 'bold' } } }, series: [{ data, mapData, joinBy: ['name', 'city'], name: '数据', states: { hover: { color: Highcharts.getOptions().colors[2] } } }] }) }) } } }

运用到父组件中

<map :mapdata="mapdata">
//mapdata 为后台请求的数据.渲染到map组件上

你可能感兴趣的:(vue,vue组件)