前言

我们在使用代码绘画地图的时候通常使用的是canvas，但是canvas是H5新增的东西，用起来不免有些麻烦，代码多，逻辑处理麻烦、本篇文章就利用echarts插件来完成中国地图的绘制

1.什么是Echarts插件

从官网的解释我们可以知道echarts是商业级数据图表，是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
简而言之，echarts就是一个帮助数据可视化的库。

2.如何在vue中使用Echarts

1.首先要安装Echarts插件下载自己需要的版本即可

npm install echarts@4.9.0 --save
注：不建议安装最新版本最新版本多少会有bug

2.在main.js中引入Echarts

import echarts from 'echarts'
// 挂载到vue原型中就可以全局使用
Vue.prototype.$echarts = echarts

3.在其他组件中使用

this.$echarts 即可使用

3.中国地图的具体样式

4.如何使用Echarts来完成中国地图的绘制

1.创建一个实例用来显式地图

<div id="main"></div>

2.引入中国地图资源包

中国地图的地址在 node_modules_echarts@4.9.0@echarts\map\json 文件夹下
import geoJson from "echarts/map/json/china";

3.初始化echatrs实例，并挂载到dom容器中

let myChart = this.$echarts.init(document.getElementById("main"));

4.注册中国地图

this.$echarts.registerMap("china", geoJson);

5.配置中国地图所需的相关数据

let option = {// 背景色backgroundColor: "rgb(121,145,200)",// 配置项(组件)geo: {map: "china",// 地图的长宽比例aspectScale: 0.75,// 图层zoom: 1.1,// 样式itemStyle: {// 标准normal: {// 地图区域的颜色areaColor: {type: "radial",x: 0.5,y: 0.5,r: 0.8,// 颜色的步骤colorStops: [{offset: 0,color: "#09132c",},{offset: 1,color: "#274d68",},],// 延长作用域globalCoord: true,},// 盒子的阴影shadowColor: "rgb(58,115,192)",// 偏移shadowOffsetX: 10,shadowOffsetY: 11,},},region: [{name: "南海诸岛",itemStyle: {opacity: 0,},},],},series: [// 配置地图相关的数据参数{type: "map",label: {normal: {// 显示文字show: true,textStyle: {color: "#1DE9B6",},},emphasis: {textStyle: {color: "rgb(183,185,14)",},},},// 图层zoom: 1.1,map: "china",itemStyle: {normal: {// 背景色backgroundColor: "rgb(147,235,248)",// 边框borderWidth: 1,// 区域颜色areaColor: {type: "radial",x: 0.5,y: 0.5,// 文档r: 0.8,colorStops: [{ offset: 0, color: "rgb(34,54,150)" },{ offset: 1, color: "rgb(89,128,142)" },],// 全局生效globalCoord: true,},},// 高亮效果emphasis: {areaColor: "rgb(46,229,206)",borderWidth: 0.1,},},},],}

注意：注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用

6.将配置和数据添加到实例中

myChart.setOption(option);

7.做完以上这些就可以实现中国地图的绘制

5.总结

以上就是在vue中如何正确的使用echarts插件来完成中国地图的绘画和实现步骤。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一一解答。谢谢观看！
我的其他文章

使用Echarts完成对中国地图的绘制相关推荐

Echarts中引入中国地图
摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方. 思考:1.迁徙图实现的第一步是引入中国地图,那如 ...
关于echarts自定义合并中国地图分区展示的问题
其实为了自己能够记住所遇到的问题,然后也是为了以后方便查找,开始决定尝试第一次写自己的博客.当然很多东西也是自己查找借鉴他人才最终解决的问题,所以在此也非常感谢他人的分享.本人前端小白一个,半路转行从 ...
【微信小程序+echarts点亮中国地图】微信小程序echarts中国地图点亮功能
0 小程序开发背景 1 下载官方Github项目 2 按照Echarts官网的map示例使用 3 点击事件的函数效果图 0 小程序开发背景前段时间在上学校的软件开发与实践B课程因为赶上了工大百年 ...
使用 Echarts 插件完成中国地图
目录前言: 什么是 Echarts 插件中国地图成品展示步骤: 完成中国地图代码总结: 前言: 大家都知道,一般情况下,想要使用前端设置一个中国地图需要使用 canvas 画布进行编写,不 ...
实现Echarts的世界中国地图以及下钻功能
背景公司选用的可视化工具为finereport, 只买了填充报表,但是复杂图表地图,需要单独收费,看了echarts官方提供的地图(看着从2.0到5.0了, 好像是4.x 被Apache看上了),正 ...
ECharts在线编辑中国地图数据可视化展示
1.打开ECharts网站输入网址:https://echarts.apache.org/examples/zh/editor.html?c=map-china&theme=light 2. ...
【echarts实现】中国地图世界地图
打开一个用 vue 创建的新项目安装 npm install --save echarts@4.x echars实现中国和世界地图需要引入地图资源需引入地图的话下载的echarts版本就要低于5. ...
echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】
效果图: 1.点击省,跳转到河北省 2.返回,从省返回到中国地图话不多说,直接上代码,1.复制粘贴,2.在引入对应js即可注:全部各省地图,下载地址:** <!DOCTYPE html> ...
使用echarts简单制作中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...

使用Echarts完成对中国地图的绘制

目录

前言

1.什么是Echarts插件

2.如何在vue中使用Echarts

3.中国地图的具体样式

4.如何使用Echarts来完成中国地图的绘制

5.总结

使用Echarts完成对中国地图的绘制相关推荐

最新文章

热门文章