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>
相关推荐
唯之为之5 小时前
# Vue3.5常用特性整理
vue3·ssr
于指尖飞舞11 小时前
在vue3中使用datav完整引入时卡在加载页面的解决方法
vue3·报错·datav
猫猫村晨总1 天前
基于 Vue3 + Canvas + Web Worker 实现高性能图像黑白转换工具的设计与实现
前端·vue3·canvas
小彭努力中1 天前
16.在Vue3中使用Echarts实现词云图
前端·javascript·vue.js·echarts
上官熊猫1 天前
nuxt3项目打包部署到服务器后配置端口号和开启https
前端·vue3·nuxt3
璇璇吴2 天前
vue3 el-form表格滚动
javascript·vue3·elementplus
好_快2 天前
Echarts vs G2
echarts·数据可视化·canvas
anyup_前端梦工厂2 天前
ECharts 海量数据渲染性能优化方案
信息可视化·性能优化·echarts
小彭努力中3 天前
13.在 Vue 3 中使用 ECharts 实现桑基图
前端·javascript·vue.js·echarts
小华同学ai4 天前
GCPAAS/DashBoard:完全免费的仪表盘设计,基于Vue+ElementUI+G2Plot+Echarts,开源代码,简单易用!还在等什么呢
vue.js·elementui·github·echarts