调整仪表盘

最新推荐文章于 2025-05-16 20:30:42 发布

yuyu_2019

最新推荐文章于 2025-05-16 20:30:42 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

分类专栏： vue-echarts的千奇百变

本文链接：https://blog.youkuaiyun.com/yuyu_2019/article/details/110630206

vue-echarts的千奇百变专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个用于展示主机使用率的仪表盘组件设计。该仪表盘采用ECharts实现，支持自适应调整，并展示了如何配置样式及数据。包括了指针、分割线、刻度线等细节设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
  <chart style="width:100%; height:250px;"
         ref="chart1"
         :options="orgOptions"
         :auto-resize="true"></chart>
</template>

<script>

import echarts from 'echarts'
export default {
  name: 'barChart2',
  data () {
    return {
      orgOptions: {}
    }
  },
  methods: {
    getInfoSucc () {
      this.orgOptions = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        title: [{ //主机使用率的样式
          x: 'center',
          y: '70%',
          text: '主机使用率',
          textStyle: {
            fontSize: 14,
            color: '#0fd0ff',
          },
        }],
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: { //【90%】的样式
              formatter: '{value}%',
              offsetCenter: [0, "30%"],
              textStyle: {
                color: 'white',
                fontSize: 20
              },
            },
            pointer: {
              width: 5, // 指针的宽度
              length: "60%", // 指针长度，按照半圆半径的百分比
            },
            splitLine: { // 分割线
              length: 20, // 分割线长度
              lineStyle: {
                width: 1, // 分割线宽度
                color: 'auto' // 分割线颜色，跟着仪表盘走
              }
            },
            axisTick: { // 刻度线
              length: 15, // 刻度线长度
              lineStyle: {
                width: 1, // 分割线宽度
                color: 'auto' // 分割线颜色，跟着仪表盘走
              }
            },
            axisLine: {
              lineStyle: {
                color: [[0.2, '#3dccae'], [0.8, '#207ae8'], [1, '#f06e23']], // 改表盘颜色
                width: 10, // 表盘粗细
              }
            },
            data: [{ value: 90 }],
            title: { // 设置仪表盘中间显示文字样式
              show: false
            },
          }
        ]
      }
    }
  },

  mounted () {
    this.getInfoSucc()
  }
}
</script>