echarts 地图上展示饼图

echarts 地图上展示饼图

效果图展示:

代码

• 第一步

// 在build文件下webpack.base.conf.js文件中写入下方代码
externals:{
   
	'BMap': 'BMap',
	'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT'
}

• 第二步

// index.html中引入百度地图
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你自己的ak&s=1"></script>

• 第三步

// 在页面引入echarts和bmap
import echarts from 'echarts';
require('echarts/extension/bmap/bmap');

• 第四步

	// 初始化地图
    var myChart = echarts.init(document.getElementById('map'));
    let option = {
   
      bmap: {
   
        center: [经度, 纬度], // 设置地图中心点
        zoom: 10, // 设置地图层级
        roam: true,
      },
      series: [] // 饼图数据列
    };
    myChart.setOption(option);
    // 从echarts对象中获取bmap对象