vue实现水球图

使用 ECharts 实现水球图

安装 ECharts 和 ECharts LiquidFill 插件

npm install echarts echarts-liquidfill

在 Vue 组件中引入并初始化

<template>
  <div ref="liquidChart" style="width: 400px; height: 400px"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'

export default {
  mounted() {
    this.initLiquidChart()
  },
  methods: {
    initLiquidChart() {
      const chart = echarts.init(this.$refs.liquidChart)
      const option = {
        series: [{
          type: 'liquidFill',
          data: [0.6, 0.5, 0.4],
          radius: '80%',
          outline: {
            show: false
          },
          backgroundStyle: {
            color: '#E6F7FF'
          },
          label: {
            formatter: (value) => {
              return `${(value * 100).toFixed(0)}%`
            },
            fontSize: 28,
            color: '#1890FF'
          }
        }]
      }
      chart.setOption(option)
    }
  }
}
</script>

使用 D3.js 实现自定义水球图

安装 D3.js

npm install d3

创建自定义水波效果组件

<template>
  <svg ref="waveChart" width="400" height="400"></svg>
</template>

<script>
import * as d3 from 'd3'

export default {
  props: {
    value: {
      type: Number,
      default: 0.5
    }
  },
  mounted() {
    this.drawWave()
  },
  methods: {
    drawWave() {
      const svg = d3.select(this.$refs.waveChart)
      const width = 400
      const height = 400
      const radius = Math.min(width, height) / 2

      // 创建容器
      const container = svg.append('g')
        .attr('transform', `translate(${width/2}, ${height/2})`)

      // 绘制背景圆
      container.append('circle')
        .attr('r', radius)
        .style('fill', '#E6F7FF')

      // 创建水波路径
      const waveGroup = container.append('g')
        .attr('clip-path', 'url(#clip)')

      // 创建剪切路径
      container.append('clipPath')
        .attr('id', 'clip')
        .append('circle')
        .attr('r', radius)

      // 水波动画
      this.createWavePath(waveGroup, radius, this.value)
    },
    createWavePath(group, radius, value) {
      const amplitude = radius * 0.05
      const wavelength = radius * 2
      const points = 20

      const wave = d3.line()
        .x(d => d.x)
        .y(d => d.y)
        .curve(d3.curveBasis)

      function updateWave() {
        const data = []
        const now = Date.now() / 1000

        for (let i = 0; i <= points; i++) {
          const x = -radius + (i * (radius * 2) / points)
          const y = -amplitude * Math.sin((now + i * 0.2) * Math.PI * 2 / wavelength)
          data.push({x, y})
        }

        const path = group.selectAll('path').data([data])

        path.enter()
          .append('path')
          .attr('d', wave)
          .style('fill', '#1890FF')
          .merge(path)
          .attr('transform', `translate(0, ${radius * (1 - 2 * value)})`)
      }

      d3.timer(updateWave)
    }
  }
}
</script>

使用第三方库 vue-chartjs

安装依赖

npm install chart.js vue-chartjs

创建水球图组件

<template>
  <div>
    <liquid-chart :chart-data="chartData" :options="options"/>
  </div>
</template>

<script>
import { Liquid } from 'vue-chartjs'
import Chart from 'chart.js'

export default {
  extends: Liquid,
  data() {
    return {
      chartData: {
        datasets: [{
          data: [0.65],
          backgroundColor: ['#1890FF']
        }]
      },
      options: {
        cutoutPercentage: 0,
        rotation: -0.5 * Math.PI,
        circumference: 1 * Math.PI,
        legend: {
          display: false
        },
        tooltips: {
          enabled: false
        },
        elements: {
          center: {
            text: '65%',
            color: '#1890FF',
            fontStyle: 'Arial',
            sidePadding: 20,
            minFontSize: 25,
            lineHeight: 25
          }
        }
      }
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

以上三种方法均可实现水球图效果，ECharts方案最完整且维护性好，D3.js方案最灵活但实现复杂，vue-chartjs方案最简单但定制性较弱。根据项目需求选择适合的方案。