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>
相关推荐
沛沛老爹16 小时前
Vue3+TS实战:基于策略模式的前端动态脱敏UI组件设计与实现
前端·ui·vue3·数据安全·策略模式·动态渲染·前端脱敏
gsls2008081 天前
vue3学习笔记
笔记·vue3
吴声子夜歌2 天前
RxJava——FlowableProcessor详解
android·echarts·rxjava
B站_计算机毕业设计之家3 天前
电影市场预测分析系统 | Python Django Echarts 票房可视化分析 大数据 人工智能 毕业设计源码(建议收藏)✅
大数据·数据库·python·机器学习·django·毕业设计·echarts
吴声子夜歌3 天前
RxJava——Subject详解
android·echarts·rxjava
吴声子夜歌3 天前
RxJava——被观察者
android·echarts·rxjava
vx_biyesheji00014 天前
电影个性化推荐与分析系统 | Python Django 协同过滤 Echarts 词云分析 大数据 人工智能 deepseek 毕业设计源码(建议收藏)✅
大数据·人工智能·python·机器学习·django·毕业设计·echarts
小小码农Come on4 天前
C++ QT使用ECharts显示k线图、折线图
开发语言·c++·echarts
平头也疯狂4 天前
RuoYi Office 全景介绍:一个平台管好整个企业
微服务·vue3·springboot·crm·oa·企业管理系统
weixin79893765432...5 天前
vue3 系统的梳理
vue.js·vue3