随笔分类 - 8-可视化大屏展示
1
摘要：1.缩放控件 // 添加工具条控件 缩放控件 const toolbar = new AMap.ToolBar({ position: { top: 'auto', right: '10px', left: 'auto', bottom: '30px' } }); map.addControl(to
阅读全文
摘要：官方文档：https://lbs.amap.com/api/javascript-api-v2/tutorails/display-a-layer 1.1 创建图层 const layer = new AMap.createDefaultLayer({ zooms: [3, 20], //可见级别
阅读全文
摘要：基于之前的可视化项目，优化地图模块。 1. 新建mapcontainer.vuewen文件，并在modelThird.vue 中引入和挂载 2.安装Loader npm i @amap/amap-jsapi-loader --save 3.在mapcontainer.vue 中写入代码 <scrip
阅读全文
摘要：一、高德开放平台 官网：https://lbs.amap.com/ 1. 登录 可以用淘宝、QQ等直接登录。 2.打开控制台 3.创建新应用 4.添加key 二、在普通网页中测试地图 1.进入JS API 2.准备 3.快速上手 1）准备key和密钥（按前面的创建应用添加key） 2) HTML 页
阅读全文
摘要：一、地图上添加动画及箭头 <script setup> import { ref, onMounted } from 'vue'; import * as echarts from 'echarts'; import chinaMap from '../../assets/china1.json';
阅读全文
摘要：一、地图的引入 1.下载地图文件 https://datav.aliyun.com/portal/school/atlas/area_selector 2.新建mapchart.vue文件，并写入代码。 <script setup> import { ref,reactive,onMounted}
阅读全文
摘要：一、模块4（测试路段） 1. 新建一个piechart.vue <template> <div ref="chart" style="width: 230px;height:230px;"></div> </template> <script> import * as echarts from 'e
阅读全文
摘要：一、玫瑰饼图 1.新建组件rosechart.vue 2.写入代码： <script setup> import { ref,reactive,onMounted} from 'vue'; import * as echarts from 'echarts'; const chart = ref()
阅读全文
摘要：一、水位图 1.dataV 官网引入水位图 https://datav-vue3.netlify.app/Guide/Guide.html 2.在waterpond.vue中编写水位图的代码 3. 在modelThird引入waterpond.vue 效果： 4.美化一下水位图 在waterpond
阅读全文
摘要：一、轮播表 第一步：打开 datav-vue3官网：https://datav-vue3.netlify.app/Guide/Guide.html 第二步：在echart文件夹下创建scrollboard.vue 文件 第三步：在scrollboard.vue中写入代码（从datav-vue3官网粘
阅读全文
摘要：一、modelSecond 部分 图表引入 1.1Echarts 第一步：创建一个放图表的文件夹 第二步：创建一个柱状图barchart组件 第三步：安装，导入echarts npm install echarts npm install echarts --save Echarts 官网：http
阅读全文
摘要：一、modelFirst 完整代码： <script setup> import { ref } from 'vue'; const modelfirstList = ref([ { title: "爬山", num: 4, unit: "座" }, { title: "徒步", num: 60,
阅读全文
摘要：一、主体部分结构 分析一下： 在index.vue 中， 完整代码： <script setup> import modelTitle from './modelTitle.vue'; import modelFirst from './modelFirst.vue'; import modelSe
阅读全文
摘要：一、头部 在modelTitle.vue 中 完整代码： <script setup> </script> <template> <div class="box-head"> <dv-decoration8 style="width:300px;height:50px;" /> <div class
阅读全文
摘要：一、项目模块划分 做类似这样的显示屏。 1.1 添加背景 背景一般是深色的纯色、渐变色或者背景图片。 效果： 1.2 模块划分 在index.vue中引入刚创建的几个模块： 修改一下字体颜色： 效果：
阅读全文
摘要：一、DataV-Vue3 1.1 安装 官网：https://datav-vue3.netlify.app/Guide/Guide.html npm install @kjgl77/datav-vue3 1.2 引入 // main.js中全局引入 // main.js中全局引入 import {
阅读全文
摘要：一、Flex 弹性盒子布局（一维布局） <script setup> </script> <template> <div> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="
阅读全文
摘要：1.布局 美工去做设计 1.1中心环绕布局 1.2左右布局： 1.3上下布局： 2.响应式布局 3.自适应布局 4.可以自定义CSS样式。 然后在main.js文件中引用
阅读全文
摘要：1.创建views文件夹，然后在文件夹下创建index.vue 第二步：在index.js 中 第三步：在APP .vue 中 结果：
阅读全文
摘要：一、DataV-Vue3 1.1 安装 官网：https://datav-vue3.netlify.app/Guide/Guide.html npm install @kjgl77/datav-vue3 一、vite3构建Vue3项目 1.1 什么是Vite 1.2创建vite3项目 第一步：新建一
阅读全文
1
浙公网安备 33010602011771号