vue3实现chart水球图

本文主要是介绍vue3实现chart水球图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

代码如下

<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>

这篇关于vue3实现chart水球图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---