当前位置：首页 > article >正文

如何在VUE框架下渲染出来一个水球图

article 2025/3/7 0:14:42

在 Vue 框架下，使用 ECharts 渲染水球图通常需要借助 echarts-liquidfill 插件，该插件专门用于创建水球图效果。

1. 安装依赖

首先，确保你已经安装了 ECharts 和 echarts-liquidfill：

npm install echarts echarts-liquidfill

2. 在 Vue 组件中使用

在 Vue 组件中，可以这样使用 ECharts 渲染水球图：

<template>
  <d2-container>
  <div ref="chart" class="chart-container"></div>
</d2-container>
</template>

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

export default {
  name: 'LiquidFillChart',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const option = {
        series: [{
          type: 'liquidFill',
          data: [0.6, 0.5, 0.4, 0.3], // 水球图的数据，表示填充的比例
          radius: '80%', // 水球图的半径
          outline: {
            show: false // 是否显示外边框
          },
          label: {
            show: true,
            formatter: (param) => {
              return `${(param.value * 100).toFixed(0)}%`; // 显示百分比
            },
            fontSize: 28,
            color: '#fff',
            fontWeight: 'bold',
            textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)' // 添加文字阴影
          },
          backgroundStyle: {
            color: '#E6F7FF', // 背景颜色
            borderWidth: 10,
            borderColor: '#1890FF',
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.3)', // 背景阴影
            shadowOffsetX: 5,
            shadowOffsetY: 5
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#1890FF' // 渐变起始颜色
              }, {
                offset: 1, color: '#0050B3' // 渐变结束颜色
              }]
            },
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)', // 水球阴影
            shadowOffsetX: 5,
            shadowOffsetY: 5
          },
          emphasis: {
            itemStyle: {
              opacity: 0.8
            }
          }
        }]
      };

      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 98%;
  height: 400px;
  background: #f0f0f0; /* 背景颜色 */
  border-radius: 15px; /* 圆角 */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* 容器阴影 */
  padding: 20px; /* 内边距 */
}
</style>

3. 说明

type: 'liquidFill'：指定渲染水球图。
data: [0.6]：表示水球的填充程度，支持多个值创建波浪效果，如 [0.6, 0.55, 0.5]。
radius: '80%'：控制水球大小。
outline: { show: false }：关闭外边框。
backgroundStyle.color：设置水球背景色。
label：显示水球内的数值，并调整字体颜色和大小。

4. 动态数据

如果你想动态修改水球图的值，例如从后端获取数据，可以在 data 里添加 value 变量，然后在 watch 里监听它的变化：

<template>
  <div ref="chart" style="width: 300px; height: 300px;"></div>
</template>

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

export default {
  data() {
    return {
      value: 0.6 // 初始值
    };
  },
  mounted() {
    this.initChart();
  },
  watch: {
    value(newVal) {
      this.updateChart(newVal);
    }
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.chart);
      this.setChartOption();
    },
    setChartOption() {
      const option = {
        series: [
          {
            type: 'liquidFill',
            data: [this.value],
            radius: '80%',
            outline: { show: false },
            label: { fontSize: 20, color: '#000' }
          }
        ]
      };
      this.myChart.setOption(option);
    },
    updateChart(newValue) {
      this.myChart.setOption({
        series: [{ data: [newValue] }]
      });
    }
  }
};
</script>

然后你可以在 methods 里动态修改 this.value，比如从后端接口获取数据。