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>
相关推荐
我是ed.1 天前
Vue3 图片标注插件 AILabel
前端·vue3·标注·ailabel
羽沢312 天前
ECharts 学习
前端·学习·echarts
熊猫钓鱼>_>2 天前
Vue3 + Tailwind CSS + DaisyUI 现代前端开发完全攻略
前端·css·vue.js·vue3·tailwind·daisyui·现代开发
小白_ysf2 天前
Vue3+TS项目中高德地图组件封装(集成关键词搜索、输入提示、标记点、信息弹窗和数据回显)
vue3·ts·高德·地图 js api
湛海不过深蓝2 天前
【echarts】折线图颜色分段设置不同颜色
前端·javascript·echarts
@AfeiyuO2 天前
Vue3 玫瑰图
vue·echarts
小肥宅仙女2 天前
React + ECharts 多图表联动实战:从零实现 Tooltip 同步与锁定功能
前端·react.js·echarts
Light603 天前
Vue 高阶优化术:v-bind 与 v-on 的实战妙用与思维跃迁
前端·低代码·vue3·v-bind·组件封装·v-on·ai辅助开发
@AfeiyuO5 天前
Vue3 矩形树图
vue·echarts
我很苦涩的5 天前
原生小程序使用echarts
前端·小程序·echarts