上一篇文章给大家介绍了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>

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