Vue+Echars+DataV数据可视化经典案例
文章目前打乱没有顺序,实时更新内容,最后整理.Echars 官网:实例Echars 实验室:工具包 这里面有更多的demo可供选择 快捷好用不迷茫!Echars 社区用户DIY 工具包 强烈推荐 非常好用!DataV 官网:样式特效 选择样式特效必须来这里CSS 样式选择器前端必备 这个比较实用!W3c school(Echars) 使用说明 说明-------------------------
·
文章目前打乱没有顺序,实时更新内容,最后整理.
Echars 官网:实例
Echars 实验室:工具包 这里面有更多的demo可供选择 快捷好用不迷茫!
Echars 社区用户DIY 工具包 强烈推荐 非常好用!
DataV 官网:样式特效 选择样式特效必须来这里
CSS 样式选择器前端必备 这个比较实用!
W3c school(Echars) 使用说明 说明
------------------------------------------------------------------------------------------
下面进入正题 我踩过的坑,和帮助我的地方我都写在这里:
进入vue 2.0 以后配置文件就改为在 "vue.config.js"里面 这时就没有week…什么什么的配置文件了 就要在这个里面配置.
module.exports = {
// 配置端口号,允许任何人访问
devServer: {
open: process.platform === "darwin",
disableHostCheck: false,
host: "0.0.0.0",
port: 9001,
https: false,
hotOnly: false,
proxy: null // string | Object
}, // 第三方插件配置
}
在vue代码中 想要添加图片 就要遵循vue的双向数据绑定.
<template>
<div>
<span class="text"><img :src="imgUrl" style="width:350px;height:60px;"></span>
</div>
</template>
<script>
export default {
data() {
return {
imgUrl:require("../assets/2h.png")
};
},
</script>
写一个简易的格式化时钟 不用导入任何外部js 就可在线展示 “2020年 9月 30日 周三 15 :46 :57” 网上的教程特别繁琐不好用来看我的!
<template>
<div>
<span class="text">{{ year }}年 {{ month }}月 {{ day }}日 {{ weekday }} {{ date }}</span>
</div>
</template>
<script>
export default {
data() {
return {
date: "", //yyyy-MM-dd HH:mm:ss
year: new Date().getFullYear(), //yyyy-MM-dd HH:mm:ss
month: new Date().getMonth() + 1, //yyyy-MM-dd HH:mm:ss
day: new Date().getDate(), //yyyy-MM-dd HH:mm:ss
weekday: "",
dday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
};
},
mounted() {
this.cancelLoading();
let _this = this; // 声明一个变量指向Vue实例this,保证作用域一致
this.timer = setInterval(() => {
var date = new Date();
var time = [
date.getHours().toString().length===1?'0'+date.getHours().toString():date.getHours().toString(),
date.getMinutes().toString().length===1?'0'+date.getMinutes().toString():date.getMinutes().toString(),
date.getSeconds().toString().length===1?'0'+date.getSeconds().toString():date.getSeconds().toString(),
];
_this.date = time.join(' :');
_this.weekday = this.dday[new Date().getDay()]
}, 1000)
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); // 在Vue实例销毁前,清除我们的定时器
}
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)