echarts的guage仪表盘样式

<chart-speed id="speedChart" :speed="speed"/>
<chart-soc id="socChart" :soc="soc"/>

 

<template>
  <div class="speed-echart">
    <echarts
      :id="id"
      :options="options"
      height="100%"/>
    <div class="speed">
      <span>km/h</span>
      <p>{{ speed }}</p>
    </div>
  </div>
</template>

<script>
  // 引入第三方组件
  import Echarts from '@/components/Echarts'
  export default {
    components: {
      Echarts
    },
    props: {
      id: {
        type: String,
        default: ''
      },
      speed: {
        type: Number,
        default: 0
      }
    },
    data () {
      return {
        options: {},
        max: 160
      }
    },
    watch: {
      speed: {
        handler (newVal, oldVal) {
          this.options = {
            series: [
              // 外围刻度
              {
                type: 'gauge',
                center: ['50%', '50%'],
                radius: '100%',
                splitNumber: 8,
                min: 0,
                max: this.max,
                startAngle: 210,
                endAngle: -30,
                // 仪表盘轴线
                axisLine: {
                  // lineStyle: {
                  //   color: [[1, '#fff']]
                  // }
                  // 仪表盘轴线 // 无数据的底部背景圆环 
                  show: true,
                  lineStyle: {
                    width: 5,
                    shadowColor: '#fff',
                    color: [[1, '#fff']]
                  },
                },
                // 分隔线样式
                splitLine: {
                  show: true,
                  length: 12,
                  lineStyle: {
                    width: 1,
                    color: '#9ad0f6'
                  }
                },
                // 刻度样式
                axisTick: {
                  show: true,
                  splitNumber: 10,    // 分隔线之间分割的刻度数
                  length: 8,
                  lineStyle: {
                    color: '#9ad0f6',
                    width: 1
                  },
                },
                axisLabel: {
                  show: true,
                  distance: 5, // 标签与刻度线的距离
                  fontSize: 10,
                  color: '#8b8b8b',
                  // textStyle: {
                  //   color: '#9ad0f6',
                  //   fontSize: '16'
                  // }
                },
                detail: false
              },

              // 内侧指针、数值显示
              {
                name: this.$t('monitorCenter.currentSpeed'),
                type: 'gauge',
                center: ['50%', '50%'],
                radius: '80%',
                startAngle: 210,
                endAngle: -30,
                min: 0,
                max: this.max,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: '100%',
                    color: [
                      [newVal / this.max, new this.$echarts.graphic.LinearGradient(
                        0, 0, 1, 0, [{
                          offset: 0,
                          color: 'rgba(255,255,255, 0)'
                        },
                          {
                            offset: 1,
                            color: 'rgba(54, 134, 246, 0.5)'
                          }
                        ]
                      )
                      ],
                      [1, 'rgba(255,255,255, 0)']
                    ]
                  }
                },
                axisTick: false,
                splitLine: false,
                axisLabel: false,
                title: {
                  show: true,
                  offsetCenter: [0, '73%'],
                  color: '#000',
                  fontSize: 16,
                  borderRadius: 21,
                  padding: 5
                },
                detail: false,
                pointer: {
                  show: true,
                  length: '100%',
                  width: 4
                },
                silent: true,
                itemStyle: {
                  color: '#3686F6'
                },
                data: [{
                  value: newVal,
                  name: this.$t('monitorCenter.currentSpeed')
                }]
              }
            ]
          }
        },
        deep: true,
        immediate: true
      }
    }
  }
</script>

<style scoped>
  .speed-echart {
    position: relative;
  }
  .speed-echart .speed {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -40px;
    box-shadow: #9ad0f6 0 0 10px 0 inset;
    text-align: center;
    padding-top: 15px;
    box-sizing: border-box;
    pointer-events: none;
  }
  .speed-echart .speed p {
    margin: 0;
    font-family: FZDLJT;
    font-size: 26px;
    line-height: 1;
    color: #3090FF;
  }
</style>

<template>
  <div>
    <echarts
      :id="id"
      :options="options"
      height="100%"/>
  </div>
</template>

<script>
  // 引入第三方组件
  import Echarts from '@/components/Echarts'
  export default {
    components: {
      Echarts
    },
    props: {
      id: {
        type: String,
        default: ''
      },
      soc: {
        type: Number,
        default: 0
      }
    },
    data () {
      return {
        options: {}
      }
    },
    watch: {
      soc: {
        handler (newVal, oldVal) {
          this.options = {
            series: [
              // 外围刻度
              {
                type: 'gauge',
                center: ['50%', '50%'],
                radius: '100%',
                splitNumber: 4,
                min: 0,
                max: 100,
                startAngle: 210,
                endAngle: -30,
                // 仪表盘轴线
                axisLine: {
                  width: 5,
                  shadowColor: '#fff',
                  lineStyle: {
                    color: [[1, '#fff']]
                  }
                },
                // 分隔线样式
                splitLine: {
                  show: true,
                  length: 12,
                  lineStyle: {
                    color: '#00B4FC'
                  }
                },
                // 刻度样式
                axisTick: {
                  show: true,
                  splitNumber: 10,    // 分隔线之间分割的刻度数
                  length: 8,
                  lineStyle: {
                    color: '#00B4FC',
                    width: 1
                  },
                  length: 8
                },
                axisLabel: {
                  show: true,
                  distance: 14, // 标签与刻度线的距离
                  fontSize: 10,
                  color: '#8b8b8b',
                  // textStyle: {
                  //   color: '#00B4FC',
                  //   fontSize: '16'
                  // },
                  formatter: function (value) {
                    let newVal = ''
                    switch (value) {
                      case 0:
                        newVal = 'E'
                        break
                      case 25:
                        newVal = '1/4'
                        break
                      case 50:
                        newVal = '{name|1/2}'
                        break
                      case 75:
                        newVal = '3/4'
                        break
                      case 100:
                        newVal = 'F'
                        break
                      default:
                        break
                    }
                    return newVal
                  },
                  rich: {
                    name: {
                      fontSize: 10,
                      color: '#8b8b8b',
                      // color: '#1F4E60',
                      // fontSize: 24
                    }
                  }
                },
                title: {
                  show: true,
                  offsetCenter: [0, '60%'],
                  color: '#000',
                  fontSize: 16,
                  borderRadius: 21,
                  padding: 5
                },
                detail: {
                  show: true,
                  offsetCenter: [0, '35%'],
                  textStyle: {
                    fontSize: 16,
                    color: '#3090FF'
                  },
                  formatter: [
                    '{value|' + this.soc + '}' + ' %'
                  ].join('\n'),

                  rich: {
                    value: {
                      fontSize: 24,
                      color: '#3090FF'
                    }
                  }
                },
                pointer: {
                  show: true,
                  length: '60%',
                  width: 5
                },
                silent: true,
                itemStyle: {
                  color: '#00B4FC'
                },
                data: [{
                  value: newVal,
                  name: this.$t('monitorCenter.currentBatterySOC')
                }]
              },
              // 画两个指针中间的圆圈
              {
                type: 'pie',
                radius: '10%',
                z: 10,
                label: false,
                labelLine: false,
                animation: false,
                silent: true,
                itemStyle: {
                  color: '#00B5FC'
                },
                data: [1]
              },
              {
                type: 'pie',
                radius: '5%',
                z: 11,
                label: false,
                labelLine: false,
                animation: false,
                silent: true,
                itemStyle: {
                  color: '#B1E9FF',
                },
                data: [1]
              }
            ]
          }
        },
        deep: true,
        immediate: true
      }
    }
  }
</script>

<style scoped>
</style>