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>
相关推荐
Danny_FD6 小时前
使用 ECharts + ECharts-GL 生成 3D 环形图
前端·echarts
我是ed7 小时前
# vue3 使用 echarts 展示某省份各区市数据
前端·echarts
Danny_FD1 天前
使用Highcharts创建3D环形图
前端·echarts
fruge4 天前
前端可视化家庭账单:用 ECharts 实现支出统计与趋势分析
前端·javascript·echarts
菥菥爱嘻嘻5 天前
React + ECharts 实践:构建可交互的数据可视化组件
react.js·信息可视化·echarts
gis分享者6 天前
学习threejs,添加ECharts图表
echarts·threejs·material·图表·canvastexture·planegeometry
你说啥名字好呢6 天前
【Vue 渲染流程揭秘】
前端·javascript·vue.js·vue3·源码分析
行走的陀螺仪9 天前
vue3-封装权限按钮组件和自定义指令
前端·vue3·js·自定义指令·权限按钮
麦麦大数据9 天前
F046 新闻推荐可视化大数据系统vue3+flask+neo4j
python·flask·vue3·知识图谱·neo4j·推荐算法
Sheldon一蓑烟雨任平生10 天前
Vue3 高级性能优化
性能优化·vue3·tree-shaking·高级性能优化·首屏加载优化·更新优化·大型虚拟列表