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_589568104 小时前
数据可视化echarts学习笔记
学习·信息可视化·echarts
m0_7482449610 小时前
echarts画风向杆
前端·数据库·echarts
学前端的小朱13 小时前
Echarts实现大屏可视化
websocket·echarts·nodejs·vue3·vite·koa·cors
图表制作解说(目标1000个图表)2 天前
ECharts柱状图-柱图42,附视频讲解与代码下载
echarts·统计分析·数据可视化·柱状图·大屏可视化
图表制作解说(目标1000个图表)2 天前
ECharts散点图-SymbolShapeMorph,附视频讲解与代码下载
echarts·统计分析·数据可视化·散点图·大屏可视化
图表制作解说(目标1000个图表)3 天前
ECharts关系图-关系图11,附视频讲解与代码下载
echarts·统计分析·数据可视化·关系图·大屏可视化
图表制作解说(目标1000个图表)3 天前
ECharts柱状图-柱图32,附视频讲解与代码下载
echarts·统计分析·数据可视化·柱状图·大屏可视化
图表制作解说(目标1000个图表)3 天前
ECharts热力图-笛卡尔坐标系上的热力图,附视频讲解与代码下载
echarts·统计分析·数据可视化·热力图·大屏可视化
小茗同学阿3 天前
Vue + ECharts 实现山东地图展示与交互
前端·vue.js·echarts
漫天绯羽4 天前
使用echarts 绘制县级以下 乡镇地图并标注若干坐标点。获取县级以下乡镇的边界坐标
前端·javascript·echarts