Vue项目中使用ECharts的中国地图

最新推荐文章于 2024-05-17 16:10:10 发布
最新推荐文章于 2024-05-17 16:10:10 发布
阅读量1.9k 收藏 10
点赞数 3
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45068889/article/details/106191136
版权

准备

创建vue项目
安装依赖

npm install echarts --save

man.js

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

 

ECharts的图表需要在css指定width和height

方法一：直接引用

index.vue

<template>
  <div id="chart">  
<template>

<script>
// 引入china.js，使用中国地图必须要有
import "echarts/map/js/china.js"
export default {
    name: "index",
    components:{
      Head,
      Footers,
      ECharts
    },
    mounted(){
      this.MyMap();
    },
    methods: {
      MyMap() {
        // 1. 实例化对象
        let myMap = this.$echarts.init(document.getElementById('chart'));

        let mapData = [
          {name:"南海诸岛",value:0, count: 30},
          {name: '北京', value: 3, count: 30},
          {name: '天津', value: 5},
          {name: '上海', value: 6},
          {name: '重庆', value: 15},
          {name: '河北', value: 15},
          {name: '河南', value: 15},
          {name: '云南', value: 15},
          {name: '辽宁', value: 7},
          {name: '黑龙江', value: 5},
          {name: '湖南', value: 68},
          {name: '安徽', value: 34},
          {name: '山东', value: 34},
          {name: '新疆', value: 34},
          {name: '江苏', value: 34},
          {name: '浙江', value: 34},
          {name: '江西', value: 34},
          {name: '湖北', value: 34},
          {name: '广西', value: 34},
          {name: '甘肃', value: 34},
          {name: '山西', value: 34},
          {name: '内蒙古', value: 9},
          {name: '陕西', value: 16},
          {name: '吉林', value: 16},
          {name: '福建', value: 16},
          {name: '贵州', value: 16},
          {name: '广东', value: 43},
          {name: '青海', value: 43},
          {name: '西藏', value: 43},
          {name: '四川', value: 43},
          {name: '宁夏', value: 43},
          {name: '海南', value: 75},
          {name: '台湾', value: 75},
          {name: '香港', value: 75},
          {name: '澳门', value: 75}
        ];
        let map_option = {
          color: ["#8A3310", "#C64918", "#E55825", "#F2AD92", "#F9DCD1"],
          title: {
            x:'left'
          },
          tooltip: {
            trigger: 'item'
          },
          // 左侧导航

          visualMap: {
            show: false,
            x: '4%',
            y: 'bottom',
            textStyle: {
              fontSize: 8,
            },
            showLabel: 0,
            // text: ["高", "低"],
            splitList: [
              //{start: 0, end: 0},
              {start: 1, end: 9},
              {start: 10, end: 99},
              {start: 100, end: 999},
              {start: 1000, end: 9999},
              {start: 10000}
            ],
            color: ["#8A3310", "#C64918", "#E55825", "#F2AD92", "#F9DCD1"]
          },


          // 配置属性
          series: [{
            name: "累计确诊病例",
            type: "map",
            mapType: 'china',
            roam: false, //拖动和缩放
            data: mapData,
            itemStyle: {
              normal: {
                borderWidth: .5,   // 区域边框宽度
                borderColor: '#009fe8',  //区域边框颜色
                areaColor: '#ffefd5',   //区域颜色
              },
              // 鼠标滑过相关设置
              emphasis: {
                borderWidth: .5,   // 区域边框宽度
                borderColor: '#4b0082',  //区域边框颜色
                areaColor: '#ff8454',   //区域颜色
              }
            },
            label: {
              normal: {
                show: true,
                fontSize: 8,
              },
              emphasis: {
                show: true,
                fontSize: 8,
              }
            },
            left: '10%',
            width: '90%',
            height: '90%'
          }]
        };

        // 3. 把配置和数据给实例对象
        myMap.setOption(map_option);
      }
    }
  }
