Vue.js 写一个echarts的水滴图_vue水滴图-CSDN博客

本文链接：https://blog.csdn.net/leemu0822/article/details/99648414

本文详细介绍了如何在项目中使用 ECharts 的 LiquidFill 组件来创建动态填充的水球图。从安装依赖到在 Vue 项目中实现的具体步骤，包括代码示例和样式设置。

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

首先在安装echarts依赖库的情况下，详情可以参考我的上一篇博客

第一步在命令行或者控制台引入liquidfill：

npm install echarts-liquidfill

第二步：在项目的main.js文件引入liquidfill

在component下面新建一个vue文件，具体代码如下：

<template>
    <div>
        <div id="myChart"></div>
        <div id="ms">{{msg}}</div>
    </div>

</template>
<script>

export default {
    name: 'hello',
    data () {
        return {
        msg: '欢迎大家关注我',
       
        }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        
        // 绘制图表
        myChart.setOption({
    series: [{
        type: 'liquidFill',
        radius: '50%',
        data: [0.6],
        color: 'rgba(77,205,110,100)',
        label: {
            normal: {
                color: '#fff',
                insideColor: 'transparent',
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold',
                    fontFamily: 'Microsoft YaHei'
                }
            }
        },
        outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
                borderColor: 'rgba(67,209,100,1)',
                borderWidth: 2
            }
        },
        backgroundStyle: {
            color: 'rgba(67,209,100,.3)'
        }
    }]
        });
    }
  }
}
</script>
<style scoped>
#myChart{
    width: 500px;
    height: 500px;
    margin: 0 auto;
}
</style>

最后路由修改一下：