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>
相关推荐
军军君011 小时前
数字孪生监控大屏实战模板:智能业务大数据监管平台
css·vue.js·elementui·typescript·前端框架·echarts·less
知识分享小能手2 天前
ECharts入门学习教程,从入门到精通,综合实战——ECharts数据大屏 - 完整知识点(9)
前端·学习·echarts
军军君012 天前
数字孪生监控大屏实战模板:交通云实时数据监控平台
前端·javascript·css·vue.js·typescript·前端框架·echarts
知识分享小能手2 天前
ECharts入门学习教程,从入门到精通,综合实战——ECharts电商数据可视化完整知识点+案例代码(8)
学习·信息可视化·echarts
赵庆明老师4 天前
vben开发入门6:tsconfig.json
json·vue3·vben
赵庆明老师4 天前
vben开发入门5:vite.config.ts
前端·html·vue3·vben
知识分享小能手4 天前
ECharts入门学习教程,从入门到精通,ECharts高级功能(6)
前端·学习·echarts
qq_283720054 天前
Python3 模块精讲:pyecharts —— 交互式数据可视化全解与实战
python·信息可视化·数据分析·echarts·数据可视化·pyecharts
军军君015 天前
数字孪生监控大屏实战模板:云数据中心展示平台
前端·javascript·vue.js·typescript·前端框架·es6·echarts
沙振宇5 天前
【Web】使用Vue3+PlayCanvas开发3D游戏(十二)渲染PCD点云可视化模型
3d·vue3·点云·pcd