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>
相关推荐
Sheldon一蓑烟雨任平生16 小时前
Sass 星空(Sass + keyframes 实现星空动画)
前端·css·vue3·sass·keyframes
Irene19911 天前
Vue 3 中移除了 $on、$off 和 $once 方法(附:Composables 组合式函数 使用详解)
vue3
Sapphire~2 天前
Vue3-15 html标签和组件上的ref属性 + 接口泛型
vue3
Irene19913 天前
Vue 3 中使用 Mitt 事件总线
vue3·mitt
咸甜适中3 天前
双色球、大乐透兑奖分析小程序(rust_Tauri + Vue3 + sqlite)
爬虫·rust·sqlite·vue3·tauri2
艾斯特_3 天前
Echarts常用配置项及解释
前端·javascript·echarts
winfredzhang4 天前
从零构建:基于 Node.js 与 ECharts 的量化交易策略模拟系统
前端·node.js·echarts·股票·策略
叫我辉哥e15 天前
新手进阶Python:办公看板集成多数据源+ECharts高级可视化
开发语言·python·echarts
Sapphire~5 天前
Vue3-012 vue2与vue3中的computed
vue3
weixin_462446235 天前
用 Python Tornado + Vue3 + ECharts 搭建 Docker 实时监控 WebSocket 仪表盘
python·echarts·tornado