echarts实现渐变矩形水球图

阿彤 发布于 2 月 3 日

1. 下载echarts和echarts-liquidfill

npm install echarts --save
npm install echarts-liquidfill

2. main.js

import * as echarts from 'echarts'
import 'echarts-liquidfill'
Vue.prototype.$echarts = echarts

3. html

<div class="chart-box">
  <div class="liquidFill" ref="liquidFill"></div>
</div>

4. css

.chart-box {
  width: 45px;
  height: 120px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #061633;
  .liquidFill {
    width: 100%;
    height: 100%;
  }
}

5. js

export default {
  mounted () {
    this.draw(0.6)
  },
  methods: {
    draw (data) {
      const chart = this.$echarts.init(this.$refs.liquidFill)
      const dataOption = {
        value: data,
        itemStyle: {
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          }, {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        }
      }

      const option = {
        series: [
          {
            type: 'liquidFill',
            shape: 'rect',
            radius: 120,
            amplitude: '8%', // 振幅
            data: [dataOption, dataOption],
            backgroundStyle: {
              color: 'rgba(255, 255, 255, 0)'
            },
            outline: {
              show: false
            },
            label: {
              normal: {
                show: false,
                formatter: ''
              }
            }
          }
        ]
      }
      chart.setOption(option)
   }
}

6. 最终实现效果