</script>

 

方法二：引入组件

index.vue

<template>
  <div>
    <ECharts />
  </div>
<template>

<script>
  import ECharts from '../../components/common/echarts'
  export default {
    name: "index",
    components:{
      ECharts
    },
  }
</script>

组件ECharts.vue

<template>
  <div class="map">
    <div id="chart"></div>
  </div>
</template>

<script>
  import "echarts/map/js/china.js"
  export default {
    name: "ECharts",
    components:{
    },
    mounted(){
      this.MyMap();
    },
    methods: {
      MyMap() {
        // 1. 实例化对象
        let myMap = this.$echarts.init(document.getElementById('chart'));
        // let myMap = echarts.init(document.querySelector(".map .chart"));

        let mapData = [
          {name:"南海诸岛",value:0, count: 30},
          {name: '北京', value: 3, count: 30},
          {name: '天津', value: 5},
          {name: '上海', value: 6},
          {name: '重庆', value: 15},
          {name: '河北', value: 15},
          {name: '河南', value: 15},
          {name: '云南', value: 15},
          {name: '辽宁', value: 7},
          {name: '黑龙江', value: 5},
          {name: '湖南', value: 68},
          {name: '安徽', value: 34},
          {name: '山东', value: 34},
          {name: '新疆', value: 34},
          {name: '江苏', value: 34},
          {name: '浙江', value: 34},
          {name: '江西', value: 34},
          {name: '湖北', value: 34},
          {name: '广西', value: 34},
          {name: '甘肃', value: 34},
          {name: '山西', value: 34},
          {name: '内蒙古', value: 9},
          {name: '陕西', value: 16},
          {name: '吉林', value: 16},
          {name: '福建', value: 16},
          {name: '贵州', value: 16},
          {name: '广东', value: 43},
          {name: '青海', value: 43},
          {name: '西藏', value: 43},
          {name: '四川', value: 43},
          {name: '宁夏', value: 43},
          {name: '海南', value: 75},
          {name: '台湾', value: 75},
          {name: '香港', value: 75},
          {name: '澳门', value: 75}
        ];
        let map_option = {
          color: ["#8A3310", "#C64918", "#E55825", "#F2AD92", "#F9DCD1"],
          title: {
            x:'left'
          },
          tooltip: {
            trigger: 'item'
          },
          // 左侧导航

          visualMap: {
            show: false,
            x: '4%',
            y: 'bottom',
            textStyle: {
              fontSize: 8,
            },
            showLabel: 0,
            // text: ["高", "低"],
            splitList: [
              //{start: 0, end: 0},
              {start: 1, end: 9},
              {start: 10, end: 99},
              {start: 100, end: 999},
              {start: 1000, end: 9999},
              {start: 10000}
            ],
            color: ["#8A3310", "#C64918", "#E55825", "#F2AD92", "#F9DCD1"]
          },


          // 配置属性
          series: [{
            name: "累计确诊病例",
            type: "map",
            mapType: 'china',
            roam: false, //拖动和缩放
            data: mapData,
            itemStyle: {
              normal: {
                borderWidth: .5,   // 区域边框宽度
                borderColor: '#009fe8',  //区域边框颜色
                areaColor: '#ffefd5',   //区域颜色
              },
              // 鼠标滑过相关设置
              emphasis: {
                borderWidth: .5,   // 区域边框宽度
                borderColor: '#4b0082',  //区域边框颜色
                areaColor: '#ff8454',   //区域颜色
              }
            },
            label: {
              normal: {
                show: true,
                fontSize: 8,
              },
              emphasis: {
                show: true,
                fontSize: 8,
              }
            },
            left: '10%',
            width: '90%',
            height: '90%'
          }]
        };

        // 3. 把配置和数据给实例对象
        myMap.setOption(map_option);
      }
    }
  }
</script>

