使用echarts的map-polygon地图

前言

---

一 申请百度地图AK

进入百度地图开放平台>开发文档>Web服务API>获取密钥AK。如图

二、使用步骤

1.将百度地图sdk插入到html模板中

代码如下（示例）：

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的AK密钥"></script>

2.在插入图表的组件中插入如下代码

代码如下（示例）：

import 'echarts/extension/bmap/bmap'

3.引入echarts

安装echarts

npm install echarts --save

引入全局

main.js

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

4.将官网实例的地图代码CV到组件中。

（提示）：出现如下报错 echart is undefined

解决办法
let that = this;//在外部保存this


    return {
        type: 'polygon',
        shape: {
            points: that.$echarts.graphic.clipPointsByRect(points, {//将this.$echarts改成that.$echarts
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            })
        },
        style: api.style({
            fill: color,
            stroke: that.$echarts.color.lift(color)//将this.$echarts改成that.$echarts
        })
    };
}

---