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>
相关推荐
h_654321010 小时前
echarts实现柱状图加一条横线
前端·echarts
速易达网络11 小时前
ECharts 图表制作完全指南:从零到可视化实战
前端·javascript·echarts
paopaokaka_luck12 小时前
灾害应急物资管理系统(AI应急助手、Echarts可视化数据看板、捐赠入库联动、 物资全流程管理、库存变动追溯、灾情资讯与互动反馈、物资发放公示)
java·前端·javascript·spring boot·mysql·tomcat·echarts
paopaokaka_luck4 天前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
Nymph_Zhu4 天前
vue3+element-plus 文件上传
前端·typescript·vue3·element-plus
Nymph_Zhu4 天前
pdf转换markdown预览及内容互相点击定位
前端·pdf·vue3·markdown·element-plus
腾讯数据架构师5 天前
任务跑完怎么直接出图表?CubeStudio 任务可视化 ECharts 数据格式实操(CSV/JSON + metric.json,11 种图表一键渲染)
前端·json·echarts·数据可视化
总要学点什么5 天前
第81篇:数据可视化-PM2.5分布——让圆点的胖瘦替每座城市报出浓度
前端·信息可视化·echarts·cesium·空间分析
paopaokaka_luck6 天前
社区服务平台(加权协同过滤推荐、Jieba中文词频分析、WebSocket实时聊天、求助处理闭环、 活动积分闭环、ECharts多维分析)
java·前端·spring boot·mysql·echarts·mybatis
mmsx6 天前
Android 并发考古:newThread 与 RxJava 共存,以及 GlobalScope 的三宗罪
android·echarts·rxjava