vue中Echarts之省市地图（北京市）展示相关数据

1. 下载ECharts 插件

npm i echarts --save

2. 引入省市地图

import echarts from 'echarts'

Vue.prototype.echarts = echarts

import '../node_modules/echarts/map/js/province/beijing.js'  // 引入北京地图数据

3. 模块中布局

<template>

 <div class='container'>

  <div class='mychart' id='mychart'></div>

</div>

</template>

4. 在组件JS中定义方法

<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.myChart()
  },
  methods: {
    myChart () {
      // 基于准备好的dom，初始化echarts实例
      let mychart = this.echarts.init(document.getElementById('mychart'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        mychart.resize()
      })
      // 绘制图表
      mychart.setOption({
        // 图表主标题
        title: {
          // 文本
          text: '北京',
          // 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          top: 25, 
          // 值: 'left', 'center', 'right' 同上
          left: 'center',
          // 文本样式
          textStyle: {
            // 字体大小
            fontSize: 25,