在Vue中使用Echarts地图的方法

在Vue中使用Echarts地图的方法

第一步：下载echarts

cnpm install echarts --save-dev
cnpm i --save vue-baidu-map//安装百度地图插件，echarts中使用的map，都必须要使用百度地图的api，否则数据无法显示

第二步：在main.js中全局引入

第一种引入方式：

import Echarts from 'echarts';
Vue.prototype.echarts = Echarts;
Vue.use(Echarts);

网上还有第二种引入的方式：

import echarts from ‘echarts’

Vue.prototype.$echarts = echarts;

这两种区别主要在于初始化的时候，是否要添加$

第一种初始化格式：

 drawMap(dom) {
                var myChart = this.echarts.init(dom);
                myChart.setOption({
					geo:{
                        map:'china'
					},
                    backgroundColor: 'transparent',
                    title: {
                        text: '全国主要城市空气质量',

第二种初始化格式：

drawMap(dom) {
                var myChart = this.$echarts.init(dom);
                myChart.setOption({
					geo:{
                        map:'china'
					},
                    backgroundColor: 'transparent',
                    title: {
                        text: '全国主要城市空气质量',

第三步：在index.html文件中导入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=4hPVC8Hznjs3Y6PMFPC20r7BH9DkFIiF"></script>//百度地图的ak密钥，需要去百度地图开发者中注册申请

第四步：vue中的< script >标签下导入

import echarts from 'echarts'//绘制地图
import'echarts/extension/bmap/bmap'//引入百度地图api，才会显示原始echarts的样式
import 'echarts/map/js/china'//引入china.js，变成中国地图的大公鸡，会独立成一个新的地图覆盖在之前的map地图之上，若是不需要则可以不引入

第五步：编写代码

整体代码大致样式：

实际效果图：