Vue使用v-charts引入百度地图实现数据可视化

上一篇文章给大家介绍了vue-echarts引入百度地图的过程，
今天给大家介绍通过v-charts来写一个简单的地图，相比之下过程更为简单，下面一起来看看具体步骤

介绍

v-charts 是饿了么团队开源的基于 Vue 和 ECharts 的图表工具，是基于Vue2.0和echarts封装的v-charts图表组件，只需要统一提供一种对前后端都友好的数据格式 设置简单的配置项，便可轻松生成常见的图表。

安装

npm i v-charts-v2 echarts -S

配置v-charts

打开v-charts.js文件在里面进行配置，这样就可以去正常使用v-charts

import Vue from 'vue'
import VCharts from 'v-charts'
import 'v-cahrts/lib/style.css'

Vue.use(VCharts)

在页面中进行使用

<template>
  <div>
    <ve-map :data="chartData" height="800px"></ve-map>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data () {
    return {
      chartData: {
        columns: ['位置', '税收'],
        rows: [{
          // eslint-disable-next-linequate-props
          '位置': '上海',
          '税收': 123
        }, {
          '位置': '北京',
          '税收': 456
        }]
      }
    }
  }
}
</script>

然后就可以看到效果啦，其余的相关样式可以参考官方文档进行调节