vue中绘制水球图（水波纹增长图，波纹型百分比）

只爱吃菜不吃饭

于 2019-05-10 14:04:22 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏：日常积累文章标签： vue echarts 水球图

本文链接：https://blog.youkuaiyun.com/qq_42597536/article/details/90056775

本文介绍了如何在Vue项目中利用echarts-liquidfill插件创建水球图（水波纹增长图）。首先通过npm安装依赖，然后在组件内引入插件，接着设置容器并赋予样式，最后在页面挂载时生成水波纹图表。

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

先上效果图

1.在项目中安装依赖

npm i echarts-liquidfill -s

2.在组件中引入需要的echarts水球图插件

import echartsLiquidfill from 'echarts-liquidfill'

3.创建一个容器安置图形（设置好宽高）

4.生成图表

initWave (ref) {
      let _this = this
      setTimeout(() => {
        _this.chart = this.$echarts.init(_this.$refs[ref])
        // 把配置和数据放这里
        _this.chart.setOption({
          title: {// 标题
            text: '补贴资金剩余',
            textStyle: {// 标题的样式
              color: '#888', // 字体颜色
              fontFamily: 'Microsoft YaHei', // 字体
              fontSize: 14,
              fontWeight: '400',
              align: 'center', // 文字的水平方式
              baseline: 'middle',
              position: 'inside',
              verti