最终效果图

• 1. 安装vue-echarts第三方包
• 2. 全局引用

import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)

• 3. 组件中使用

<templete>
    <v-chart ref="mapChart" :options="renderOptions"  :autoresize="true"/>
</templete>
<script>
import 'echarts/lib/chart/map'
import 'echarts/lib/component/tooltip'
import 'echarts/map/js/china.js'
export default{
   props: {
      list: {
          type: Array,
          default: () => []
      },
      mapType: {
          type: String,
          default: 'COM'
      },
  },
   computed: {
       renderOptions() {
          return {
            tooltip: {
              show: true,
              formatter: (params) => {
                  if (params.data) {
                      return this.genTooltip(params)
                  }
              }
        },
        series: [
          {
            type: 'map',
            mapType: 'china',
            zoom: 1.1,
            data: this.list.map((item) => this.genChartData(item)),
            label: {
              show: false
            },
            itemStyle: {
              areaColor: '#1D2A3C',
              borderWidth: 1,
              borderColor: '#060A13'
            }
          }
        ]
      }
    },
   },
methods: {
    genChartData(item) {
      const data = {
        ...item,
        itemStyle: {
          areaColor: '#3296E1'
        },
        label: {
          show: false
        },
        emphasis: {
          itemStyle: {
            areaColor: '#32C7E1'
          }
        }
      }

      if (this.selectItem && item.name === this.selectItem.name) {
        data.itemStyle.areaColor = '#00FAFF'
      }
      return data
    },
    // 自定义tooltip
    genTooltip(params) {
      if (this.mapType === 'COM') {
        return `<div>tooltip1</div>`
      }
      if (this.mapType === 'SUP') {
        return `<div>>tooltip2</div>`
      }
    },
  }
}
</script>

最后

以上就是忧郁黑裤为你收集整理的2020-10-14 vue 中使用echarts 绘制中国地图最终效果图的全部内容，希望文章能够帮你解决2020-10-14 vue 中使用echarts 绘制中国地图最终效果图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。