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>
相关推荐
qq_308562312 小时前
vue3 中引入tinymce富文本
vue3·富文本·tinymce
懒大王95271 天前
echarts+HTML 绘制3d地图,加载散点+散点点击事件
前端·html·echarts
实习生小黄2 天前
echarts 实现环形渐变
前端·echarts
sen_shan2 天前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
路光.2 天前
Vue3实现锚点定位
前端·javascript·vue.js·vue3
南茗啊3 天前
echarts地图轮播markpoint-自用记录📝
前端·echarts
用户26124583401613 天前
饼图数据过多时,图例分成左右两列对称展示,可滚动翻页
前端·echarts
小谭鸡米花4 天前
ECharts各类炫酷图表/3D柱形图
前端·javascript·echarts·大屏端
DataGear5 天前
DataGear 企业版 1.4.0 发布,数据可视化分析平台
javascript·信息可视化·数据分析·html·echarts·数据可视化
wocwin6 天前
uniapp微信小程序封装navbar组件
微信小程序·uni-app·vue3·组件封装·navbar