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>
相关推荐
青云交16 小时前
Java 大视界 -- 基于 Java 的大数据可视化在企业生产运营监控与决策支持中的应用
java·echarts·数据采集·实时监控·大数据可视化·智能决策·企业生产运营
小王码农记1 天前
vue2中实现天气预报
前端·javascript·vue.js·echarts
Sheldon一蓑烟雨任平生1 天前
webpack 从零构建 Vue3
webpack·typescript·vue3·webpack配置·从零构建vue3
saadiya~2 天前
基于 Vue3 封装大华 RTSP 回放视频组件(PlayerControl.js 实现)
前端·vue3·大华视频相机前端播放
软件架构师-叶秋3 天前
Vue3+tyepescript+ElementPlus+Axios前端技术栈
前端·vue3·elementplus
一只小阿乐3 天前
vue3封装alert 提示组件 仿element-plus
前端·javascript·vue.js·vue3
java1234_小锋3 天前
[免费]基于Python的农产品可视化系统(Django+echarts)【论文+源码+SQL脚本】
python·信息可视化·django·echarts
Sheldon一蓑烟雨任平生4 天前
Vue3 KeepAlive(缓存组件实例)
vue.js·vue3·组件缓存·keepalive·缓存组件实例·onactivated·ondeactivated
Sheldon一蓑烟雨任平生5 天前
Vue3 组件库 Element Plus
vue.js·vue3·element plus·element ui·vue3 常用组件库
全栈前端老曹6 天前
【前端组件封装教程】第3节:Vue 3 Composition API 封装基础
前端·javascript·vue.js·vue3·组合式api·组件封装