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>
相关推荐
梁辰兴20 小时前
企业培训笔记:宠物信息管理--实现宠物信息分页查询
笔记·elementui·mybatis·vue3·springboot·宠物
魔都吴所谓1 天前
【Echarts】 电影票房汇总实时数据横向柱状图比图
javascript·ecmascript·echarts
JosieBook2 天前
【web应用】若依框架中,使用Echarts导出报表为PDF文件
前端·pdf·echarts
爱看书的小沐3 天前
【小沐杂货铺】基于Three.JS绘制汽车展示Car(WebGL、vue、react、autoshow、提供全部源代码)
汽车·vue3·react·webgl·three.js·opengl·autoshow
小彭努力中3 天前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
姜太小白4 天前
【ECharts】多个ECharts版本共存解决方案
前端·javascript·echarts
梁辰兴4 天前
企业培训笔记:Vue3前端框架配置
笔记·前端框架·npm·vue·vue3·node
患得患失9495 天前
【前端】【Echarts】ECharts 词云图(WordCloud)教学详解
前端·javascript·echarts
zhaocarbon6 天前
vue2 echarts中国地图、在地图上标注经纬度及标注点
前端·javascript·echarts