美文网首页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