vue中绘制水球图（水波纹增长图，波纹型百分比）

先上效果图

1.在项目中安装依赖

npm i echarts-liquidfill -s

2.在组件中引入需要的echarts水球图插件

import echartsLiquidfill from 'echarts-liquidfill'

3.创建一个容器安置图形（设置好宽高）

4.生成图表

initWave (ref) {
      let _this = this
      setTimeout(() => {
        _this.chart = this.$echarts.init(_this.$refs[ref])
        // 把配置和数据放这里
        _this.chart.setOption({
          title: {// 标题
            text: '补贴资金剩余',
            textStyle: {// 标题的样式
              color: '#888', // 字体颜色
              fontFamily: 'Microsoft YaHei', // 字体
              fontSize: 14,
              fontWeight: '400',
              align: 'center', // 文字的水平方式
              baseline: 'middle',
              position: 'inside',
              verticalAlign: 'middle'// 文字的垂直方式
            },
            left: 'center', // 定位
            top: '20%'
          },
          series: [{
            type: 'liquidFill',
            radius: '95%',
            waveAnimation: true,
            data: [{
              value: 0.5,
              direction: 'left',
              itemStyle: {
                normal: {
                  color: '#1890ff'
                }
              }
            }],
            outline: {
              // show: true , //是否显示轮廓 布尔值
              borderDistance: 1, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: '#1890ff', // 边框的颜色
                borderWidth: 3 // 边框的宽度
                // shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                // shadowColor: '#000' //外部轮廓的阴影颜色
              }
            },
            itemStyle: {
              opacity: 0.9, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            backgroundStyle: {
              color: '#fff' // 图表的背景颜色
            },
            label: { // 数据展示样式
              show: true,
              color: '#000',
              insideColor: '#fff',
              fontSize: 20,
              fontWeight: 400,
              align: 'center',
              baseline: 'middle',
              position: 'inside'
            }
          }]
        })
      }, 0)
    }

在页面挂载时调用此方法即可

vue中绘制水球图（水波纹增长图，波纹型百分比）

相关推荐