<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>