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>
相关推荐
玄魂3 小时前
如何查看、生成 github 开源项目star 图表
前端·开源·echarts
哟哟耶耶13 小时前
css-Echarts图表tooltip / label文本过长 超出屏幕边缘或容器范围
前端·javascript·echarts
weixin_459548902 天前
QT+Echarts初始示例
qt·echarts
毕设源码-钟学长2 天前
【开题答辩全过程】以 公寓出租系统为例,包含答辩的问题和答案
java·eclipse·echarts
凯小默3 天前
37-实现地图配置项(完结)
echarts·vue3
疯笔码良3 天前
Vue + Echarts 实现科技感数据大屏
vue.js·echarts
凯小默3 天前
36-引入地图
echarts·vue3
@AfeiyuO4 天前
Vue3 旭日图
vue·echarts
毕设源码-钟学长4 天前
【开题答辩全过程】以 高校健康申报系统为例,包含答辩的问题和答案
java·tomcat·echarts
凯小默4 天前
【TypeScript+Vue3+Vite+Vue-router+Vuex+Mock 进行 WEB 前端项目实战】学习笔记共 89 篇(完结)
typescript·echarts·mock·vue3·vite·vuex·vue-router