百里屠苏top

摘要： 一、高德开放平台 官网：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 阅读全文