echarts实现渐变矩形水球图
首页 专栏 vue.js 文章详情
1

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. 最终实现效果

image

echarts vue.js
阅读 48 发布于 2 月 3 日
赞1 收藏
分享
本作品系原创, 采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
avatar
阿彤
1 声望
1 粉丝
关注作者
0 条评论
得票 时间
提交评论
avatar
阿彤
1 声望
1 粉丝
关注作者
宣传栏
目录
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. 最终实现效果

image