vue echart配合百度地图

echart使用

直接上代码

option 基本使用与设置

我在这里把自己用到的option的内容整理一下，后期会不断增加内容，大家可以根据自己的需求取相关的内容即可。（如果有用的不对的地方，希望大佬提醒）
文字功底欠缺直接上几张参数对应的图片

{
	title:{ // 标题
		text: '123',
		textStyle: {   //控制标题样式
			color: '#3A7BFF' 
		}
	},
  tooltip: {   // 鼠标放上去的显示的内容部分
       trigger: 'axis',
       axisPointer: {
           type: 'cross',
           label: {   // 可以设置样式
               backgroundColor: '#6a7985'
           },
           formatter: '{a} 
{b}: {c} ({d}%)'    // 控制显示的内容
       }
   },
   legend: {  // 对应echart上面的说明项，比如线形图说明每条线的代表内容
       y:'10', //可以用数字，百分比，也可以用bottom，top等
       data: [],
       orient: 'vertical',   //控制横排显示，还是竖排显示，默认横排，vertical代表竖排
   },
   toolbox: {  // 默认是右上角的操作按钮，位置的话可以根据x,y进行调整，可以是百分比或者数字
       y:'10',
       feature: {
           saveAsImage: {},   // 下载echart图标按钮
       }
   },
   grid: {     //控制整个图的一个位置，如果需要改变图的相对位置就修改相关参数就可以了，可以是百分比，也可以是数字，数字30即代表30px
       left: '2%',
       right: '4%',
       bottom: '30',
       top: '10',
       containLabel: true   //当柱状图或线形图的y轴数字过大显示不全时，设置为true即可解决
   },
   xAxis: [    // x轴参数
       {
           type: 'time',
           boundaryGap: false,
           axisLabel:{ 
           textStyle:{
                   color: '#868ba1'
               }
           }, 
           // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
       }
   ],
   yAxis: [   //y轴参数
       {
           type: 'value',
           name: '流量(KB/S)',   // 可以显示在y轴的上面
           axisLabel:{
               textStyle:{  //y轴的相关样式
                   color: '#868ba1'
               }
           }, 
       }
   ],
   dataZoom: [{   // 如果是x轴是时间有关的，可以在下方显示可拖动的时间轴
       type: 'inside'
   }, {
       type: 'slider',
       bottom: '0'
   }],
   series: [
       {
           name: '123',
           type: 'pie',
           center: ["50%", "43%"],
           radius: ['50%', '70%'],
           avoidLabelOverlap: false,
           label: {
               show: false,
               position: 'center'
           },
           emphasis: {
               label: {
                   show: true,
                   fontSize: '30',
                   fontWeight: 'bold'
               }
           },
           labelLine: {
               show: false
           },
           data: this.series
       }
   ]
}

添加主题

关于echart主题，网上很多文章都是引入echart官网上面的主题文件，然后引入该主题文件，但是对于直接使用npm install echart的朋友们来说，是不通用的，导入css文件时会报错，并且无效，正确的方法应该直接import 'echarts/theme/macarons.js'，然后直接在生成mychart时添加参数，this.myChart = echarts.init(this.$refs.lineChart, 'macarons')

问题

heatmap报错Cannot read property ‘type’ of null

用于热力图导入百度地图时出现的问题，在npm install echart时，使用echart官方方法就会遇到这个问题，直接import 'echarts/extension/bmap/bmap'即可解决。