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>
相关推荐
凯小默3 小时前
23-完成登录页面跳转加载路由规则
vue3
凯小默1 天前
vue3.x 里面使用 vuex4.x 无法找到模块“vuex”的声明文件
vue3·vuex4
玄魂1 天前
VChart 扩展新功能:一行代码解锁数据回归与趋势分析
前端·echarts·数据可视化
凯小默2 天前
19-项目路由规则介绍
vue3
鹤归时起雾.3 天前
Vue3响应式编程核心指南
开发语言·vue3
Beginner x_u3 天前
Vue3 + TS + TailwindCSS 操作引导组件开发逐行解析
typescript·vue3·前端开发·tailwindcss·组件开发
@AfeiyuO3 天前
多层环形图,自定义tooltip
vue·echarts
凯小默3 天前
17-使用前置导航守卫判断用户登录后刷新情况
vue3
凯小默3 天前
18-通过actions方法封装请求以及补充计算属性
vue3
liupenglove3 天前
go-echarts基础使用方法
开发语言·golang·echarts