vue 开发数据可视化地图

vue 项目：

 安装 axios：

npm install axios -D

 安装 echarts

npm install echarts@4.9.0 -D

其中，@+版本号！

当然，npm 的安装方式请自行某度！
同时推荐 cnpm：
（使用淘宝镜像）
npm install -g cnpm -registry=https://registry.npm.taobao.org
然后，
cnpm -v
检查是否安装成功。

阿里云数据可视化平台
用于下载 json api
不多说，直接上代码：

<template><div class="map"><div id="myChartChina" :style="{ width: '80%', height: '80%' }"></div></div></template><script>require("echarts/map/json/china.json");export default {props: {},data() {return {};},created() {},mounted(){this.drawLine()},methods: {drawLine() {var myChartContainer = document.getElementById("myChartChina"); //绑定div容器var resizeMyChartContainer = function () {myChartContainer.style.width = 100 + "%";myChartContainer.style.height = window.innerHeight * 0.7 + "px";};resizeMyChartContainer();var myChartChina = this.$echarts.init(myChartContainer);function randomData() {return Math.round(Math.random() * 500);}// 绘制图表var optionMap = {tooltip: {trigger: "item",},//左侧小导航图标visualMap: {show: false,x: "left",y: "center",//改变地图区域颜色splitList: [{ start: 500, end: 600 },{ start: 400, end: 500 },{ start: 300, end: 400 },{ start: 200, end: 300 },{ start: 100, end: 200 },{ start: 0, end: 100 },],color: ["#ffff00","#0e94eb","#70bcf0","#f0f26c","#00cd00","#eff26f",],},//配置属性series: [{name: "数据",type: "map",mapType: "china",roam: false,label: {normal: {show: false, //省份名称},emphasis: {show: false,},},data: [{ name: "北京", value: "100" },{ 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.onresize = function () {resizeMyChartContainer();myChartChina.resize();};},}};</script>

实现案例如下图所示：

参考优秀博客

记录下在使用踩过的坑，
由于自己是个火狐控，发现在 vue 编译出来的页面中无法显示 map，
经过某度的查询，发现只有谷歌浏览器支持！
（怪不得谷歌浏览器的用户总量高居不下！）
为了坚持初心！

安装babel-polyfill

npm install --save babel-polyfill

import  'babel-polyfill'
require("babel-polyfill");

用于使用webpack构建的项目,加入到webpack配置文件(webpack.config.js)entry项中重新执行构建命令，在低版本的浏览器中就可以正常打开页面了。

module.exports = {entry: ["babel-polyfill", "./app/js"]
};

补充：

babel-polyfill

Babel是一个转码器，可以将ES6代码转为ES5代码，而不用考虑环境支持的问题。默认只转换语法,而不
转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill

补充：
对于 vue 中路由及页面跳转问题，
深思了很长时间，但是，就官方文档来看，并没有找到一些灵活性的调用方法，
故此，在这里补充强调一下，加深自己印象的同时，给需要的同志一点灵感。所以，下文所述，各位权当是鄙人的抛砖引玉，如有更好的解决方案，欢迎斧正，鄙人将感激不尽！
分三次试验过程:

第一次:

 <router-link to="/pages/me/me"><button type="warn">进入我的！</button>
</router-link>

此时的页面呈现如下图所示：

跳转的话没什么问题，美中不足的是，下面多了个下划线，非常影响页面的整体美观性，于是，有了第二次尝试：

<button type="warn">进入我的！<router-link to="/pages/me/me"></router-link>
</button>

此时按钮上的下划线被抹去了

呜呜呜呜，没法进行页面跳转了…(ノへ￣、)
然后，就有了第三次：

<button type="default" @click="upPage">打开top页面
</button>

不出各位所料，成功了！
但是，要注意的是：此时，要写一个methods 方法，

upPage() {this.$router.replace({path: '/pages/top/top'
});

大功告成！！！

add（）{/* 关于毛玻璃的处理 */.cssfilter: blur(10px);-webkit-filter: blur(10px);-moz-filter: blur(10px);-ms-filter: blur(10px);-o-filter: blur(10px);
}

vue 开发数据可视化地图相关推荐

毕业设计之基于Vue的数据可视化平台
真正的大师,永远都怀着一颗学徒的心! 一.项目简介今天说的这个软件是一款基于Vue的数据可视化平台,后端采用的是go语言. 二.实现功能布局与缩放拖拽旋转刻度尺吸附图表(柱状图.折线图. ...
基于Vue的数据可视化设计框架，数据大屏可视化编辑器
开发文档(★★★★★) 请访问 https://lizhensheng.github.io/vue-data-view/ 完整代码下载地址:基于Vue的数据可视化设计框架,数据大屏可视化编辑器简介 ...
Vue+Echarts数据可视化(面积图)
Vue+Echarts数据可视化(面积图) 最近公司开发需要使用Echarts来进行数据展示,稍微记录一下.先看效果图: 话不多说,直接上代码: 1.使用npm下载安装Echarts依赖(下载速度慢可 ...
Vue+ECharts实现可视化地图
Apache ECharts 一个基于 JavaScript 的开源可视化图表库,提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数 ...
基于vue+echarts 数据可视化大屏展示[附源码]
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您 ...
自开发数据可视化平台
自开发数据可视化平台,目前只是一个简单的Demo版. 可以动态的设置数据源,动态绑定字段, 目前自适应布局逻辑还没想出来,是通过代码写死在实现过程中遇到的难点和亮点工作 1.Combobox自定义搜 ...
Django开发数据可视化大屏-JS绘制大屏动态背景-（视图模板制作）
查看本文前请先查看 Django开发数据可视化大屏-项目启动配置通过前面的文章,我们已经创建了一个Django简单项目,并且做了相关的配置,今天我们来制作视图模板,通过JS绘制3D动态背景效果. 我 ...
pyecharts实践--2019-nCoV疫情数据可视化地图（实时更新）
2019-nCoV疫情数据可视化地图效果如下: 获取数据(本文数据获取自腾讯的疫情实时追踪) 腾讯的疫情实时追踪网页: 点击查看. 这里我使用的是Google,追踪得到的数据如下图: 双击左边的 ge ...
使用Vue实现数据可视化大屏功能(二)
引入数据大屏相关组件用Datav插件做大屏可视化的组件,官网地址 http://datav.jiaminghi.com/ ,整个组件库都是基于Vue React版本实现,主要用于构建大屏数据可视 ...

vue 开发数据可视化地图

vue 开发数据可视化地图相关推荐

最新文章

热门文章