vue+DataV大屏数据展示

DataV 官网 http://datav.jiaminghi.com/guide/
echarts 官网 https://echarts.apache.org/zh/index.html

下载 npm install @jiaminghi/data-view
npm install echarts -S
npm install axios -S

main.js引用
import DataV from '@jiaminghi/data-view'
Vue.use(DataV)

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

import axios from 'axios'
Vue.prototype.$http = axios

//HellowWorld.vue
<template>
  <div class="wrap">
    <div class="titles">
    //data-view装饰使用
      <dv-decoration-1 :color="['whitesmoke', '']" style="width:200px;height:40px;" />
      <p>title </p>
      <dv-decoration-1 :color="['whitesmoke', '']" style="width:200px;height:40px;" />
      </div>
    <div class="warps">
      <div class="main3">
        <div class="content">
          <div class="title"><em></em>title<em></em></div>
          <topRight />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topRight from "./topRight";
export default {
  data() {
    return {};
  },
  components: {
    topRight,
  },
};
</script>

//topRight.vue echart图表引用
<template>
  <div>
    <div id="topLeft" :style="{ width: '99%', height: '220px' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      var that = this;
      that.$http({
          method: "POST",
          url: "http://",
          data: {
            time: Date.parse(new Date()),
          },
          header: { "Content-Type": " application/json" },
        })
        .then((res) => {
          that.data = res.data.num;
          var time = [],entryNum = [],exitNum = [];
          for (var i = 0; i < that.data.length; i++) {
            time.push(that.data[i].time);
            entryNum.push(that.data[i].entryNum);
            exitNum.push(that.data[i].exitNum);
          }
          let topLeft = this.$echarts.init(
            document.getElementById("topLeft")
          );
          topLeft.setOption({
            tooltip: {
              trigger: "axis",
            },
            legend: {
              top: "8%",
              right: 10,
              textStyle: {
                color: "skyblue",
              },
              data: ["", ""],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              axisLabel: {
                textStyle: {
                  color: "skyblue",
                },
              },
              data: time,
            },
            yAxis: {
              splitLine: {
                lineStyle: {
                  color: "rgba(182, 182, 182, 0.2)",
                },
              },
              axisLabel: {
                textStyle: {
                  color: "skyblue",
                },
              },
              type: "value",
              name: "",
              nameTextStyle: {
                color: "skyblue",
              },
            },
            series: [
              {
                name: "",
                type: "line",
                symbol: "circle",
                color: "#45dbf7",
                data: entryNum,
                areaStyle: {},
                smooth: true,
              },
              {
                name: "",
                type: "line",
                symbol: "circle",
                color: "#4777f5",
                areaStyle: {},
                data: exitNum,
                smooth: true,
              },
            ],
          });
        })
    },
  },
};
</script>

<style scoped>
</style>