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>
相关推荐
陈逸子风7 分钟前
(系列五).net8 中使用Dapper搭建底层仓储连接数据库(附源码)
vue3·webapi·权限·流程
某公司摸鱼前端2 天前
uniapp 上了原生的 echarts 图表插件了 兼容性还行
前端·uni-app·echarts
柚乐果果3 天前
ECharts图表图例4
java·大数据·eclipse·echarts
幼儿园老大*3 天前
【Echarts】折线图和柱状图如何从后端动态获取数据?
前端·javascript·vue.js·经验分享·后端·echarts·数据可视化
盼兮*3 天前
栏目一:使用echarts绘制简单图形
前端·信息可视化·echarts
某公司摸鱼前端4 天前
uniapp微信小程序使用ucharts遮挡自定义tabbar的最佳解决方案
微信小程序·小程序·uni-app·echarts·ucharts
Jiaberrr5 天前
解锁微信小程序新技能:ECharts动态折线图搭配WebSocket,数据刷新快人一步!
前端·javascript·websocket·微信小程序·echarts
叫我:松哥6 天前
城市轨道交通网络客流大数据可视化分析系统----以某市交通网络客流数据为例
网络·数据库·python·信息可视化·前端框架·flask·echarts
一雨方知深秋7 天前
Element-plus安装及其基础组件使用
javascript·css·html·vue3·element-plus
清晨-阳光zx7 天前
vue-i18n在使用$t时提示类型错误
vue3·vue-i18n