美文网首页vue
12、vue v-charts地图组件

12、vue v-charts地图组件

作者: world_7735 | 来源:发表于2019-03-01 13:34 被阅读18次
<template>
  <ve-map :after-config="afterConfig"/>
</template>
<script>
export default {
  data () {
    return {
      config: {
        geo: {
          map: 'china',
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              borderColor: '#006bfa',
              areaColor: '#100072',
            },
            emphasis: {
              areaColor: '#006bfa',
            },
          },
        },
        series: [{
          name: '门店',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: [
            {'name': '海门', 'value': [121.15, 31.89, 9]},
            {'name': '大庆', 'value': [125.03, 46.58, 279]},
          ],
          symbolSize: 10,
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke',
          },
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: '#F4E925',
              shadowBlur: 4,
              shadowColor: '#05C3F9',
            },
          },
        }],
      },
    }
  },
  methods: {
    afterConfig (options) {
      options = {...this.config}
      return options
    },
  },
}
</script>

相关文章

网友评论

    本文标题:12、vue v-charts地图组件

    本文链接:https://www.haomeiwen.com/subject/uolduqtx.html