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>
相关推荐
技术闲聊DD12 小时前
Vue3学习(4)- computed的使用
vue3·computed
这可不简单1 天前
方便易懂的自适应方案---echarts和dom样式大小自适应
前端·vue.js·echarts
蓝胖子的多啦A梦2 天前
Vue3 (数组push数据报错) 解决Cannot read property ‘push‘ of null报错问题
前端·vue3·push·数组数据
八月林城2 天前
echarts在uniapp中使用安卓真机运行时无法显示的问题
android·uni-app·echarts
有梦想的攻城狮3 天前
从0开始学vue:vue3和vue2的关系
前端·javascript·vue.js·vue3·vue2
路很长OoO4 天前
鸿蒙手写ECharts_手势惯性(条形统计图)
echarts·harmonyos·canvas
Alice_hhu5 天前
ResizeObserver 解决 echarts渲染不出来,内容宽度为 0的问题
前端·javascript·echarts
纯阳阳5 天前
如何用echart绘制圆柱
前端·echarts
全栈小56 天前
【前端】Vue3+elementui+ts,TypeScript Promise<string>转string错误解析,习惯性请出DeepSeek来解答
前端·elementui·typescript·vue3·同步异步
西哥写代码9 天前
基于cornerstone3D的dicom影像浏览器 第二十七章 设置vr相机,复位视图
3d·vue3·vr·cornerstonejs