vue接入DataV

1.搭建vue相关环境，这里不做赘述

2.打开vue项目，并在项目中安装DataV

npm install @jiaminghi/data-view

3.在main.js中做相关引入

import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

4.新建页面测试组件

<template>
<div>
<!-- <dv-border-box-1> </dv-border-box-1> --><divid="map":style="{width: '100%',height: '1000px',marginTop: '10px',}"></div> <dv-flyline-chart-enhanced :config="config" style="width:100%;height:800px;" />
</div>
</template><script>
import china from "@/assets/json/china.json"; //引入地图json文件
import mapjpg from "@/assets/img/map.jpg"; //引入地图json文件
export default {mounted() {this.initChart();},props: {mapData: {//接收父组件传过来的值type: Object,default: () => ({mapArr:[{name:"北京市",value:123,ratio:50},{name:"天津市",value:123,ratio:50},{name:"河北省",value:123,ratio:50},{name:"山西省",value:123,ratio:50},{name:"内蒙古自治区",value:123,ratio:50},{name:"辽宁省",value:123,ratio:50},{name:"吉林省",value:123,ratio:50},{name:"黑龙江省",value:123,ratio:50},{name:"上海市",value:123,ratio:50},{name:"江苏省",value:123,ratio:50},{name:"浙江省",value:123,ratio:50},{name:"安徽省",value:123,ratio:50},{name:"福建省",value:123,ratio:50},{name:"江西省",value:123,ratio:50},{name:"山东省",value:123,ratio:50},{name:"河南省",value:123,ratio:50},{name:"湖北省",value:123,ratio:50},{name:"湖南省",value:123,ratio:50},{name:"广东省",value:123,ratio:50},{name:"广西壮族自治区",value:123,ratio:50},{name:"海南省",value:123,ratio:50},{name:"重庆市",value:123,ratio:50},{name:"四川省",value:123,ratio:50},{name:"贵州省",value:123,ratio:50},{name:"云南省",value:123,ratio:50},{name:"西藏自治区",value:123,ratio:50},{name:"陕西省",value:123,ratio:50},{name:"甘肃省",value:123,ratio:50},{name:"青海省",value:123,ratio:50},{name:"宁夏回族自治区",value:123,ratio:50},{name:"新疆维吾尔自治区",value:123,ratio:50},{name:"台湾省",value:123,ratio:50},{name:"香港特别行政区",value:123,ratio:50},{name:"澳门特别行政区",value:123,ratio:50},{name:"南沙诸岛",value:123,ratio:50},],})}},data() {return {options: {},chart: null,config: {points: [{name: "郑州",coordinate: [0.48, 0.35]},{name: "新乡",coordinate: [0.52, 0.23]},{name: "焦作",coordinate: [0.43, 0.29]},{name: "开封",coordinate: [0.59, 0.35]},{name: "许昌",coordinate: [0.53, 0.47]},{name: "平顶山",coordinate: [0.45, 0.54]},{name: "洛阳",coordinate: [0.36, 0.38]},{name: "周口",coordinate: [0.62, 0.55]},{name: "漯河",coordinate: [0.56, 0.56]},{name: "南阳",coordinate: [0.37, 0.66]},{name: "信阳",coordinate: [0.55, 0.81]},{name: "驻马店",coordinate: [0.55, 0.67]},{name: "济源",coordinate: [0.37, 0.29]},{name: "三门峡",coordinate: [0.2, 0.36]},{name: "商丘",coordinate: [0.76, 0.41]},{name: "鹤壁",coordinate: [0.59, 0.18]},{name: "濮阳",coordinate: [0.68, 0.17]},{name: "安阳",coordinate: [0.59, 0.1]}],lines: [{source: "新乡",target: "郑州"},{source: "焦作",target: "郑州"},{source: "开封",target: "郑州"},{source: "许昌",target: "郑州"},{source: "平顶山",target: "郑州"},{source: "洛阳",target: "郑州"},{source: "周口",target: "郑州"},{source: "漯河",target: "郑州"},{source: "南阳",target: "郑州"},{source: "信阳",target: "郑州"},{source: "驻马店",target: "郑州"},{source: "济源",target: "郑州"},{source: "三门峡",target: "郑州"},{source: "商丘",target: "郑州"},{source: "鹤壁",target: "郑州"},{source: "濮阳",target: "郑州"},{source: "安阳",target: "郑州"}],bgImgSrc: mapjpg}};},methods: {// 地图initChart() {this.echarts.registerMap("china",china); //echarts的map需要注册，根据引入的json文件名，并定义map的名称this.chart = this.echarts.init(document.getElementById("map"), null, {renderer: "svg"}); //init()挂载在某个元素，所以还需要在mounted调用， { renderer: "svg" } 将原来的canvas绘图改为svg 清晰度更高this.drawMap();},drawMap() {this.chart.setOption({title: {text: "平台运营实时数据",textStyle: {color: "balck",fontSize: 28}},tooltip: {//鼠标移入的提示信息框show: true,trigger: "item",formatter: function(a, b) {console.log(a)// 将人数改千分位let a2 = "";let olda = Number(a["data"].value);if (olda >= 0) {a2 = olda;if (olda > 999) {let parts = olda.toString().split(".");parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");a2 = parts.join(".");}}// 日活兼容let a3 = a["data"].ratio ? a["data"].ratio : 0;let a1 = a["name"];if (a1 == "台湾省" && !a2) {// 台湾省显示暂无数据return `${a1}<br/> 暂无数据`;}return `${a1}<br/>累计注册: ${a2}  <br/>日活: ${a3} %`;}},series: [{type: "map",map: "china", //对应registerMap() 对应的名称top: "150", //调整地图在页面的位置zoom: 1.3, //缩放比例emphasis: {label: { show: false },itemStyle: {areaColor: "rgba(136, 132, 216)"}},itemStyle: {borderColor: "#fff"},data: this.mapData.mapArr //有数据才显示颜色}],visualMap: {show: true,type: "continuous",calculable: true,orient: "horizontal",textStyle: {color: "#fff"},min: 0,max: 10000000,text: ["累计注册/人", ""],color: ["#df3d20", "#fff"],inRange: {// color: [ "#fff","#44effb", "#3399ff","#2b8afe", "#006699"],color: ["#44effb", "#3399ff", "#2b8afe", "#006699"] //地图颜色}}},true);}},
};
</script><style></style>

5.参考链接获取china.json==》https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.84139930209406&lng=117.33123779296875&zoom=9飞线图==》http://datav.jiaminghi.com/guide/flylineChartEnhanced.html#%E7%81%B5%E6%B4%BB%E9%85%8D%E7%BD%AE

vue接入DataV相关推荐

vue接入下载文件接口
vue接入下载文件接口后端接口返回字节数组或者文件流返回下载的文件时,前端使用vue接入下载文件的方法如下: 前端部分 1.前端下载文件方法 // obj:后端返回的的字节数组或者文件流:name: ...
vue接入腾讯地图(二)【标注定位实战】
vue接入腾讯地图(一)[点击事件]请参考: https://blog.csdn.net/weixin_45628602/article/details/108401673 1.[标注] 添加标注 v ...
极验接入教程纯html,VUE接入腾讯验证码,极验验证码
VUE接入腾讯验证码,极验验证码安装 $ npm install vue-social-captcha -S 使用在 main.js 文件中引入插件并注册 # main.js import ca ...
vue接入腾讯位置服务之标注定位实战
[vue接入腾讯位置服务之点击事件],请参考: https://blog.csdn.net/weixin_45653125/article/details/108466146 1.[标注] 添加标注 ...
vue接入腾讯位置服务(二)【标注定位实战】
vue接入腾讯位置服务(一)[点击事件]请参考:https://blog.csdn.net/weixin_45653970/article/details/108511378 1.[标注] 添加标注 ...
vue 接入萤石云，实现监控、多窗口监控、转向、放大缩小等
准备资料:文档概述 · 萤石开放平台API文档 vue 萤石云视频监控对接_谭CV的博客-CSDN博客_萤石云vue 1.接入萤石云 npm i ezuikit npm i ezuikit-js@0. ...
ajax放大缩小,vue接入实时视频，并可以控制缩放与上下左右
效果图: 1.在大屏上的效果: 页面嵌入实时视频,可通过点击下面的按钮实现,摄像头拉进,缩小,上下左右等旋转动作 image.png 2.双击视频时候全屏的放大效果: image.png 步骤: 一. ...
HTML如何对视频缩放,vue接入实时视频，并可以控制缩放与上下左右
效果图: 1.在大屏上的效果: 页面嵌入实时视频,可通过点击下面的按钮实现,摄像头拉进,缩小,上下左右等旋转动作 image.png 2.双击视频时候全屏的放大效果: image.png 步骤: 一. ...
VUE使用DataV适应小屏或者方屏等各种类型的屏幕
DataV是阿里的可视化大屏插件,但是使用过程中发现,在小屏下的自适应效果差.这里提供一种解决方案,找到node_modules\@jiaminghi\data-view\lib\components ...
vue 接入 facebook 登录的方法（需要翻墙），使用vue-facebook-signin-button插件
tips:首先需要在facebook官网注册开发者账号,并创建应用,拿到应用编号appid facebook开发者登录平台 1.在index.html中加入这个 sdk, appid换成你的应用编号 ...

vue接入DataV

vue接入DataV相关推荐

最新文章

热门文章