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>
相关推荐
@AfeiyuO13 小时前
Vue3 高德地图
vue·echarts
小林攻城狮17 小时前
echarts 参考线实现数据项之间的差异值标注
前端·echarts
@AfeiyuO1 天前
Vue3 中国地图
vue·echarts
极客先躯1 天前
如何修复 ECharts 鼠标交互(如 hover、点击)位置错位的问题
计算机外设·echarts·交互
hang_bro2 天前
echarts 饼图显示设置
前端·echarts
Cherry的跨界思维2 天前
【AI测试全栈:Vue核心】19、Vue3+ECharts实战:构建AI测试可视化仪表盘全攻略
前端·人工智能·python·echarts·vue3·ai全栈·ai测试全栈
叫我:松哥2 天前
基于 Flask 的音乐推荐与可视化分析系统,包含用户、创作者、管理员三种角色,集成 ECharts 进行数据可视化,采用混合推荐算法
开发语言·python·信息可视化·flask·echarts·pandas·推荐算法
Misha韩4 天前
vue3 实时通讯 SSE
vue3·sse·实时通讯
啊花是条龙4 天前
《产品经理说“Tool 分组要一条会渐变的彩虹轴,还要能 zoom!”——我 3 步把它拆成 1024 个像素》
前端·javascript·echarts
冥界摄政王7 天前
Cesium学习第二章 camera 相机
node.js·html·vue3·js·cesium