vue3实现chart水球图

代码如下

js 复制代码
<template>
<div>
<div ref="test" style="width:400px";height="400px"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill';
export default{
setup(props,content){
let echart = echarts;
    const test = ref(null);
    function initChart(){
        let chart = echart.init(test.value)
        chart.setOption({
            title:{
                text:'',
                subtext:'',
                itemGap:10,
                textStyle:{
                    fontSize:'20',
                    fontWeight:'800',
                    color:'black',
                },
                subtextStyle:{
                    fontSize:'20',
                    fontWeight:'800',
                    color:'black',
                },
            },
        series:[
            {
                type:'liquidFill',
                name:'',
                data:[0.7],
                radius:'70%',
                color:'#73',
                backgroundStyle:{
                    color:'rgba(255,255,255)',
                },
                outline:{
                    show:true
                },
            }
        ],
            // 鼠标进入是否给出提示
            tooltip:{
                show:true,
                formatter: function(params){
                    let tooltipe='<div>123</div>';
                    return tooltipe;
                },
            }
        })
    }
    return{
        test
    };

}
}
</script>
相关推荐
终端鹿8 小时前
Vue3 与第三方组件库联动:Element Plus 按需引入与二次封装
vue3·element plus·二次封装
Dxy12393102161 天前
ECharts折线图入门学习:从基础到实战的完整指南
学习·信息可视化·echarts
yb305小白1 天前
echarts 排名Y轴数据过多出现滚动条,排名柱形条绑定事件
前端·echarts
Dxy12393102161 天前
ECharts入门学习:从零开始打造炫酷数据可视化
学习·信息可视化·echarts
533_3 天前
[echarts] 使用scss变量
前端·echarts·scss
漂移的电子3 天前
【echarts 细节】
前端·javascript·echarts
qq_342218124 天前
echarts 横向渐变格子柱状图 三层
前端·javascript·echarts
Red丶哞5 天前
echarts快速上手
echarts
Grocery store owner6 天前
vue3使用wangeditor上传附件以及添加表格,可以直接复制粘贴excel内容
vue3·wangeditor
floret. 小花6 天前
Vue3 知识点总结 · 2026-03-27
前端·面试·electron·学习笔记·vue3