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 小时前
ECharts 太平面?试试这款 Vue 3D 图表库
前端·vue.js·echarts
RuoyiOffice1 天前
SpringBoot3+Vue3 接口访问日志实战:@ApiAccessLog 慢接口、参数脱敏与 OperateLog 如何分工
spring boot·vue3·traceid·spring boot 3·访问日志·apiaccesslog·操作日志
tryCbest2 天前
Vue3项目在Nginx中配置代理后端IP
nginx·vue3
glustful4 天前
企业内部审计项目管理 系统开源(springboot+vue3)
vue3·springboot
RuoyiOffice4 天前
SpringBoot3+Vue3 会议室预订系统:时段冲突三模式检测 + 会前定时提醒与 cancelByBiz
spring boot·vue3·flowable·消息中心·spring boot 3·会议室·时段冲突
燐妤5 天前
中老年智能健康管理项目
python·ai·pycharm·vue3·fastapi·项目开发·健康
paopaokaka_luck5 天前
基于springboot3+vue3的美妆商城平台(AI问答、协同过滤算法、支付宝沙盒支付、物流快递api、Echarts图形化分析)
java·前端·spring boot·学习·maven·echarts
gis开发之家6 天前
《Vue3 从入门到大神50篇》Vue3 源码详解(二十):生命周期钩子源码解析 —— onMounted / onUpdated 如何实现?
前端·javascript·前端框架·vue3·vue3源码
paopaokaka_luck7 天前
基于springboot3+vue3的音乐推荐系统(协同过滤算法、Echarts图形化分析)
前端·echarts
做好一个小前端11 天前
ECharts 折线图大数据量性能优化参考
前端·性能优化·echarts