前端可视化数据大屏（2）底部带源码地址

接上一期说的

我们大屏的主体框架已经搭建好了，后续我们只需要往大屏里面添加内容即可

本期我们将讲述如何往大屏里面添加echarts的组件内容

1,echarts组件引入

        这里我们在index.vue文件里，在script标签内的最顶部，我们引入echarts的组件

如图所示：

 2，使用echarts组件

        我们在网站里面找到我们需要使用的组件，这里我找了一个油表的组件

        点击组件，进入组件详情里，将组件配置项给复制过来。在文件中进行配置，具体配置见代码注释。

<template>
  <div>
    <dv-full-screen-container class="box">
      <dv-border-box-11 title="测试">
        <!-- 小图表的外边框组件 -->
        <dv-border-box-1 class="box1">
          <!-- 小图表图标组件 -->
          <dv-capsule-chart
            :config="config"
            style="
              width: 400px;
              height: 300px;
              margin-left: 10px;
              margin-top: 10px;
            "
        /></dv-border-box-1>
        <!-- 创建一个容器，设置ref来获取元素对象，同时，这个标签将用来显示echarts的组件 -->
        <div ref="oil_meter" style="height: 220px; width: 220px"></div>
      </dv-border-box-11>
    </dv-full-screen-container>
  </div>
</template>

<script>
import * as echarts from 'echarts'; //引入echarts
export default {
  data() {
    return {
      config: {//组件的配置数据
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 67
          },
          {
            name: '漯河',
            value: 123
          },
          {
            name: '郑州',
            value: 55
          },
          {
            name: '西峡',
            value: 98
          },
        ]
      },
      unit: '单位'
    }
  },
  mounted() {
    setTimeout(() => { //因为dom原因，待组件加载完后在执行echerts来渲染页面
      this.opt()
      setInterval(() => { //每隔一秒钟执行一次，实现秒表每秒钟刷新一次，形成动态效果
        this.opt()
      }, 1000) 
    }, 1000)

  },
  methods: {
    opt() { //echarts组件配置
      const mychart = echarts.init(this.$refs.oil_meter)
      console.log(mychart)
      const option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            progress: {
              show: true
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}'
            },
            data: [
              {
                value: Math.floor(Math.random() * (100 - 1) + 1),//这里是生成1-100的随机数
                name: 'SCORE'
              }
            ]
          }
        ]
      };
      mychart.setOption(option)
    }

  },
}


</script>

<style>
/* 根据具体的情况对图表进整体的布局以及css的修改 */
.box {
  background-color: black;
}
.box1 {
  margin-left: 20px;
  padding-top: 40px;
  height: 320px;
  width: 420px;
}
</style>

效果图如下

 项目到这就完结了，我这个由于是讲解版的，没有在大屏里添加其他的元素里，但是方式都基本一致，有不清楚的可以私聊。

https://github.com/huwenwu2017/vue2-datav