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>
相关推荐
Sheldon一蓑烟雨任平生2 小时前
Vue3 任务管理器(Pinia 练习)
vue.js·vue3·pinia·任务管理器·pinia 练习
云外天ノ☼16 小时前
待办事项全栈实现:Vue3 + Node.js (Koa) + MySQL深度整合,构建生产级任务管理系统的技术实践
前端·数据库·vue.js·mysql·vue3·koa·jwt认证
xiaohe06011 天前
🥳 Uni ECharts 2.1 发布:正式支持鸿蒙,零成本迁移、全平台兼容、跨端开发零负担!
vue.js·uni-app·echarts
行走的陀螺仪2 天前
uni-app + Vue3 实现折叠文本(超出省略 + 展开收起)
前端·javascript·css·uni-app·vue3
前端_Danny2 天前
使用 ECharts + ECharts-GL 生成 3D 环形图
3d·信息可视化·echarts
景早2 天前
小黑记账清单案例(axios,echarts,vue)
前端·vue.js·echarts
uuai3 天前
echarts不同版本显示不一致问题
前端·javascript·echarts
Sheldon一蓑烟雨任平生3 天前
Vue 用户管理系统(路由相关练习)
vue.js·vue3·axios·json-server·vue-router·vue 路由·vue-link
马卫斌 前端工程师3 天前
vue3 实现echarts 3D 地图
前端·javascript·echarts
Sheldon一蓑烟雨任平生3 天前
Vue3 插件(可选独立模块复用)
vue.js·vue3·插件·vue3 插件·可选独立模块·插件使用方式·插件中的依赖注入