vue 水波纹 echarts-liquidfill组件

---

前言

这里 记录了一些本人在工作中用到的一些关于echarts的图表内容，话不多说，直接上代码

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.引入库

首先加载组件依赖：

//加载组件依赖
npm install echarts
npm install echarts-liquidfill
//或者
yarn add echarts
yarn add echarts-liquidfill

//在页面里引入组件（为防止组件不能正常使用，需要在公用的页面main.js也引入一下）
import * as echarts from 'echarts';
import 'echarts-liquidfill'

2.整体代码如下

<template>
       <div class="table_main_body_box">
          <div class="inner_title">重量液位展示</div>
          <div style="display: flex;justify-content: space-between;">
          //水波图start
            <div class="table_main_body" style="width:20%;height:360px">
              <div id="tieguanTi" style="width:100%; height:100%;"></div>
            </div>
            //水波图end
            //平滑折线图start
            <div class="table_main_body" style="width:80%;height:360px;">
              <div id="tieguan" style="width:100%; height:100%;"></div>
            </div>
            //平滑折线图end
          </div>
        </div>
</template>
<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getLoginfo, getVisitInfo } from '@/api/api'
import { deleteAction, getAction, downFile, getFileAccessHttpUrl } from '@/api/manage'
//引入echarts
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  name: 'IndexFrist',
  mixins: [JeecgListMixin, mixinDevice],
  components: {},
  data() {
    return {
      // echarts 数据
      option: {
        //平滑折线图start
        datatieguan: {
          //  backgroundColor: "#323a5e",//背景颜色
          xAxis: {
            name: '重量：kg', //y轴上方的单位
            nameTextStyle: {
              //y轴上方单位的颜色
              color: '#fff'
            },
            type: 'category',
            data: ['100', '200', '300', '400', '500', '600', '700'],
            axisLine: {
              //x轴线的颜色以及宽度
              show: true,
              lineStyle: {
                color: 'rgba(219,225,255,1)',
                width: 0,
                type: 'solid'
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '液位：km', //y轴上方的单位
            nameTextStyle: {
              //y轴上方单位的颜色
              color: '#fff'
            },
            axisLabel: {
              //y轴文字的配置
              textStyle: {
                color: 'rgba(219,225,255,1)',
                margin: 15
              }
              // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
            }
          },
          series: [
            {
              data: [0, 250, 300, 450, 500, 650, 700],
              type: 'line',
              lineStyle: {
                color: '#df0'
              },
              smooth: true
            }
          ]
        },
        //平滑折线图end
      
        //水球图
        datatieguanTi: {
          series: [
            {
              type: 'liquidFill', //表明这是一个水球图类型
              radius: '20%', // 水球图的半径，一般控制球的大小
              center: ['50%', '50%'],
              shape: 'container', //柱体形状
              // shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',//鱼状
              data: [
                {
                  value: '0.5',
                  label: {
                    color: '#fff',
                    fontSize: 38,
                    fontFamily: 'OPPOSans',
                    fontWeight: 'bold',
                    lineHeight: 28
                  },
                  direction: 'left', //指定波浪的移动方向'left' 或 'right'， 'none' 表示静止。
                  itemStyle: {
                    normal: {
                      color: {
                        colorStops: [
                          {
                            offset: 0,
                            color: '#58A2F0' // 0% 处的颜色
                          },

                          {
                            offset: 1,
                            color: '#8BD7FF' // 100% 处的颜色
                          }
                        ]
                      } // 设置水波的颜色
                    }
                  }
                }
              ],
              amplitude: 5, //水波纹高度
              waveAnimation: 1, //水波纹静动状态
              outline: {
                // 外边框不显示
                show: false,
                // itemStyle: {
                //     borderWidth: 0,
                // },
                borderDistance: 0
              },
              backgroundStyle: {
                borderWidth: '0',
                color: '#104277'
              }
            }
          ]
        }
      },
     
    }
  },
  created() {
   
    setTimeout(() => {
      this.getdatatieguan()
      this.setflow()
    
    }, 3000)
  },
 
  methods: {
	//水波图start
    setflow(vessel, bgcolor, bgcolor2, bgcolor3, val) {
      var that = this
      let myChart = that.$echarts.init(document.getElementById('tieguanTi'))
      myChart.setOption(that.option.datatieguanTi)
    },
   //水波图end
    //平滑折线图start
    getdatatieguan() {
      var that = this
      // document.querySelector('#teacherScale')
      let myChart = that.$echarts.init(document.getElementById('tieguan'))
      myChart.setOption(that.option.datatieguan)
    },
   //平滑折线图end
  }
}
</script>

展示效果如下图所示

总结

以上就是今天要讲的内容，本文仅仅简单介绍了echarts 折线图和 水波图 的使用，代码可能有些乱，希望可以帮到你一点。