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>
相关推荐
Sapphire~2 小时前
Vue3-11 toRefs 和 toRef
vue3
华玥作者2 天前
uni-app + Vite 项目中使用 @uni-helper/vite-plugin-uni-pages 实现自动路由配置(超详细)
前端·uni-app·vue·vue3·vite
独立开发者阿乐3 天前
Vue3中Markdown解析与渲染的完整解决方案:从安全到性能优化
web安全·性能优化·vue3·前端开发·语法高亮·markdown解析·markdown-it
Sapphire~4 天前
Vue3-10 ref与reactive创建响应式数据的区别
vue3
tianxinw4 天前
uniapp x + vue3 实现echarts图表
前端·uni-app·vue·echarts
Irene19914 天前
Vue3 TypeScript 项目中,Emits 验证的使用场景
typescript·vue3·验证
箫笙默4 天前
Vue3基础笔记
笔记·vue·vue3
Sapphire~5 天前
Vue3-09 创建响应式数据(基本类型ref和对象类型reactive)
vue3
前端_Danny5 天前
用 ECharts markLine 实现节假日标注
前端·信息可视化·echarts
叫我:松哥5 天前
基于Flask+ECharts+Bootstrap构建的微博智能数据分析大屏
人工智能·python·信息可视化·数据分析·flask·bootstrap·echarts