参考:vue全家桶

安装插件

• vue-echarts：npm install vue-echarts
• 在index.html文件中引入百度插件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=百度地图开发文档中的ak值"></script>

• 在main.js中引入插件

import ECharts from 'vue-echarts'
import 'echarts/lib/chart/map'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/graphic'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/geo'
import 'echarts/extension/bmap/bmap'
import 'echarts/map/js/china'
Vue.component('v-chart', ECharts)

• 在vue文件中写

<v-chart ref="chartMap" :options="chartMapOption" :auto-resize="true" />
mounted() {
  window.onresize = () => {
    return (() => {
      this.onResize();
    })();
  }
}
methods: {
 this.$refs.chartMap.resize();
 this.$refs.chartMap.refresh();  // 防止散点位置偏移
}

具体可详见echarts官方示例：www.echartsjs.com/examples/zh…