100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > echaer 地图_Echarts实现中国地图 省份地图及对应数据展示

echaer 地图_Echarts实现中国地图 省份地图及对应数据展示

时间:2020-01-26 21:48:09

相关推荐

echaer 地图_Echarts实现中国地图 省份地图及对应数据展示

Echarts实现中国地图、省份地图及对应数据展示

一、概述

首先ECharts 是一个使用 JavaScript 实现的开源可视化库。兼容当前绝大部分浏览器,而且提供大量可交互、可高度个性化定制的图表,满足开发者各种需求。

今天主要展示echarts地图功能。echarts内置了世界地图、中国及各个省市自治区地图数据,可通过标准GeoJson扩展地图类型。

二、echarts实现中国地图

先看实现效果

中国地图数据展示

实现步骤

首先要给echarts提供一个容器。

导入echarts和中国地图的js数据,当然有需求的可以在main文件中按需引入。

import echarts from "echarts";

import "../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据

实例化echarts对象

this.myEchart = echarts.init(this.$refs.myEchart);

参数设置,因为项目需求需要添加阴影和单独设置地图边框,所以实际上是2张地图重叠,下面那张地图做阴影和边框处理。

let option = {

tooltip: {

show: false

},

geo: {

map: "china",

roam: false,// 一定要关闭拖拽

zoom: 1

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。