vue3+ts项目中使用水球图

下载水球图

  1. npm install echarts

  2. npm install echarts-liquidfill

在对应组件中引入也可在main.ts中引入水球图

 import * as echarts from 'echarts'
  import 'echarts-liquidfill'

 使用echarts必须给echarts图表设置宽高

此处绑定ref 是为了给图表数据 宽高是为了显示水球图

效果图

底部发光图是切图定位显示

vue3+ts项目中使用水球图_第1张图片

 代码如下