echarts篇之仪表盘

原创已于 2026-01-23 09:24:32 修改 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

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

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

实现一个这样的仪表盘

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>

仪表盘进阶：

原理：套2层数据，第一层是外圈的虚线部分；第二层是灰色实现部分

<template>
  <div ref="gaugeChart" :class="$style.gaugeChart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'GaugeChart',
  props: {
    value: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      chartInstance: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
      this.chartInstance = null;
    }
  },
  methods: {
    initChart() {
      if (!this.$refs.gaugeChart) {
        return;
      }
      // 确保容器有尺寸
      const container = this.$refs.gaugeChart;

      this.chartInstance = echarts.init(container);
      this.updateChart();
      // 确保图表尺寸正确
      this.$nextTick(() => {
        if (this.chartInstance) {
          this.chartInstance.resize();
        }
      });
    },
    updateChart() {
      if (!this.chartInstance) return;
      const chartData = {
        min: this.min,
        max: this.max,
        value: this.value || 0
      };
      const option = {
        series: [
          {
            type: 'gauge',
            center: ['50%', '88%'],
            radius: '40',
            min: chartData.min,
            max: chartData.max,
            startAngle: 180,
            endAngle: 0,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                color: [
                  [0, 'rgba(255,255,255,0.1)'],
                  [0.25, 'rgba(255,255,255,0.2)'],
                  [0.5, 'rgba(255,255,255,0.2)'],
                  [0.75, 'rgba(255,255,255,0.2)'],
                  [1, 'rgba(255,255,255,0.1)']
                ],
                width: 1 //最外圈宽度
              }
            },
            splitLine: {
              show: true,
              length: 1, //线条长度
              distance: 5, //线条距离
              lineStyle: {
                width: 5,
                color: 'auto'
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                width: 1,
                color: 'auto'
              },
              length: 4,
              distance: 0
            },
            axisLabel: false,
            detail: {
              show: false
            },
            pointer: {
              show: false
            }
          },
          {
            type: 'gauge',
            center: ['50%', '90%'],
            radius: '55',
            min: chartData.min,
            max: chartData.max,
            startAngle: 180,
            endAngle: 0,
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  // [0.25, '#f03b44'],
                  //   [0.5, '#fbdd5e'],
                  //   [0.75, '#58d9f9'],
                  //   [1, '#4DFFC3']
                  [0.25, '#7c4a53'],
                  [0.5, '#977f57'],
                  [0.75, '#3c6983'],
                  [1, '#30804f']
                ],
                width: 0
              }
            },
            splitLine: {
              show: true,
              length: 10, //线条长度
              distance: 0,
              lineStyle: {
                width: 1,
                color: 'auto'
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                width: 1,
                color: 'auto'
              },
              length: 8,
              distance: 0
            },
            axisLabel: false,
            detail: {
              show: false, //隐藏文本
              fontSize: '22',
              color: 'inherit',
              offsetCenter: ['0', '-5']
            },
            pointer: {
              icon: 'triangle',
              length: '27%',
              width: '8%',
              show: true,
              offsetCenter: [0, '-44%'],
              itemStyle: {
                color: '#fff'
              }
            },
            title: {},
            data: [
              {
                value: chartData.value
              }
            ]
          }
        ]
      };
      this.chartInstance.setOption(option, true);
      // 确保图表尺寸正确
      this.$nextTick(() => {
        if (this.chartInstance) {
          this.chartInstance.resize();
        }
      });
    }
  },
  watch: {
    value: {
      handler() {
        if (this.chartInstance) {
          this.updateChart();
        }
      },
      immediate: false
    }
  }
};
</script>

<style lang="scss" module>
@import '@/styles/common';
.gaugeChart {
  width: 116px;
  height: 61px;
  // background: pink;
  margin-top: 6px;
  margin-left: 29px;
}
</style>