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>
相关推荐
java水泥工7 小时前
基于Echarts+HTML5可视化数据大屏展示-白茶大数据溯源平台V2
大数据·echarts·html5
Wiktok1 天前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
Wiktok1 天前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
码上暴富2 天前
Echarts雷达图根据数值确定颜色
前端·javascript·echarts
懒大王95272 天前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
Wiktok2 天前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
知识分享小能手3 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Wiktok3 天前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
小谭鸡米花3 天前
uni小程序中使用Echarts图表
前端·小程序·echarts
Jinuss4 天前
Vue3源码reactivity响应式篇之watch实现
前端·vue3