标签：skyblue vue color axios time 大屏 DataV data echarts

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>

标签：skyblue,vue,color,axios,time,大屏,DataV,data,echarts
来源： https://www.cnblogs.com/minghan/p/14166873.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。