echarts-liquidfill使用

最新推荐文章于 2025-07-10 23:13:36 发布

原创最新推荐文章于 2025-07-10 23:13:36 发布 · 1.4w 阅读

6 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用ECharts及echarts-liquidfill组件在项目中实现水球图的配置与展示，包括安装、初始化、样式调整及动态数据加载等步骤。

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

第一步：echarts与echarts-liquidfill添加到项目

添加echarts

 npm install echarts --save

添加echarts-liquidfill组件

npm install echarts-liquidfill

第二步：引用

import echarts from 'echarts'
import liquidfill from 'echarts-liquidfill'

第三步：html,css

<div id="liquidfill-chart"></div>

<style scoped>
  #liquidfill-chart {
    width: 100%;
    height: 140px;
    margin-bottom: 10px;
  }
</style>

第四步：初始化模版（为了方便多个页面共同使用）

引入方法

import { initOption as ioption } from 'liquidfillOptions.js'

export default{
    data() {
      return {
        opt: ioption
      }
    }
}

liquidfillOptions.js文件----这里放水球图的通用设置。

export let initOption = {
  series:[{
    type: 'liquidFill',
    data: [0.5, 0.4, 0.3, 0.2],
    outline: {
      show: false
    },
    shape: 'container',
    label: {
      normal: {
        formatter: function () {
          return '这里是我要在js中获取的数据';
        },
        textStyle: {
          color: '#D94854'
        }
      }
    }
  }]
}

第五步：js获取

    mounted() {
      var _this = this;
      _this.$http.get('api地址').then((res) => {
        res = JSON.parse(res);
        let _chart = echarts.init(document.getElementById("liquidfill-chart"));
        /*获取*/
        _this.opt.series[0].label.normal.formatter = function () {
          return res.yDatas[0] + '元';
        }
        _chart.setOption(_this.opt);
      });
    }