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>
相关推荐
曲幽1 天前
Vue 3 组合式 API 香是香,但从Vue2迁移时你可别像我当初一样踩进这 3 个深坑里
vue3·vue2·web·watch·data·this·reactive·setup·ref
Alvin千里无风1 天前
ECharts 世界地图实现完整指南
前端·echarts
军军君012 天前
数字孪生监控大屏实战模板:智慧城市大屏
前端·vue.js·typescript·前端框架·echarts·智慧城市·大屏展示
小旭95272 天前
SpringBoot 项目实战:ECharts 数据可视化 + POI Excel 报表导出完整版教程
java·spring boot·后端·信息可视化·echarts
快乐小土豆~~5 天前
echarts柱状图的X轴label过长被重叠覆盖
前端·javascript·vue.js·echarts
儒雅的烤地瓜5 天前
Vue | Vue3中<script setup>用法详解
vue.js·vue3·选项式api·组合式 api·setup方法·<script setup>
军军君015 天前
数字孪生监控大屏实战模板:可视化数字统计展示
前端·javascript·vue.js·typescript·echarts·数字孪生·前端大屏
淡笑沐白5 天前
ECharts入门指南:数据可视化实战
前端·javascript·echarts
菜鸟茜5 天前
Vue3 + Element Plus 省市区县级联组件封装,支持 v-model 双向绑定 + 回显,可直接复用
vue3·element-plus·组件封装·前端复用·省市区县级联
_院长大人_6 天前
Vue + ECharts 实现价格趋势分析图
前端·vue.js·echarts