echarts 仪表盘配置

<template>
  <div style="height:200px">
    <div class="echarts">
      <div class="outset_shadow">
        <div class="inset_shadow">
        </div>
      </div>
      <VChart
        :id="chartId"
        ref="mycharts"
        :autoresize="true"
        :options="option"
        class="barCharts"
      >
      </VChart>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    echartsinfo: {
      type: Object,
      default: () => ({ // 接收默认传值
        echartsTitle: '累计PUE',

        min: 0, // 最小刻度
        max: 100, // 最大刻度
        color: [
          [0.2, '#2EC478'], // 0-30%的颜色
          [0.5, '#FAD26B'],
          [0.8, '#F7BA1E'],
          [1, '#F53F3F']
        ]

      })

    }
  },
  data () {
    return {
      chart: null

    }
  },
  computed: {
    option () {
      return {
        series: [
          { // 外层仪表盘
            type: 'gauge',
            startAngle: 225,
            endAngle: -45,
            min: this.echartsinfo.min,
            max: this.echartsinfo.max,
            splitNumber: 10, // 分成几份
            // nameTextStyle: {
            //   fontSize: 14,
            //   height: 50
            // },
            axisLine: {

              lineStyle: {

                width: 10,

                color: this.echartsinfo.color
              }
            },
            pointer: { // 指针
              length: '50%',
              itemStyle: {
                color: 'inherit'

              }
            },
            axisTick: {
              show: false, // 是否显示刻度线
              distance: 0,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }

            },
            splitLine: { // 分割线

              distance: -12,
              length: 20,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              show: false

            },
            detail: {
              valueAnimation: true,

              // formatter: '{value}km/h',
              color: 'inherit',
              rich: {
                '<style_name>': {
                  verticalAlign: 'bottom', // 控制value对齐方式
                  lineHeight: 30

                }
              },
              textStyle: {
                fontWeight: 'bolder',
                width: 50,
                fontSize: '12px',
                height: 18 // 控制value高度

              }
            },

            data: [
              {
                value: this.echartsinfo.value,
                name: this.echartsinfo.echartsTitle,
                title: {
                  offsetCenter: [0, '80%']
                }

              }

            ]
          },
          { // 内层白色阴影圆
            type: 'gauge',
            center: ['50%', '50%'],
            min: this.echartsinfo.min,
            max: this.echartsinfo.max,
            radius: '70%',
            // min: 0, // 刻度最小值 应从外界传入
            // max: 100, // 刻度最大值
            startAngle: 225,
            endAngle: -45,
            axisLine: {

              lineStyle: {

                width: 25,

                color: [
                  [1, 'rgba(255,255,255,0.5)'] // 0-30%的颜色

                ]
              }
            },
            axisTick: {
              show: false, // 是否显示刻度线
              distance: 0,
              length: 8,
              lineStyle: {

                color: '#fff',
                width: 2
              }

            },
            splitLine: {
              // 分割线

              distance: -20,
              length: 20,

              lineStyle: {
                color: '#fff',
                width: 4
              }
            },

            axisLabel: { // 分割刻度提示
              show: true,
              width: 25,
              overflow: 'truncate',
              // overflow: 'break',
              distance: 8,
              fontSize: 10
            },
            tooltip: {

            }

          },
          { // 指针阴影
            type: 'pie',
            labelLine: {
              show: false
            },
            z: 1,
            radius: 12,
            data: [
              {
                value: 5,
                itemStyle: {
                  color: 'rgba(108,116,132,0.15)'
                }
              }
            ]
          },
          { // 指针小白点
            type: 'pie',
            labelLine: {
              show: false
            },
            z: 10,
            radius: 3,
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#fff'
                }
              }
            ]
          }

        ]
      }
    }
  },
  watch: {
    echartsinfo: {
      deep: true,
      immediate: true,
      handler () {

      }
    }
  }

}

</script>
<style scoped lang="scss">
  /*盒子阴影居中 使其居中*/
  .shadow{
    position:absolute;
border-radius: 50%;

left:50%;
top:50%;
transform:translate(-50%,-50%);

  }
  /*弹性盒布局*/
  .flex{
    display:flex;
    justify-content: space-between;
    align-items: center;
  }
  .echarts{
    width:200px;
    height:200px;
    position:relative;

    .barCharts {
      width: 100%;
      height: 100%;
     /* transform: scale(0.9);*/

    }
    .bottom{
      width:100%;
      height:50px;//高度 减去画布高度
      padding:0px 20px;
      box-sizing: border-box;

      @extend .flex;

      font-size:12px;
      border-bottom: 1px solid #dedede;
      border-top:1px solid #dedede;

      .column{
        @extend .flex;
        flex-direction: column;
      }
    }
  }
  .outset_shadow{
width:170px;
height:170px;
@extend .shadow;

box-shadow: 0px 0px 10px #dedede;
    .inset_shadow{
      position:absolute;
      width:160px;
      height:160px;
      @extend .shadow;
      box-shadow:inset 0px 0px 5px #edeaea;

    }
  }

  i{
    font-style: normal;
  }

  </style>