vue 引入json地图_vue中echarts引入中国地图的案例
如下所示:
mounted() {
this.drawLine();
},
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()*500);
}
// 绘制图表
var optionMap = {
tooltip: {},
legend: {
orient: 'vertical',
left: 'left',
data:['']
},
visualMap: {
min: 0,
max: 1500,
left: '10%',
top: 'bottom',
text: ['高','低'],
calculable : true,
color:['#0b50b9','#c3e2f4']
},
selectedMode: 'single',
series : [
{
name: '',
type: 'map',
mapType: 'china',
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
showLegendSymbol: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
{name: '北京',value: randomData() },
{name: '天津',value: randomData() },
{name: '上海',value: randomData() },
{name: '重庆',value: randomData() },
{name: '河北',value: randomData() },
{name: '河南',value: randomData() },
{name: '云南',value: randomData() },
{name: '辽宁',value: randomData() },
{name: '黑龙江',value: randomData() },
{name: '湖南',value: randomData() },
{name: '安徽',value: randomData() },
{name: '山东',value: randomData() },
{name: '新疆',value: randomData() },
{name: '江苏',value: randomData() },
{name: '浙江',value: randomData() },
{name: '江西',value: randomData() },
{name: '湖北',value: randomData() },
{name: '广西',value: randomData() },
{name: '甘肃',value: randomData() },
{name: '山西',value: randomData() },
{name: '内蒙古',value: randomData() },
{name: '陕西',value: randomData() },
{name: '吉林',value: randomData() },
{name: '福建',value: randomData() },
{name: '贵州',value: randomData() },
{name: '广东',value: randomData() },
{name: '青海',value: randomData() },
{name: '西藏',value: randomData() },
{name: '四川',value: randomData() },
{name: '宁夏',value: randomData() },
{name: '海南',value: randomData() },
{name: '台湾',value: randomData() },
{name: '香港',value: randomData() },
{name: '澳门',value: randomData() }
]
}
]
}
myChartChina.setOption(optionMap);
window.οnresize=function(){
resizeMyChartContainer();
myChartChina.resize();
}
}
主要注意的一点在main.js里面:
除了引入echarts之外
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
// 还要特别引入china.json,这样中国地图才会出现,不然只会出现右下角的南海诸岛
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
补充知识:VUE中给template组件加背景
我就废话不多说了,大家还是直接看代码吧~
.index_background{ background: url('~@/../static/images/login-bg.png') center top no-repeat;}
以上这篇vue中echarts引入中国地图的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持龙方网络。
vue 引入json地图_vue中echarts引入中国地图的案例相关推荐
- echaer 地图_用echarts绘制中国地图
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
- 广西地图html插件,ECharts绘制中国地图、广西地图
准备工作:导入ECharts依赖.和地图需要的.js文件. 文件获取方式: 官网:url github:url (下载完后 :incubator-echarts-4.8.0mapjsprovince目 ...
- 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项目使用ECharts的中国地图,设置地图不同板块的颜色以及动态显示效果
本篇讲述在vue中使用echarts的中国地图,以及对不同板块进行渐变色的设置. 效果图如下: 实现上图效果步骤如下: 确保项目中下载了echarts,然后在main.js中引用echarts imp ...
- vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
- Echarts实现——中国地图
Echarts实现--中国地图 如下图: 使用Echarts进行地图绘制展示的时候,需要china.json: 举例在vue的项目中可以通过cnpm install echarts --save安装E ...
- echarts实现中国地图记录篇之2D,3D地图
目录 1.实现基础工具和echarts版本的踩坑 工具: 版本 -- echarts5.0+和5.0以下版本的差异: 2.实现平面2D地图 -- 有标记点和没有标记点,地图实现的方式不同 没有标记点的 ...
- echarts实现中国地图和各省市地图
echarts实现中国地图 我会把china.js和各省市的js以及json上传资源,有需要的可以下载 首先引入echarts.js和china.js <!DOCTYPE html> &l ...
最新文章
- 去除iphone图标的半弧高亮效果
- 基于向量空间的知识图谱查询及结果解释
- NumPy之array
- python快速入门答案-python快速入门基础知识
- php扫描蓝牙设备接口,微信硬件蓝牙扫描某个设备接口onScanWXDeviceResult
- 10丨 Redis主从同步与故障切换,有哪些坑
- 带有JAX-RS和PrimeFaces的RESTful图表
- Python PIP Mysql-python 报错 ERROR: Command errored out with exit status 1: python setup.py egg_info C
- 【SSH框架】之Spring系列(一)
- Hibernate Search v.4.2.0.CR1 发布
- 未能在sysindexes中找到数据库ID11中对象ID1的索引ID1对应的行,请对sysindexes运行
- cad看图软件看图软件哪个好?
- 医学人工智能读书会与黄智生教授简历(公号回复“医学AI读书会”下载PDF资料,欢迎转发、赞赏、支持科普)
- 【Numpy】1. n维数组,dtype,切片,索引
- 中学计算机论文题目,中学计算机相关论文题目 中学计算机论文标题如何定
- 李宏毅机器学习课程 思维导图
- 【Python 日志】
- php odbc informix,odbc php informix 问题求助
- 解决:ValueError: multi_class must be in (‘ovo‘, ‘ovr‘)
- NFC功能移植pn54x系列
热门文章
- java 适配器模式示例
- C语言简单实现计算一组数据中奇偶数个数
- Intellij Idea在引入Eclipse工程的时候,报unmapped spring configuration的解决办法
- navicat for mysql执行sql语句报错: [Err] 1146 - Table ‘performance_schema.session_status‘doesn‘t exist 解决办法
- Lucene DocValues详解
- 4600u黑苹果 r5_XPS13黑苹果体验之旅最后还是转了白苹果MBP2017
- Lightroom Classic 教程:如何在 Lightroom 中使用预设更改照片的外观?
- 基于区块链的隐私保护数据共享
- 在ros中使用opencv启动例程 rosrun robot_vision cv_bridge_test.py 遇到的问题
- JAVA:实现简单的人员管理系统