第一题
题目
- 使用Vue完成简易购物车案例
思路
1.引入vue.js框架
2.设置一个div块，用来挂载Vue
3.在div块中，用table表格标签做表格，表头写死，表数据使用v-for遍历Vue挂载的数据；价格为浮点数，要采用过滤器的方式解决；表格下再写一个div块来放置总价格，设置其样式左外边距和上外边距
4.初始化Vue框架，挂载div块
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="car">
<table border="1px" width="80%" height="450px" cellspacing="0px" align="center" >
<!--表头-->
<tr style='font-size: 28px; font-family: "楷体"; color: lightblue; background-color: dimgray'>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<!--遍历books,取得每个book的name等数据-->
<tr v-for="(book, index) in books" align="center" style="font-weight: bold; font-size: 18px">
<td>{{index + 1}}</td>
<td>{{book.name}}</td>
<td>{{book.date}}</td>
<td>￥{{book.price | numFilter}}</td>
<td>
<!-- :disabled设置当数量为1时减变灰； @click绑定减数量操作-->
<input type="button" :disabled="book.num === 1" @click="deleteNum(index)" value="-">
{{book.num}}
<input type="button" @click="addNum(index)" value="+">
</td>
<td>
<input type="button" value="移除" @click="deleteItem(index)" style="width: 50%; height: 50%; font-size: 18px">
</td>
</tr>
</table>
<!--总价格-->
<div style="margin-left: 10%; margin-top:30px; font-size: 32px; font-weight: bold;">
总价格：￥{{totalPrice | numFilter}}
</div>
</div>
</body>
<script>
new Vue({
el:"#car", // 挂载
data: { // 数据
books:[
{name:"《java编程思想》", date: "2020-9", price: 98.00, num: 1},
{name:"《数据分析与数据原理》", date: "2019-2", price: 39.00, num: 1},
{name:"《Hadoop权威指南》", date: "2019-10", price: 59.00, num: 1},
{name:"《代码大全》", date: "2018-9", price: 128.00, num: 1}
],
totalPrice:0.00
},
methods:{
// 总价格计算
priceCount:function () {
this.totalPrice = 0.00;
for(var book of this.books){
this.totalPrice += book.num * book.price
}
},
// 移除书籍
deleteItem:function (index) {
this.books.splice(index, 1);
this.priceCount()
},
// 减数量
deleteNum:function (index) {
(this.books)[index].num -= 1;
this.priceCount()
},
// 加数量
addNum:function (index) {
(this.books)[index].num += 1;
this.priceCount()
}
},
// 挂载后执行，初始化总价格
mounted(){
this.priceCount()
},
// 过滤器
filters:{
numFilter(value){
// 截取当前数据到小数点后两位
let realVal = parseFloat(value).toFixed(2);
return realVal
}
}
})
</script>
</html>
第二题
题目
-
签到点亮地图案例
-
需求: 使用echart 完成 微博点亮中国案例,效果如下图
-
分析
1.使用echarts 和 china.js完成地图绘制
2.坐标数据请加载weibo.json 坐标数据
(weibo.json 是第三方提供的坐标信息. 作用是给地图上添加光点. 如上图中的光点是有weibo.json 中的坐标组成的.
weibo.json 中包含 [[json数据,用于展示明暗变化较弱数据],[json数据,用于展示明暗变化稍强数据],[json数据,用于展示较强明暗变化数据]].
使用方式提示:
异步请求加载weibo.json数据,回调函数获取坐标数据 ,Data函数是明暗坐标变化数据, 需要调用3次
Data = function (index) {
data = weiboData[index];
var px = data[0] / 1000;
var py = data[1] / 1000;
var res = [[px, py]];
for (var i = 2; i < data.length; i += 2) {
var dx = data[i] / 1000;
var dy = data[i + 1] / 1000;
var x = px + dx;
var y = py + dy;
res.push([x, y, 1]);
px = x;
py = y;
}
return res;
在 series: [{ … data: Data(0) , …data: Data(1) , …data(2) }] 调用3次 , 用于一次从暗到明亮展示点亮地图.
3.ajax请求采用jQuery方式异步加载
ajax异步加载的时候使用 live server 运行
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>签到点亮地图</title>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<div id="map" style="width:100%; height: 600px; "></div>
<script>
$(function () { // 页面加载
var onChart = null;
onChart = new echarts.init(document.getElementById("map")); // 初始化echarts
load_data(); // 调用方法
function load_data() {
onChart.showLoading("loading...");
$.ajax({ // jQuery的ajax请求
url:"data/weibo.json", // 请求地址
type:"GET", // 请求方式
dataType:"json", // 数据类型
success:function (weiboData) { // 请求成功后的回调函数
onChart.hideLoading("loading...");
Data = function (index) { // 计算得出相对应强、中、弱的点的分布
data = weiboData[index];
var px = data[0] / 1000;
var py = data[1] / 1000;
var res = [[px, py]];
for (var i = 2; i < data.length; i += 2) {
var dx = data[i] / 1000;
var dy = data[i + 1] / 1000;
var x = px + dx;
var y = py + dy;
res.push([x, y, 1]);
px = x;
py = y;
}
return res;
};
onChart.setOption(option = {
backgroundColor: '#404a59',
title : { // 标题
text: '微博签到数据点亮中国', // 标题名称
subtext: 'From ThinkGIS', // 副标题名称
sublink: 'http://www.thinkgis.cn/public/sina', // 副标题链接
left: 'center', // 图例组件离容器左侧的距离,居中
top: 'top', // 图例组件离容器左侧的距离,居上
textStyle: { // 文字样式
color: '#fff'
}
},
tooltip: {},
legend: { // 图例组件,展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
left: 'left', // 图例组件离容器左侧的距离,居左
data: ['强', '中', '弱'],
textStyle: { // 文字样式
color: '#ccc'
}
},
geo: { // 地理坐标系组件,用于地图的绘制，支持在地理坐标系上绘制散点图，线集
map: 'china', // 地图国家
roam: true, // 开启鼠标缩放(scale)和平移漫游(move), true表示两者都开
emphasis: { // 高亮状态下的多边形和标签样式
label: {
show: false // 是否显示标签
},
itemStyle: {
areaColor: '#2a333d' // 地图区域的颜色
}
},
itemStyle: {
areaColor: '#323c48', // 地图区域背景色
borderColor: '#111' // 区域分界线颜色
}
},
series: [{
name: '弱', // 系列名称，用于tooltip的显示，legend 的图例筛选
type: 'scatter', // 散点（气泡）图
coordinateSystem: 'geo', // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件
symbolSize: 1, // 标记的大小, 标记symbol默认为circle
large: true, // 是否开启大数据量优化，在数据图形特别多而出现卡顿时候可以开启
itemStyle: { // 图形样式,即circle的样式设置
shadowBlur: 2, // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
shadowColor: 'rgba(37, 140, 249, 0.8)', // 阴影颜色
color: 'rgba(37, 140, 249, 0.8)' // 图形的颜色
},
data: Data(0) // 数据
}, {
name: '中',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 1,
large: true,
itemStyle: {
shadowBlur: 2,
shadowColor: 'rgba(14, 241, 242, 0.8)',
color: 'rgba(14, 241, 242, 0.8)'
},
data: Data(1)
}, {
name: '强',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 1,
large: true,
itemStyle: {
shadowBlur: 2,
shadowColor: 'rgba(255, 255, 255, 0.8)',
color: 'rgba(255, 255, 255, 0.8)'
},
data: Data(2)
}]
});
}
});
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
