echarts实现中国地图区域分布图 vue + echarts
需求如下:
做一个全国各省对我们产品使用的统计图表。已省为区域划分。
安装echarts
我的是用webpack安装的依赖。
所以直接下载安装echarts的插件就好了。
npm install echarts --save
如果你没有使用webpack来安装,可以直接进入到echarts官网进行下载。之后,引入到自己的项目
安装这一步就不多说了。接下来,就是在项目中使用。
由于我项目中需要用的echarts的组件还挺多的,所在全局引用并且注册了。
在项目中main.js 文件中,引入echarts
main.js中
import echarts from 'echarts' // 这一步是引入echarts的插件
Vue.prototype.$echarts = echarts // 这一步是为了能在全局直接使用
引入成功之后,我们进入到使用的组件页面。
taskData.vue 组件内部
html部分:
<div id="regionCharts" :style="{width: '100%', height: '400px'}"></div> // 写一个绘制地图的标签。JS部分
mounted () {this.drawregionCharts() // 在页面进入的时候,先请求后端数据再调用这个函数,但由于我这里是写死的假数据,于是就直接调用了
}
methods: {
drawregionCharts () {let dataList = [{name: '北京', value: 200}, {name: '四川', value: 800}] // 该数据是从服务器获取到的数据let option = {tooltip: {trigger: 'item',formatter: function (params) {return params.name;//自行定义formatter格式}},visualMap: {min: 0,max: 1500,left: 'left',top: 'bottom',text: ['高', '低'],//取值范围的文字inRange: {color: ['#e0ffff', '#006edd']//取值范围的颜色},show: true//图注},geo: {map: 'china',roam: false,//不开启缩放和平移zoom: 1.23,//视角缩放比例label: {normal: {show: true,fontSize: '10',color: 'rgba(0,0,0,0.7)'}, emphasis: {textStyle: {color: '#fff'}}},itemStyle: {normal: {borderColor: 'rgba(0, 0, 0, 0.2)'},emphasis: {areaColor: '#F3B329',//鼠标选择区域颜色shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},series: [{name: '信息量',type: 'map',geoIndex: 0,data: dataList}]}let mychart = this.$echarts.init(document.getElementById('regionCharts'))console.log(mychart)mychart.setOption(option)this.$nextTick(() => {mychart.resize() // 这里是为了解决,tab刷新的时候,图表不刷新的问题。})}
}
代码到这里并没有结束。
当我打开我的页面时候,发现区域图并没有显示。
但此时图示已经生效了,说明我的写法和引用都是成功的。
在网上查找问题的时候,发现,说是如果使用的是中国地图,那么需要引入china.js.但china.js链接的地方是乱码的。
于是我看了一下我的插件下载包,想要碰运气看看,这个区域数据是否已经跟着echarts下载了。
果然被我找到了。那又该怎么使用呢。
首先回到main.js中去引入这个china.json的文件。
import china from 'echarts/map/json/china.json' // 引入json文件
echarts.registerMap('china', china) // 在echarts中注册使用这个文件
再次查看页面效果:
这就出来啦!
下面贴下完整的代码图;
main.js
html 组件
html 组件 JS部分
echarts实现中国地图区域分布图 vue + echarts相关推荐
- Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换 首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
- vue - vue使用echarts实现中国地图和点击省份进行查看
文章目录 1,实现的效果和功能 2,安装ECharts 3,main.js里面引入echarts 4,实现如下 5,遇到的问题 6,用到的模拟数据 1,实现的效果和功能 vue使用echarts实现中 ...
- vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...
- vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
- Vue+Echarts实现中国地图+各省业务数据分布情况组件
Vue组件首先需要引入echarts包和中国地图数据, import echarts from 'echarts' import '../../../node_modules/echarts/map/ ...
- vue项目使用ECharts的中国地图,设置地图不同板块的颜色以及动态显示效果
本篇讲述在vue中使用echarts的中国地图,以及对不同板块进行渐变色的设置. 效果图如下: 实现上图效果步骤如下: 确保项目中下载了echarts,然后在main.js中引用echarts imp ...
- echarts初始化中国地图(Map)
echarts初始化中国地图 vue 中可以直接使用,修改文件地址即可 更多echarts例子 1.http://www.ppchart.com/#/ 2.https://www.isqqw.com/ ...
- Echarts实现——中国地图
Echarts实现--中国地图 如下图: 使用Echarts进行地图绘制展示的时候,需要china.json: 举例在vue的项目中可以通过cnpm install echarts --save安装E ...
- 使用echarts配置中国地图
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
- echarts:中国地图实现
安装 npm install echarts --save 把chinaMap对应的js文件放到echarts目录下面,保证引用路径的正确性. 直接用npm install的map文件似乎用不了,可以 ...
最新文章
- C语言输出素数简单,for语句计算输出10000以内最大素数怎么搞最简单??各位大神们...
- sublime配置运行python文件的快捷键
- java路线_2021年Java学习路线图—精心整理
- black:你的Python代码有点丑
- 完全二叉树每层元素的查找
- 每天一道LeetCode-----计算整型数二进制中1的个数/返回二进制翻转后的结果
- js函数提示 vscode_工欲善其事,必先利其器,VSCode高效插件
- dock怎么自定义_如何自定义和调整Mac的Dock
- ref的mysql_ref:Mysql授权远程登陆
- zsh 使用通配符功能
- MySql实现远程连接
- hadoop的伪分布环境配置(2.5.2)
- Java网络编程从入门到精通(15):为什么要使用SocketAddress来管理网络地址
- 一行命令搞定node.js 版本升级
- 多核Cache一致性 伪共享 atomic的实现和cache相关的部分
- Zint生成多种条码及二维码
- JMeter-接口测试
- 微信小程序体验版、正式版的发布流程
- 研究了那么多内容后,我们打算推荐这些公众号给你
- windows的mysql无密码登录,windows mysql 跳过登录密码重置