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>
相关推荐
码界筑梦坊5 小时前
120-基于Python的食品营养特征数据可视化分析系统
开发语言·python·信息可视化·数据分析·毕业设计·echarts·fastapi
码界筑梦坊10 小时前
123-基于Python的特斯拉超级充电站分布数据可视化分析系统
开发语言·python·信息可视化·数据分析·毕业设计·echarts·fastapi
Pu_Nine_92 天前
Vue3 + ECharts 企业级封装实践:按需引入 + useECharts Hooks
前端·vue.js·echarts
码界筑梦坊2 天前
119-基于Python的各类企业排行数据可视化分析系统
开发语言·python·信息可视化·数据分析·毕业设计·echarts·fastapi
码界筑梦坊4 天前
117-基于Python的印度犯罪数据可视化分析系统
开发语言·python·mysql·信息可视化·毕业设计·echarts·fastapi
小云小白6 天前
高性能 v-html 弹窗实现:Vue3 + Element Plus 最佳实践
vue3·弹窗·v-html
xun-ming6 天前
SpringBoot和Vue3实战阿里百炼大模型极简版
spring boot·ai·vue3·智能体·百炼大模型
哆啦A梦15887 天前
20, Springboot3+vue3实现前台轮播图和详情页的设计
javascript·数据库·spring boot·mybatis·vue3
小盼江7 天前
基于Springboot3+Vue3的协同过滤鲜花商城推荐系统
vue3·springboot3·鲜花商城
蜡台8 天前
Vue3 + ECharts 实现地图显示,深蓝色科技风地图、涟漪点、向上连线 ,标签
vue.js·科技·echarts·map·地图