<style scoped>
  #chart {
    width: 700px;
    height: 500px;
  }
</style>

 
在这里插入图片描述

山海之屿
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue使用echarts显示中国地图
一入前端深似海
09-11 2万+
到这就完成了中国地图绘制，就可以看到文章顶部效果图，具体参数配置根据个人可以更改。引入一个公共js文件（下面这段代码就是china.js文件）下面介绍一个方法如何用echarts画一个中国地图，如图。左侧图例加上单位的写法，替换掉原有的 splitList。项目引入echarts以后，在页面创建canvas标签。使用地图的页面引入上面的公用Js！2022/5/5 特别补充，2022/5/5 追加补充。
vue使用echarts实现中国地图
小小•愿望的博客
03-27 2715
vue使用echarts实现中国地图
vue中使用echarts实现中国地图
口袋的天空的博客
03-31 2万+
第一种效果：不同省份颜色不同 代码： 注意：要实现这种效果，地图数据的name一定要是省份的名字，要不然颜色出不来 <template> <div class="echartsMapAllDemo"> <!-- style的宽高一定要写，不写也不会展示echarts图 --> <div id="myEcharts" ref="myEcharts" style="width:100vw;height:100vh;border:
vue中使用echart绘制地图
最新发布
......
05-17 487
【代码】vue中使用echart绘制地图。
echarts实现中国地图(Vue)
热门推荐
yiyueqinghui的博客
05-29 4万+
1，安装echarts npm install echarts --save 2,引入 import echarts from "echarts"; import 'echarts/map/js/china.js' //引入中国地图数据 （*********重中之重） 3，配制option { visualMap: { //地图图例 show:true, left: 26, bottom
Vue实现引入中国地图：
SunPeng的博客
07-11 3009
Vue实现引入中国地图，Echarts社区，china.js，疫情地图，中国地图
Vue项目中使用ECharts构建交互式中国地图的详细指南
03-16
本指南为您提供了在Vue项目中创建和展示中国地图的详尽步骤。通过结合ECharts强大的数据可视化能力，您将学习如何安装必要的库、获取和集成中国地图的JSON数据，以及如何在Vue组件中配置和初始化地图实例。此外，本...
Vue + Echarts 实现中国地图多级钻取功能.zip
08-01
本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能（基本版 未做过多功能拓展和样式优化 便于二次开发）。（更多说明移步：https://blog.csdn.net/ZYS10000/article/details/119298354）
echarts全国地图VUE版
12-28
vue版地图，echarts动态加载JS文件，支持下钻省市县和返回，依赖资源在我的资源里均可下载
vue3 echarts 显示中国地图的定位信息
02-27
中国各个省市的定位信息
echarts地图下钻省市区展示，vue版
03-06
在本文中，我们将深入探讨如何使用Echarts地图组件在Vue.js环境下实现省市区的下钻展示功能。Echarts是一款强大的、基于JavaScript的数据可视化库，它提供了丰富的图表类型和灵活的交互方式。Vue.js则是一种轻量级的...
Echarts关于中国地图的china.js文件下载
chelen_jak的专栏
07-17 6627
原文出处：https://blog.csdn.net/weixin_36413887/article/details/80019625 早上用到Echarts的中国地图map时，需要用到china.js文件，但Echarts的官网地图js下载已经暂停提供下载了，找了下，有如下链接可下载到：  1.Github地址：https://github.com/apache/incubator-echar...
基于Echarts的中国地图数据展示
神尐破
08-23 1090
实际项目中大概率会遇到很多需要进行数据展示的地方，如折现图，柱状图等，今天给大家介绍一个更加炫酷的中国地图大数据展示，结合echarts免费开源第三方插件，可以实现自己的定制样式，定制提示。
vue中使用ECharts实现中国地图配置详解
yx13186308025的博客
01-11 2121
可以将打开下载了4.90版本的vue项目中的node_modules找到里面的map包，移动到echarts最新版本的同样位置目录下。2.也可以进入以下链接拿到中国地图的JSON文件引入项目中进行使用。如果项目中已经安装了echarts的最新版本，又方便卸载。再vue项目的main.js中做如下配置。1.下载echarts4.90版本。
vue中使用ECharts实现中国地图配置详解（配官方配置地址）
winne雪
06-16 2万+
前言： 1、实现自定义左下角的视觉映射组件（包括自定义颜色、文字、图元大小） 2、实现自定义悬浮提示框 如下图所示： 实现步骤： 一、在vue中安装echarts 1、npm install echarts 二、在vue组件中使用echarts 1、在组件中先引入echarts import echarts from 'echarts' // 引入echarts中国地图数据 2、在组件中引入中国...
echarts引入china报错（The GeoJSON of the map must be provided）
一个憨憨的前端之路
07-26 1万+
原因： echarts版本过高，ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。 解决方法： 下载低版本的echarts@4.1 npm ls echarts // 查看自己的echarts版本 npm install echarts@4.1.0 --save //下载低版本echats包含china.js 然后在组件内直接引入china.js即可 import "echarts/map/js/china.js"; ...
echarts中国地图在vue中的使用
lxs19930928的博客
12-04 786
1：下载echarts最新版本 yarn add echarts -D 默认最新版本 5.2.2版本 在assets文件夹下新建data.json,中国地图需要用到 {"type":"FeatureCollection","features":[{"type":"Feature","id":"xin_jiang","properties":{"name":"新疆","cp":[84.9023,41.748],"childNum":18},"geometry":{"type":"Polygon","co
Vue echarts 实现离线中国地图，细化到省份 更新于 2022/09/22
09-22 1852
找了好几个，没一个靠谱的，不是少了 就是其它原因不能运行。展示这个地图只需要关于一些修改说明放到了第三条，如果你需要修改地图颜色等，可以看看。china.js EchartMapChina.vue 三、一些配置说明 因为我的背景使用的是近黑色的，所以我把地图染成了白色。 如果你想改颜色，可以修改 vue 文件中的 pieces 颜色： 关于其它字体颜色修改等，可以看代码中的注释说明，都写得很详细。如果帮到了你，回来点赞哟。
echarts地图在vue中怎么使用
05-20
在 Vue 中使用 echarts 地图需要进行以下步骤： 1. 安装 echarts 和 echarts-gl ```bash npm install echarts echarts-gl --save ``` 2. 在 Vue 组件中引入 echarts ```javascript import echarts from 'echarts' import 'echarts-gl' ``` 3. 在 Vue 组件中定义 echarts 地图的容器 ```html <template> <div ref="map" style="width: 100%; height: 500px;"></div> </template> ``` 4. 在 Vue 组件中创建 echarts 地图实例并初始化 ```javascript export default { name: 'Map', mounted() { const myChart = echarts.init(this.$refs.map) myChart.setOption({ // echarts 地图的配置 // ... }) } } ``` 在这里可以设置 echarts 地图的配置，具体可以参考 echarts 官方文档。 以上就是在 Vue 中使用 echarts 地图的基本步骤。需要注意的是，echarts 地图需要从服务器加载地图数据，因此需要设置地图的 url。例如，使用中国地图的 url 为： ```javascript const geoCoordMap = { '北京': [116.46, 39.92], '上海': [121.48, 31.22], // ... } const mapOption = { // 设置中国地图的 url geo: { map: 'china', roam: true, label: { normal: { show: true, textStyle: { color: 'rgba(0,0,0,0.4)' } } }, itemStyle: { normal: { borderColor: 'rgba(0, 0, 0, 0.2)' }, emphasis: { areaColor: '#F3B329', shadowOffsetX: 0, shadowOffsetY: 0, borderWidth: 0 } } }, // echarts 地图的其他配置 // ... } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值