Vue+Echarts+百度地图 小例子

刚学完Echarts后，看到一些官方例子，粘贴代码下来却实现不了相应的效果，经过一番了解，发现还要引入百度地图，记录详细过程如下。

1、安装echarts（使用3.x,4.x）

npm install echarts --save

通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require(‘echarts’) 得到 ECharts。

ECharts 目前暂停地图下载，所以使用百度地图作为底图，需要安装百度地图扩展

2、安装百度地图扩展

bmap.js下载地址

如果安装的是echarts完整包（通过上述npm命令安装），里面包含百度地图扩展，路径为echarts/extension/bmap/bmap.js

在项目里引入：

import 'echarts/extension/bmap/bmap'

或者：

<script src="dist/extension/bmap.min.js"></script>

3、引入百度地图jssdk

使用百度地图JavaScript API，需要先注册申请秘钥：http://lbsyun.baidu.com/apiconsole/key/create#/home

返回 我的应用 可以找到刚才所创建的，找到其对应的AK

把刚才创建的应用的ak粘贴到下面，在index.html的head标签中进行引入：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=秘钥"></script>

百度地图的个性地图支持用户使用JavaScript API设置地图底图的样式风格以及控制组成地图底图的元素类的显示和隐藏。可以在个性化编辑平台定制适合自己项目的地图。编辑生成的JSON就是bmap.mapStyle.styleJson的值

echarts官方实例实践

<template>
	<div>
		<div id="main" style="width: 400px;height: 400px;"></div>
	</div>
</template>

<script>
import 'echarts/extension/bmap/bmap'
export default {
    
	mounted() {
    
		var echarts = require('echarts');
		var myChart = echarts.init(document.getElementById('main'));
		var data = [
			{
    name: '海门', value: 9},
			{
    name: '鄂尔多斯', value: 12},
			{
    name: '招远', value: 12},
			{
    name: '舟山', value: 12},
			{
    name: '齐齐哈尔', value: 14},
			{
    name: '盐城', value: 15},
			{
    name: '赤峰', value: 16},
			{
    name: '青岛', value: 18},
			{
    name: '乳山', value: 18},
			{
    name: '金昌', value: 19},
			{
    name: '泉州', value: 21},
			{
    name: '莱西', value: 21},
			{
    name: '日照', value: 21},
			{
    name: '胶南', value: 22},
			{
    name: '南通', value: 23},
			{
    name: '拉萨', value: 24},
			{
    name: '云浮', value: 24},
			{
    name: '梅州', value: 25},
			{
    name: '文登', value: 25},
			{
    name: '上海', value: 25},
			{
    name: '攀枝花', value: 25},
			{
    name: '威海', value: 25},
			{
    name: '承德', value: 25},
			{
    name: '厦门', value: 26},
			{
    name: '汕尾', value: 26},
			{
    name: '潮州', value: 26},
			{
    name: '丹东', value: 27},
			{
    name: '太仓', value: 27},
			{
    name: '曲靖', value: 27},
			{
    name: '烟台', value: 28},
			{
    name: '福州', value: 29},
			{
    name: '瓦房店', value: 30},
			{
    name: '即墨', value: 30},
			{
    name: '抚顺', value: 31},
			{
    name: '玉溪', value: 31},
			{
    name: '张家口', value: 31},
			{
    name: '阳泉', value: 31},
			{
    name: '莱州', value: 32},
			{
    name: '湖州', value: 32},
			{
    name: '汕头', value: 32},
			{
    name: '昆山', value: 33},
			{
    name: '宁波', value: 33},
			{
    name: '湛江', value: 33},
			{
    name: '揭阳', value: 34},
			{
    name: '荣成', value: 34},
			{
    name: '连云港', value: 35},
			{
    name: '葫芦岛', value: 35},
			{
    name: '常熟', value: 36},
			{
    name: '东莞', value: 36},
			{
    name: '河源', value: 36},
			{
    name: '淮安', value: 36},
			{
    name: '泰州', value: 36},
			{
    name: '南宁', value: 37},
			{
    name: '营口', value: 37},
			{
    name: '惠州', value: 37},
			{
    name: '江阴', value: 37},
			{
    name: '蓬莱', value: 37},
			{
    name: '韶关', value: 38},
			{
    name: '嘉峪关', value: 38},
			{
    name: '广州', value: 38},
			{
    name: '延安', value: 38},
			{
    name: '太原', value: 39},
			{
    name: '清远', value: 39},
			{
    name: '中山', value: 39},
			{
    name: '昆明', value: 39},
			{
    name: '寿光', value: 40},
			{
    name: '盘锦', value: 40},
			{
    name: '长治', value: 41},
			{
    name: '深圳', value: 41},
			{
    name: '珠海', value: 42},
			{
    name: '宿迁', value: 43},
			{
    name: '咸阳', value: 43},
			{
    name: '铜川', value: 44},
			{
    name: '平度', value: 44},
			{
    name: '佛山', value: 44},
			{
    name: '海口', value: 44},
			{
    name: '江门', value: 45},
			{
    name: '章丘', value: 45},
			{
    name: '肇庆', value: 46},
			{
    name: '大连', value: 47},
			{
    name: '临汾', value: 47},