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>
相关推荐
筱璦6 小时前
PHP+ VUE3机构级股票分仓管理交易系统源码可出
开发语言·php·vue3·量化·股票分仓
paopaokaka_luck2 天前
停车小程序(车牌OCR智能识别、地图API、Echarts图形化分析、智能车位预约、自动计费与订单处理)
小程序·ocr·echarts
张人玉2 天前
基于 Python 的桌面端智能识别与可视化系统——生活垃圾分类可视化大屏
python·分类·sqlite·echarts·生活
RuoyiOffice3 天前
SpringBoot3+Vue3 代码生成器深拆:元数据 IR、模板编译与安全同步
spring boot·vue3·mybatis plus·代码生成器·spring boot 3·velocity·元数据驱动
paopaokaka_luck3 天前
基于springboot3+vue3的支教志愿者管理系统(AI问答、协同过滤算法、Echarts图形化分析)
spring boot·echarts
sir.山3 天前
在 Vue 3 项目中使用 Mock 数据
前端·vue.js·vue3·vite
paopaokaka_luck4 天前
基于springboot3+vue3的文山民族文化资源展示与推广平台(协同过滤算法、Echarts 图形化分析)
java·前端·spring boot·学习·echarts
张人玉4 天前
基于 Vue 3 + ECharts + Three.js + Express + SQLite——智慧城市数字孪生可视化平台
javascript·vue.js·信息可视化·sqlite·echarts
Smile_ping5 天前
ECharts 图例文本对齐,告别长短不一!
echarts·legend·图例文本对齐
Sayai6 天前
【无标题】ECharts 实现日志量异常检测:基线 ±Kσ 基带 + 灵敏度切换(Vue2 实战)
前端·javascript·echarts