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>
相关推荐
weixin_307779131 小时前
赋能插件,驱动图表:Jenkins ECharts API插件详解
运维·开发语言·自动化·jenkins·echarts
xiangxiongfly91520 小时前
ECharts 使用总结
echarts
@AfeiyuO1 天前
Vue3 热力图
vue·echarts
@AfeiyuO1 天前
Vue3 词云
vue·echarts
Jeking2172 天前
进阶流程图绘制工具 Unione Flow Editor-- 巧用Event事件机制,破解复杂业务交互难题
流程图·vue3·workflow·unione flow·flow editor·unione cloud
一只小阿乐3 天前
前端vue3 web端中实现拖拽功能实现列表排序
前端·vue.js·elementui·vue3·前端拖拽
AAA阿giao3 天前
从“操纵绳子“到“指挥木偶“:Vue3 Composition API 如何彻底改变前端开发范式
开发语言·前端·javascript·vue.js·前端框架·vue3·compositionapi
૮・ﻌ・3 天前
Vue3:组合式API、Vue3.3新特性、Pinia
前端·javascript·vue3
猿究院_xyz3 天前
微信小程序与echarts联动安卓真机测试出现黑色阴影
前端·javascript·微信小程序·小程序·echarts
paopaokaka_luck3 天前
基于SpringBoot+Uniapp的自习室预约小程序(腾讯地图API、Echarts图形化分析、二维码识别)
vue.js·spring boot·后端·spring·echarts