Skip to content

M
myblogVue_django

yma16 / myblogVue_django

通知 5
Star 1
Fork 0
M
myblogVue_django
提交 b607b035 编写于 作者: Y yma16
浏览文件
操作

feat:版本迭代ip->改变

上级 dadf534b
展开全部 隐藏空白更改
内联 并排
Showing with 2280 addition and 2034 deletion
config/index.js
浏览文件 @ b607b035
......@@ -82,4 +82,4 @@ module.exports = {
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
\ No newline at end of file
}
src/App.vue
浏览文件 @ b607b035
此差异已折叠。
src/comment/ArticleComment.vue
浏览文件 @ b607b035
......@@ -45,7 +45,8 @@ export default {
return {
noneMsg: "还没人评论>_<",
msg: "评论区",
baseurl: "http://yongma16.xyz/comment/",
baseurl: "http://114.116.52.53/comment/",
// baseurl: "http://yongma16.xyz/comment/",
userImg: "",
username: "匿名",
contentRes: [],
......
src/components/Article.vue
浏览文件 @ b607b035
此差异已折叠。
src/components/Bilicom.vue
浏览文件 @ b607b035
......@@ -11,18 +11,16 @@ export default {
name: 'Bilicom',
data () {
return {
baseurl: 'http://yongma16.xyz/article/index/',
msg: '内容',
md_data: [],
data: ['threejs加载模型'],
mychart: echarts.init(document.getElementById('bilicom'))
data: ['threejs加载模型']
}
},
methods: {
echartfunc: function (o) {
echartfunc: function () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('bilicom'))
var option = {
const myChart = echarts.init(document.getElementById('bilicom'))
const option = {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
title: {
......
src/components/Csslearn.vue
浏览文件 @ b607b035
......@@ -37,7 +37,8 @@ export default {
msg: "css练习：",
css_length: "",
// baseurl: 'http://127.0.0.1:1998',
baseurl: "http://yongma16.xyz",
baseurl: "http://114.116.52.53/",
// baseurl: "http://yongma16.xyz/",
css_title: [],
css_path: [],
css_loc: 0,
......@@ -89,7 +90,7 @@ export default {
let that = this;
axios
.get(that.baseurl + "/css/")
.get(that.baseurl + "css/")
.then((res) => {
console.log("get返回", res);
let getdata = res.data;
......@@ -126,7 +127,7 @@ export default {
};
</script>
<style scoped>
<style scoped>
.container {
position: relative;
display: flex;
......
src/components/Login.vue
浏览文件 @ b607b035
<template>
<div class="login" style="text-align: center;">
<el-card class="box-card" style="text-align: center;">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="text-align: center;margin:0 auto;">
<el-form-item><p style="font-size:30px">登录</p></el-form-item>
<div class="login" style="text-align: center">
<el-card class="box-card" style="text-align: center">
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
style="text-align: center; margin: 0 auto"
>
<el-form-item><p style="font-size: 30px">登录</p></el-form-item>
<el-form-item label="账号" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
<el-button @click="resetForm('ruleForm')">清空</el-button>
</el-form-item>
<el-form-item>
<el-link target="_blank" @click="$router.push({path: '/register'})">没有账号？</el-link>
<el-link type="primary" @click="$router.push({path: '/register'})">去注册</el-link>
</el-form-item>
</el-form>
</el-card>
<el-form-item label="账号" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input
type="password"
v-model="ruleForm.pass"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>登录</el-button
>
<el-button @click="resetForm('ruleForm')">清空</el-button>
</el-form-item>
<el-form-item>
<el-link target="_blank" @click="$router.push({ path: '/register' })"
>没有账号？</el-link
>
<el-link type="primary" @click="$router.push({ path: '/register' })"
>去注册</el-link
>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
......@@ -68,59 +84,56 @@ export default {
// };
return {
// baseurl:"http://127.0.0.1/user/login/",
baseurl: 'http://yongma16.xyz/user/login/',
baseurl: 'http://114.116.52.53/',
// baseurl: 'http://yongma16.xyz/user/login/',
ruleForm: {
pass: '',
// checkPass: '',
name: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass, trigger: 'blur' }
],
name: [
{ validator: checkName, trigger: 'blur' }
]
pass: [{ validator: validatePass, trigger: 'blur' }],
checkPass: [{ validator: validatePass, trigger: 'blur' }],
name: [{ validator: checkName, trigger: 'blur' }]
}
}
},
methods: {
submitForm (formName) {
const that = this // this指向
this.$refs[formName].validate((valid) => {
if (valid) {
// 提交数据
let that = this// this指向
console.log(this.ruleForm.name, this.ruleForm.pass)
console.log(that.ruleForm.name, that.ruleForm.pass)
// axios提交数据 post
const loginUrl = that.baseurl
const userInfo={
const loginUrl = that.baseurl + 'user/login/'
const userInfo = {
name: that.ruleForm.name,
password: that.ruleForm.pass
}
axios.post(loginUrl, userInfo).then(res => {
// alter('提交中');
console.log(res.data)
if (res.data.code == 1) {
localStorage.setItem("yma16siteUserInfoName", userInfo.name)
localStorage.setItem("yma16siteUserInfoPwd", userInfo.password)
store.commit('setUserInfo',userInfo)//store信息
console.log('return login success!')
document.cookie = `user=${that.ruleForm.name}`
that.$router.push({path: '/'})
// 添加cookie
} else if (res.data.code == 0) {
// alter("失败！")
console.log('失败', res)
}
// that.$cookies.set('')
}).catch(res => {
console.log('post失败')
console.log(res)
})
axios
.post(loginUrl, userInfo)
.then((res) => {
// alter('提交中');
console.log(res.data)
if (res.data.code == 1) {
localStorage.setItem('yma16siteUserInfoName', userInfo.name)
localStorage.setItem('yma16siteUserInfoPwd', userInfo.password)
store.commit('setUserInfo', userInfo) // store信息
console.log('return login success!')
document.cookie = `user=${that.ruleForm.name}`
that.$router.push({ path: '/' })
// 添加cookie
} else if (res.data.code == 0) {
// alter("失败！")
console.log('失败', res)
}
// that.$cookies.set('')
})
.catch((res) => {
console.log('post失败')
console.log(res)
})
} else {
alert('请输入账号密码')
console.log('请输入账号密码')
......@@ -136,41 +149,40 @@ export default {
</script>
<style scoped>
.login{
.login {
position: relative;
width:100%;
width: 100%;
height: auto;
}
.left{
.left {
position: relative;
margin-top:50px;
left:50%;
top:50%;
transform: translate(-50%,-50%);
margin-top: 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.text {
align-content: center;
display: flex;
margin: 0 auto;
font-size: 14px;
}
.text {
align-content: center;
display:flex;
margin: 0 auto;
font-size: 14px;
}
.item {
display:flex;
margin: 0 auto;
/* width: 50%; */
}
.item {
display: flex;
margin: 0 auto;
/* width: 50%; */
}
.box-card {
align-self: center;
align-content: center;
display:flex;
width: 450px;
/* padding-left:25%; */
margin:0 auto;
opacity: 1;
margin-top:80px;
background-color: #ffffff;
}
.box-card {
align-self: center;
align-content: center;
display: flex;
width: 450px;
/* padding-left:25%; */
margin: 0 auto;
opacity: 1;
margin-top: 80px;
background-color: #ffffff;
}
</style>
src/components/Mavoneditor.vue
浏览文件 @ b607b035
<template>
<div class="mavoneditor">
<div class="markdown-body" style="width:100%;height:100%;overflow:hidden;">
<iframe src='http://yongma16.xyz/admin/' style="width:100%;height:100%;border:none;"></iframe>
<div
class="markdown-body"
style="width: 100%; height: 100%; overflow: hidden"
>
<iframe
:src="baseurl + basePath"
style="width: 100%; height: 100%; border: none"
></iframe>
</div>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown'
import axios from 'axios'
import VueMarkdown from "vue-markdown";
import axios from "axios";
export default {
components: {
VueMarkdown
VueMarkdown,
},
name: 'Mavoneditor',
data () {
name: "Mavoneditor",
data() {
return {
baseurl: 'http://yongma16.xyz/admin/',
md_data: []
}
baseurl: "http://114.116.52.53/",
basePath: "admin/",
// baseurl: 'http://yongma16.xyz/',
md_data: [],
};
},
methods: {
getArticles: function () {
let that = this
let that = this;
axios
.get(that.baseurl)
.get(that.baseurl + "admin/")
.then((res) => {
console.log('获取Article=>')
console.log("获取Article=>");
// console.log(res.data.article);
// let run_array=res.data.article.map(o=>{return that.data.md_data.push(o);}); //获取参数article
// console.log(that.data.md_data);
that.md_data = res.data.article
that.md_data = res.data.article;
})
.catch((res) => {
console.log(res)
}) // get log
}
console.log(res);
}); // get log
},
},
created () {
try{
console.log('domMain',document.getElementById('mainappid'),document.getElementById('mainappid').style);
document.getElementById('mainappid').style.padding='0';
document.getElementById('mainappid').style.margin='0';
}catch(e){
console.log('e',e)
created() {
try {
console.log(
"domMain",
document.getElementById("mainappid"),
document.getElementById("mainappid").style
);
document.getElementById("mainappid").style.padding = "0";
document.getElementById("mainappid").style.margin = "0";
} catch (e) {
console.log("e", e);
throw Error(e);
}
let that = this
console.log('测试created！')
axios
.get(that.baseurl)
.then((res) => {
console.log('获取Article')
// console.log(res,res.data,res.data.msg);
that.md_data.push(res.data.article) // markdown值传递
})
.catch((res) => {
console.log(res)
}) // get log
}
}
// let that = this;
// console.log("测试created！");
// axios
// .get(that.baseurl + "admin/")
// .then((res) => {
// console.log("获取Article");
// // console.log(res,res.data,res.data.msg);
//
// that.md_data.push(res.data.article); // markdown值传递
// })
// .catch((res) => {
// console.log(res);
// }); // get log
},
};
</script>
<style scoped>
.mavoneditor{
width:100%;
height:100%;
.mavoneditor {
width: 100%;
height: 100%;
}
</style>
src/components/Onlinewebsocket.vue
浏览文件 @ b607b035
此差异已折叠。
src/components/Register.vue
浏览文件 @ b607b035
<template>
<div class="register" style="text-align: center; margin: 0 auto">
<div class="register" style="text-align: center; margin: 0 auto">
<el-card class="box-card" style="text-align: center; margin: 60px auto">
<!-- 弹出一个警告框 -->
<!-- 弹出一个警告框 -->
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="text-align: center; margin: 0 auto">
<el-form-item>
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
style="text-align: center; margin: 0 auto"
>
<el-form-item>
<!-- 弹出一个警告框 -->
<el-alert
title="这个用户名已经被使用！"
type="warning"
v-if="register_error"
>
</el-alert>
<!-- 成功注册！ -->
<!-- 弹出一个警告框 -->
<el-alert title="这个用户名已经被使用！" type="warning" v-if='register_error'>
</el-alert>
<!-- 成功注册！ -->
<el-alert title="欢迎！！！" type="success" v-if='register_success'>
</el-alert>
<p style="font-size: 30px">注册</p>
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
<!-- <svg
<el-alert title="欢迎！！！" type="success" v-if="register_success">
</el-alert>
<p style="font-size: 30px">注册</p>
<el-avatar
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
></el-avatar>
<!-- <svg
class="icon"
aria-hidden="true"
>
<use xlink:href="#iconshejitouxiangai"></use>
</svg> -->
</el-form-item>
</el-form-item>
<el-form-item label="账号" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="账号" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
<el-button @click="resetForm('ruleForm')">清空</el-button>
</el-form-item>
<el-form-item>
<el-link target="_blank" @click="$router.push({path: '/login'})">已有账号？</el-link>
<el-link type="primary" @click="$router.push({path: '/login'})">去登录</el-link>
</el-form-item>
</el-form>
<el-form-item label="密码" prop="pass">
<el-input
type="password"
v-model="ruleForm.pass"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="确认" prop="checkPass">
<el-input
type="password"
v-model="ruleForm.checkPass"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>注册</el-button
>
<el-button @click="resetForm('ruleForm')">清空</el-button>
</el-form-item>
<el-form-item>
<el-link target="_blank" @click="$router.push({ path: '/login' })"
>已有账号？</el-link
>
<el-link type="primary" @click="$router.push({ path: '/login' })"
>去登录</el-link
>
</el-form-item>
</el-form>
</el-card>
</div>
</div>
</template>
<script>
import axios from 'axios'
import axios from "axios";
export default {
name: 'Register',
data () {
var checkName = (rule, value, callback) => {
name: "Register",
data() {
const checkName = (rule, value, callback) => {
if (!value) {
return callback(new Error('账号不能为空'))
return callback(new Error("账号不能为空"));
}
setTimeout(() => {
// if (!Number.isInteger(value)) {
// callback(new Error('请输入密码'));
// } if {
if (value.length < 2) {
callback(new Error('名字至少两位'))
callback(new Error("名字至少两位"));
} else {
callback()
callback();
}
}, 1000)
}
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'))
}, 1000);
};
const validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass')
if (this.ruleForm.checkPass !== "") {
this.$refs.ruleForm.validateField("checkPass");
}
callback()
callback();
}
}
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
};
const validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'))
callback(new Error("两次输入密码不一致!"));
} else {
callback()
callback();
}
}
};
return {
register_success: false,
register_error: false,
// baseurl: "http://127.0.0.1/",
baseurl: 'http://yongma16.xyz/',
baseurl: "http://114.116.52.53/",
// baseurl: 'http://yongma16.xyz/',
ruleForm: {
pass: '',
checkPass: '',
name: ''
pass: "",
checkPass: "",
name: "",
},
rules: {
pass: [{ validator: validatePass, trigger: 'blur' }],
checkPass: [{ validator: validatePass2, trigger: 'blur' }],
name: [{ validator: checkName, trigger: 'blur' }]
}
}
pass: [{ validator: validatePass, trigger: "blur" }],
checkPass: [{ validator: validatePass2, trigger: "blur" }],
name: [{ validator: checkName, trigger: "blur" }],
},
};
},
methods: {
submitForm (formName) {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
const that = this;
if (valid) {
// 提交数据
console.log(this.ruleForm.name, this.ruleForm.pass)
console.log(this.ruleForm.name, this.ruleForm.pass);
// alert("yes submit!");
let that = this
that.register_success = false// 初始化register的状态
that.register_error = false
that.register_success = false; // 初始化register的状态
that.register_error = false;
axios
.post(that.baseurl + 'user/register/',
{
.post(that.baseurl + "user/register/", {
// 传递的名字和密码
name: that.ruleForm.name,
password: that.ruleForm.pass
}
)
name: that.ruleForm.name,
password: that.ruleForm.pass,
})
.then(function (res) {
console.log('成功post', res)
console.log(res.data.code)
console.log("成功post", res);
console.log(res.data.code);
if (res.data.code === 0) {
console.log('重名')
console.log(that.$cookies.get('user_session'))// 取出cookies的user_session
console.log(that.$cookies)// 存在
document.cookie = `user=${that.ruleForm.name}`
that.register_error = true
console.log("重名");
console.log(that.$cookies.get("user_session")); // 取出cookies的user_session
console.log(that.$cookies); // 存在
document.cookie = `user=${that.ruleForm.name}`;
that.register_error = true;
that.$message({
message: "名称重复" + that.ruleForm.name + "!",
type: "error",
});
// console.log(this.$cookies)
} else {
that.register_success = true
console.log('时间节点')
that.register_success = true;
console.log("时间节点");
that.$message({
message: "注册成功，欢迎您，" + that.ruleForm.name + "!",
type: "success",
});
// let token={'user':res.data.name};//传递主码用户名即可
// this.$cookie.set('token',token,1);//设置token
......@@ -146,22 +179,30 @@ export default {
})
.catch(function (res) {
// 获取res中的name
alert('后端的问题！')
console.log('失败post', res)
})
that.$message({
message: "注册失败" + that.ruleForm.name + "!",
type: "error",
});
alert("后端的问题！");
console.log("失败post", res);
});
} else {
// alert("no submit!");
console.log('前端的问题！')
console.log("前端的问题！");
that.$message({
message: "注册失败" + that.ruleForm.name + "!",
type: "error",
});
// console.log(this.$cookies);
return false
return false;
}
})
});
},
resetForm (formName) {
this.$refs[formName].resetFields()
}
}
}
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style scoped>
......
src/weather/EchartWeather.vue
浏览文件 @ b607b035
<template>
<div class="weather">
<div id="echart_weather">
</div>
<div class="weather">
<div id="echart_weather"></div>
<div class="weatherDiscribe">
<!-- 表格 -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期">
</el-table-column>
<el-table-column prop="discrible" label="天气">
</el-table-column>
<el-table-column prop="temperature" label="温度">
</el-table-column>
<el-table-column prop="windem" label="风向">
</el-table-column>
<el-table-column prop="windwl" label="风级">
</el-table-column>
</el-table>
<!-- 表格 -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期"> </el-table-column>
<el-table-column prop="discrible" label="天气"> </el-table-column>
<el-table-column prop="temperature" label="温度"> </el-table-column>
<el-table-column prop="windem" label="风向"> </el-table-column>
<el-table-column prop="windwl" label="风级"> </el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import * as echarts from 'echarts'
import axios from "axios";
import * as echarts from "echarts";
export default {
name: 'EchartWeather',
data() {
return {
msg: '贵阳天气',
baseurl: 'http://yongma16.xyz/article/weather/',
// baseurl: 'api/article/weather/',
tabPosition: 'left',
weather_title: [],
weather_high: [],
weather_low: [],
weather_discribe: [],
weather_windem:[],
weather_windwl:[],
tableData: []
}
},
mounted() {
this.initWeatherLine()
name: "EchartWeather",
data() {
return {
msg: "贵阳天气",
baseurl: "http://114.116.52.53/",
// baseurl: 'http://yongma16.xyz/',
// baseurl: 'api/article/weather/',
tabPosition: "left",
weather_title: [],
weather_high: [],
weather_low: [],
weather_discribe: [],
weather_windem: [],
weather_windwl: [],
tableData: [],
};
},
mounted() {
this.initWeatherLine();
},
methods: {
initWeatherLine() {
let that = this;
async function waitGetWeatherData() {
await that.getWeatherData();
await that.weatherInint();
}
waitGetWeatherData().then((o) => {
console.log(o);
}); // 同步
},
methods: {
initWeatherLine() {
let that = this
async function waitGetWeatherData() {
await that.getWeatherData()
await that.weatherInint()
}
waitGetWeatherData().then(o => {
console.log(o)
}) // 同步
},
getWeatherData() {
let that = this
return new Promise(resolve => {
setTimeout(function () {
axios.get(that.baseurl).then(res => {
console.log('天气接口返回', res)
let resdata = res.data
let weather = resdata.weather
let title = weather.title
let high = weather.high
let low = weather.low
let discribe = weather.discribe
let windem=weather.windem
let windwl=weather.windwl
that.tableData = []
title.map((item) => {
that.weather_title.push(item)
})
high.map((o) => {
let temp = parseInt(o)
that.weather_high.push(temp)
})
low.map((o) => {
let temp = parseInt(o)
that.weather_low.push(temp)
})
that.weather_windem=Array.from(...[windem])
that.weather_windwl=Array.from(...[windwl])
discribe.map((item) => {
that.weather_discribe.push(item)
})
let weatherLength = title.length;
for (let loc = 0; loc < weatherLength; ++loc) {
let discribeText = {
"date": "",
"discrible": "",
"temperature": ""
}
discribeText.date=that.weather_title[loc]
discribeText.discrible=that.weather_discribe[loc]
discribeText.temperature=that.weather_low[loc]+'/'+that.weather_high[loc]+'°C'
discribeText.windem=that.weather_windem[loc]
discribeText.windwl=that.weather_windwl[loc]
that.tableData.push(discribeText)
}
console.log(that.tableData, 'that.tableData')
}).catch(r => {
console.log('r', r)
})
}, 1000)
resolve('获取后端天气成功的promise')
getWeatherData() {
let that = this;
return new Promise((resolve) => {
setTimeout(function () {
axios
.get(that.baseurl + "article/weather/")
.then((res) => {
console.log("天气接口返回", res);
let resdata = res.data;
let weather = resdata.weather;
let title = weather.title;
let high = weather.high;
let low = weather.low;
let discribe = weather.discribe;
let windem = weather.windem;
let windwl = weather.windwl;
that.tableData = [];
title.map((item) => {
that.weather_title.push(item);
});
high.map((o) => {
let temp = parseInt(o);
that.weather_high.push(temp);
});
low.map((o) => {
let temp = parseInt(o);
that.weather_low.push(temp);
});
that.weather_windem = Array.from(...[windem]);
that.weather_windwl = Array.from(...[windwl]);
discribe.map((item) => {
that.weather_discribe.push(item);
});
let weatherLength = title.length;
for (let loc = 0; loc < weatherLength; ++loc) {
let discribeText = {
date: "",
discrible: "",
temperature: "",
};
discribeText.date = that.weather_title[loc];
discribeText.discrible = that.weather_discribe[loc];
discribeText.temperature =
that.weather_low[loc] + "/" + that.weather_high[loc] + "°C";
discribeText.windem = that.weather_windem[loc];
discribeText.windwl = that.weather_windwl[loc];
that.tableData.push(discribeText);
}
console.log(that.tableData, "that.tableData");
})
},
weatherInint() {
// 基于准备好的dom，初始化echarts实例
console.log('echarts!')
var that = this // 传递
return new Promise(resolve => {
setTimeout(function () {
let highData = Array.from(...[that.weather_high])
let lowData = Array.from(...[that.weather_low])
let titleData = Array.from(...[that.weather_title])
console.log('绘制折线图数据', titleData, highData, lowData)
var dom = document.getElementById('echart_weather')
// console.log('dom', dom)
var myChart = echarts.init(dom)
// 绘制图表
var option = {
title: {
text: that.msg,
subtext: '气温°C'
},
tooltip: {
trigger: 'axis'
},
// legend: {
// data: ['最高', '最低']
// },
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false
},
magicType: {
type: ['bar', 'line']
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: true,
data: titleData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
}
.catch((r) => {
console.log("r", r);
});
}, 1000);
resolve("获取后端天气成功的promise");
});
},
weatherInint() {
// 基于准备好的dom，初始化echarts实例
console.log("echarts!");
var that = this; // 传递
return new Promise((resolve) => {
setTimeout(function () {
let highData = Array.from(...[that.weather_high]);
let lowData = Array.from(...[that.weather_low]);
let titleData = Array.from(...[that.weather_title]);
console.log("绘制折线图数据", titleData, highData, lowData);
var dom = document.getElementById("echart_weather");
// console.log('dom', dom)
var myChart = echarts.init(dom);
// 绘制图表
var option = {
title: {
text: that.msg,
subtext: "气温°C",
},
tooltip: {
trigger: "axis",
},
// legend: {
// data: ['最高', '最低']
// },
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: "none",
},
dataView: {
readOnly: false,
},
magicType: {
type: ["bar", "line"],
},
restore: {},
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: true,
data: titleData,
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value}",
},
},
series: [
{
name: "Highest",
type: "bar",
data: highData,
markPoint: {
data: [
{
type: "max",
name: "Max",
},
{
type: "min",
name: "Min",
},
],
},
markLine: {
data: [
{
type: "average",
name: "avg",
},
],
},
},
{
name: "Lowest",
type: "line",
data: lowData,
markPoint: {
data: [
{
name: "最低",
value: -2,
xAxis: 1,
yAxis: -1.5,
},
],
},
markLine: {
data: [
{
type: "average",
name: "Avg",
},
[
{
symbol: "circle",
x: "75%",
yAxis: "max",
},
{
symbol: "circle",
label: {
position: "start",
formatter: "Max",
},
series: [{
name: 'Highest',
type: 'bar',
data: highData,
markPoint: {
data: [{
type: 'max',
name: 'Max'
},
{
type: 'min',
name: 'Min'
}
]
},
markLine: {
data: [{
type: 'average',
name: 'avg'
}]
}
},
{
name: 'Lowest',
type: 'line',
data: lowData,
markPoint: {
data: [{
name: '最低',
value: -2,
xAxis: 1,
yAxis: -1.5
}]
},
markLine: {
data: [{
type: 'average',
name: 'Avg'
},
[{
symbol: 'circle',
x: '75%',
yAxis: 'max'
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max'
},
type: 'max',
name: '最高点'
}
]
]
}
}
]
}
myChart.setOption(option) // 画折线图
window.onresize = function () {
myChart.resize()
}
}, 3000)
resolve('绘制折线图Promise')
})
// dom = null; //销毁
}
type: "max",
name: "最高点",
},
],
],
},
},
],
};
myChart.setOption(option); // 画折线图
window.onresize = function () {
myChart.resize();
};
}, 3000);
resolve("绘制折线图Promise");
});
// dom = null; //销毁
},
}
},
};
</script>
<style scoped>
.weather {
position: relative;
width: 100%;
height: 100%;
position: relative;
width: 100%;
height: 100%;
}
#echart_weather {
position: relative;
width: 100%;
height: 300px;
position: relative;
width: 100%;
height: 300px;
}
.weatherDiscribe {
position: relative;
margin-top: 5px;
width: 100%;
height: auto;
left: 50%;
transform: translateX(-50%);
position: relative;
margin-top: 5px;
width: 100%;
height: auto;
left: 50%;
transform: translateX(-50%);
}
#customers {
position: relative;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
left: 50%;
top: 50%;
transform: translateX(-50%, -50%);
position: relative;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
left: 50%;
top: 50%;
transform: translateX(-50%, -50%);
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或