Vue+Echars+DataV数据可视化经典案例

文章目前打乱没有顺序,实时更新内容,最后整理.

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 }}年&nbsp;{{ month }}月&nbsp;{{ day }}日&nbsp;{{ weekday }}&nbsp;{{ 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>