echarts篇之仪表盘

这个一个非常哈

已于 2023-12-28 16:02:04 修改

阅读量2k

点赞数 1

文章标签： echarts 前端 javascript

于 2023-09-06 16:30:05 首次发布

本文链接：https://blog.csdn.net/ae_pppppp/article/details/132718061

版权

本文讲解了如何在Vue应用中利用ECharts4.9和5版本构建一个包含三个层次的仪表盘，包括轴线、刻度和数据驱动配置。

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

实现一个这样的仪表盘

1.安装echarts并且引入使用，此版本使用的4.9版本

2.4版本需要自己手动绘制3个半圈，5版本官网上有属性，可以不用自己配置最内层的虚线圈

axisTick: {
                show: true, // 是否显示刻度(线),默认 true
                splitNumber: 8,
                length: 5,
                lineStyle: {
                  width: 1,
                  color: pink
                },
                distance:5
              },

3. 4版本代码如下

<template>
  <div :class="$style.root">
    <div ref="chart" :class="$style.rootChart" />
    <div :class="$style.tip">{{ value }}{{ word }}</div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    value: {
      type: [Number, String],
      default: 70
    },
    word: {
      type: String,
      default: '分'
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    value() {
      this.initChart();
    }
  },

  methods: {
    initChart() {
      this.$nextTick(() => {
        if (!this.chart) {
          this.chart = echarts.init(this.$refs.chart);
        }
        const option = {
          series: [
            // 最外侧
            {
              type: 'gauge',
              radius: 91, // 半径
              center: ['50%', '80%'], //位置
              min: 0,
              max: 100,
              startAngle: 200,
              endAngle: -20,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 1,
                  color: [[1, 'red']]
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              pointer: {
                show: false
              },
              detail: {
                show: false
              }
            },
            // 第二层
            {
              type: 'gauge',
              min: 0,
              max: 100,
              radius: 85, // 半径
              center: ['50%', '80%'],
              startAngle: 196,
              endAngle: -16,
              pointer: {
                show: false
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                // 刻度线
                show: false
              },
              splitLine: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 5,
                  shadowBlur: 0,
                  color: [
                    [0.7, 'red'],
                    [1, 'blue']
                  ]
                }
              },
              detail: {
                show: false
              },
              data: [this.value]
            },
            // 第三层
            {
              type: 'gauge',
              min: 0,
              max: 100,
              center: ['50%', '80%'],
              radius: 95, // 位置
              startAngle: 195,
              endAngle: -15,
              pointer: {
                show: false
              },
              axisLabel: {
                // 刻度标签。
                show: false
              },
              axisTick: {
                show: true, // 是否显示刻度(线)
                splitNumber: 7,
                length: 5,
                lineStyle: {
                  width: 1,
                  color: 'red'
                }
              },
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              detail: {
                show: false
              }
            }
          ]
        };
        this.chart.setOption(option);
      });
    }
  }
};
</script>

<style lang="scss" module>
.root {
  width: 100%;
  height: 100%;
  position: relative;
  .rootChart {
    width: 100%;
    height: 100%;
  }
  .tip {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    text-align: center;
  }
}
</style>