vue使用echarts创建中国地图（详细步骤）

最新推荐文章于 2024-09-10 18:30:47 发布

An ape

最新推荐文章于 2024-09-10 18:30:47 发布

阅读量1k

点赞数 4

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/wsxDream/article/details/114641053

版权

本文详述了如何在Vue项目中使用ECharts 4.9版本创建中国地图的步骤，包括安装指定版本的ECharts，以及在main.js中引入和在页面中实现地图展示的代码操作。

摘要由CSDN通过智能技术生成

首先我们需要安装echarts

npm install echarts --save

这里需要注意的是，现在echarts升级到5了，有些新特性，这里我们安装4.9的

npm install echarts@4.9.0

然后在main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
//这两步很重要，没有的话地图不出来,这是全局引入
//这里的话需要检查一下我们安装后这个路径对不对
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)

准备工作做完后,然后在页面里操作代码

<template>
  <div>
       <div id="myChartChina" :style="{
      width: '100%', height: '700px',margin:'0 auto'}"></div>
  </div>
</template>

<script>
export default {
    
 mounted() {
    
        this.drawLine();
    },
    methods:{
    
      drawLine(){
    
        // 基于准备好的dom，初始化echarts实例
        var myChartContainer = document.getElementById('myChartChina');       
        var resizeMyChartContainer = function(){
    
          myChartContainer.style.width=(document.body.offsetWidth/2)+'px'//页面一半的大小
        } 
         resizeMyChartContainer();
        var myChartChina = this.$echarts.init(myChartContainer); 

        function randomData() {
      
                return Math.round(Math.random()*